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

简介: 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!

相关文章
|
2月前
|
前端开发 JavaScript BI
Django教程第5章 | Web开发实战-数据统计图表(echarts、highchart)
使用echarts和highcharts图表库实现折线图、柱状图、饼图和数据集图
64 2
|
9月前
|
容器
layui框架实战案例(14):tabs选项卡切换时echarts拉伸变形无法正常显示的解决方案
layui框架实战案例(14):tabs选项卡切换时echarts拉伸变形无法正常显示的解决方案
96 0
|
9月前
|
定位技术 数据格式
Echarts实战案例代码(59):geomap实现飞线、散点、引导线以及重叠label的解决
Echarts实战案例代码(59):geomap实现飞线、散点、引导线以及重叠label的解决
304 0
|
2天前
|
JavaScript
echarts_自定义graph关系图
echarts_自定义graph关系图
9 0
36-Vue之ECharts高级-动画的使用
36-Vue之ECharts高级-动画的使用
|
9月前
|
前端开发 数据可视化 JavaScript
Python Flask Echarts数据可视化图表实战晋级笔记(4)ajax参数传递互动
Python Flask Echarts数据可视化图表实战晋级笔记(4)ajax参数传递互动
76 0
|
4月前
eCharts实现漏斗图
eCharts实现漏斗图
68 0
eCharts实现漏斗图
|
4月前
|
JSON 数据格式
echarts关系图
echarts关系图
39 0
|
5月前
Echarts饼图之-玫瑰图数据交互
Echarts饼图之-玫瑰图数据交互
37 0
|
5月前
|
JSON 数据格式
Echarts的饼状图变成环形图
Echarts的饼状图变成环形图
23 0