Vue中使用Echarts地图实现某省市区县地图的展示功能 |
您所在的位置：网站首页 › 常州区县图 › Vue中使用Echarts地图实现某省市区县地图的展示功能 |
Vue中使用Echarts地图实现某省市区县地图的展示功能
|
在移动中台运营指标分析-大屏 和 开发点赞民警应用开发的过程中，需要展示某市的区县地图。通过这个两个项目开发应用实践和不断研究。 效果图展示：
大致总结了一下实现的方法步骤： 1、通过阿里云数据可视化平台选择需要展示的区域范围（阿里云数据可视化平台网址：）或者自己从https://datav.aliyun.com/portal/school/atlas/area_selector选择下载所需要区域的geoJson文件。 2、在Vue项目中安装echarts依赖（npm i echarts -S） 3、导入echarts（import echarts from 'echarts'） 4、在页面内定一个标签来渲染地图 5、初始化 echarts 实例和指定配置参数，般是在mounted生命周期函数中进行初始化地图表格数据的。 注意：series配置项中的data中的数据，name如果想要能正常匹配上地图上的地区名，那么就最好使用name属性名；visualMap配置项中的pieces中的value值，如果只需要相等的情况渲染对应数值区域的颜色，那么就需要规定属性名为value，然后series配置项中的data中的数据也是要定义数据属性名为value。 地图模块代码，仅供参考： getEchartMap(){ $.get("https://geo.datav.aliyun.com/areas_v3/bound/370800_full.json", function(geoJson) { echarts.registerMap("ISD", geoJson); var chart = echarts.init(document.getElementById("echartMap")); chart.setOption({ title: { text: '各区县用户总数及排名', left: 'left', padding:[10,0,10,30], textStyle: { color: '#fff', fontSize: 24, }, }, tooltip: { trigger: 'item', position: 'top', formatter: '{b}{c}', }, visualMap: { type: "continuous", // min: 800, // max:10000, // text: ["High", "Low"], realtime: false, calculable: true, borderColor:"#5376B4", //边框颜色 borderWidth:3, inRange: { color: ['#244790'] }, show: false, }, series: [ { type: "map", mapType: "ISD", top:"14%", roam: false,//禁止缩放 label: { normal: { show: true, color: "#fff" }, emphasis: { show: true } }, itemStyle: { emphasis: { label: { show: true } } }, data: [ {value: 30, name: '邹城市',}, {value: 80, name: '曲阜市',}, {value: 50, name: '梁山县',}, {value: 44, name: '泗水县'}, {value: 30, name: '汶上县'}, {value: 48, name: '嘉祥县'}, {value: 75, name: '金乡县'}, {value: 80, name: '鱼台县'}, {value: 84, name: '微山县'}, {value: 30, name: '兖州区'}, {value: 30, name: '任城区'}, ] } ] }); var flag = true; // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消 var _this = this; var index= 0; // 鼠标移动上去的时候的高亮动画 chart.on("mouseover", function(param) { flag = false; clearInterval(_this.startCharts); //取消之前高亮图形 chart.dispatchAction({ type: "downplay", seriesIndex: 0, dataIndex: index }); index= param.dataIndex //**解决文章所述问题**// //记录上一次选中值重新进入时取消高亮 //高亮当前图形 chart.dispatchAction({ type: "highlight", seriesIndex: 0, dataIndex: param.dataIndex }); //显示tooltip chart.dispatchAction({ type: "showTip", seriesIndex: 0, dataIndex: param.dataIndex }); }); //图标随窗口大小缩放 window.addEventListener("resize", function() { chart.resize(); }); //自动高亮显示 var chartHover = function() { var dataLen = option.series[0].data.length; // 取消之前高亮的图形 chart.dispatchAction({ type: "downplay", seriesIndex: 0, dataIndex: index }); index= (index+ 1) % dataLen; // 高亮当前图形 chart.dispatchAction({ type: "highlight", seriesIndex: 0, dataIndex: index }); // 显示 tooltip chart.dispatchAction({ type: "showTip", seriesIndex: 0, dataIndex: index }); }; _this.startCharts = setInterval(chartHover, 5000); // 4、鼠标移出之后，恢复自动高亮 chart.on("mouseout", function(param) { if (!flag) { _this.startCharts = setInterval(chartHover, 5000); flag = true; } }); }); }, |
【本文地址】
今日新闻 |
推荐新闻 |