Echarts实战GEO3D和bar3D延迟显示动画发光柱图的练习(未成功)

在这里插入图片描述

 let geoCoordMap = {
     "海门": [121.15, 31.89],
     "鄂尔多斯": [109.781327, 39.608266],
     "库尔勒": [86.06, 41.68],
     "安阳": [114.35, 36.1],
     "开封": [114.35, 34.79],
     "济南": [117, 36.65],
     "德阳": [104.37, 31.13],
     "温州": [120.65, 28.01],

     "邯郸": [114.47, 36.6],
     "临安": [119.72, 30.23],
     "兰州": [103.73, 36.03],
     "沧州": [116.83, 38.33],

     "武汉": [114.31, 30.52],
     "大庆": [125.03, 46.58]
 };
 let data = [];
 for (let key in geoCoordMap) {
     data.push({
         name: key,
         value: 50
     });
 }
 let mindata = [];
 data.forEach(element => {
     mindata.push(element.value);
 });
 var convertData = function(data) {
     var res = [];
     for (var i = 0; i < data.length; i++) {
         var geoCoord = geoCoordMap[data[i].name];
         if (geoCoord) {
             res.push({
                 name: data[i].name,
                 value: geoCoord.concat(data[i].value)
             });
         }
     }
     return res;
 };

 option = {
     backgroundColor:"#061740",
     title: {
         text: '',
         x: 'left',
         top: "10",
         textStyle: {
             color: '#000',
             fontSize: 14
         }
     },
     tooltip: {
         show: true,
         formatter: (params) => {
             let data = params.name + "<br/>" + "值:" + params.value[2] + "<br/>" + "地理坐标:[" + params.value[0] + "," + params.value[1] + "]";
             return data;
         },
     },
     geo3D: {
         map: 'china',
         label: {
             show: false,
             textStyle: {
                 color: "#fff", // 地图初始化区域字体颜色
                 fontSize: 12, // 字体大小
                 opacity: 1, // 字体透明度
                 backgroundColor: "rgba(0,23,11,0)" // 字体背景色
             }
         },
         itemStyle: {
             areaColor: "#091c3d",
             opacity: 1,
             borderWidth: 1,
             borderColor: "#3fdaff"
         },
         emphasis: {
             label: {
                 show: false
             },
             itemStyle: {
                 areaColor: "#2B91B7"
             }
         },
         viewControl: {
             autoRotate: false,
             minBeta: -360,
             maxBeta: 360
         }
     },

     series: [{
         name: 'bar3D',
         type: "bar3D",
         coordinateSystem: 'geo3D',
         barSize: 1, //柱子粗细
         opacity: 1,
         minHeight: 0.05,
         bevelSize: 1, //柱子的倒角尺寸
         bevelSmoothness: 10, //柱子的倒角光滑度
         silent: false, //图形是否不响应和触发鼠标事件
         shading: "realistic", //着色效果
         animationDurationUpdate:6000,
         label: {
             show: true,
             formatter: '{b}'
         },
         data: [],
     }, {
         name: 'scatter3D',
         type: "scatter3D",
         coordinateSystem: 'geo3D',
         symbol: 'circle',
         symbolSize: 30,
         opacity: 1,
         label: {
             show: false,
             formatter: '{b}'
         },
         itemStyle: {
             color:"#ff0033",
             borderWidth: 0.5,
             borderColor: '#fff'
         },
         data: convertData(data)
         }]
 }

 setTimeout(function() {
     myChart.setOption({
         series: [{
             data: convertData(data)
         }]
     })
 }, 2000)

Done!

©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页