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!

相关文章
|
7月前
|
前端开发 JavaScript BI
Django教程第5章 | Web开发实战-数据统计图表(echarts、highchart)
使用echarts和highcharts图表库实现折线图、柱状图、饼图和数据集图
175 2
|
2月前
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
677 0
|
7月前
|
JavaScript
echarts_自定义graph关系图
echarts_自定义graph关系图
150 0
echarts迁徙图
前段时间在echarts社区,看见别人写的echarts迁徙图,学习并也写了一个
|
6月前
|
JavaScript 前端开发 数据可视化
ECharts 雷达图案例001-自定义节点动画
使用ECharts创建自定义雷达图,通过JavaScript动态更新高亮和交互反馈,增强用户体验。关键步骤包括:开启动画效果,数据更新时保持图表状态,鼠标悬浮时动态高亮指标,优化动画性能。案例展示了ECharts在数据可视化中的灵活性和表现力。[查看完整案例](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89454380)。
281 0
|
6月前
|
数据可视化 黑灰产治理
📊 ECharts 雷达图案例002 - 诈骗性质分析
**ECharts 案例展示了诈骗性质的雷达图分析,以创新可视化揭示诈骗模式。定制化雷达图配色鲜明,多维度剖析不同诈骗手段,如网络刷单、冒充公检法。交互式设计允许用户深入探究细节。[点击这里](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89454384)查看完整案例。#ECharts #数据可视化 #雷达图 #诈骗分析**
68 0
📊 ECharts 雷达图案例002 - 诈骗性质分析
|
5月前
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
489 0
|
7月前
eCharts实现漏斗图
eCharts实现漏斗图
227 0
eCharts实现漏斗图
|
JSON 数据格式
echarts关系图
echarts关系图
82 0