使用echarts在地图中使用dispatchAction
Posted 牧童遥指杏花村
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用echarts在地图中使用dispatchAction相关的知识，希望对你有一定的参考价值。
注意事项
1、必须使用goe渲染地图
2、同一个option只能存在一个series参数
3、tooltip提示框默认跟随series参数展示
4、通过地图区域的鼠标悬停事件，用dispatchAction触发城市锚点scatter对应的tooltip
5、dispatchAction的seriesIndex必须加上
代码如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../echarts-4.8.0/package/dist/echarts.js"></script> <script src="./黔西南布依族苗族自治州.js"></script> </head> <body> <div id="map" style="width: 500px;height: 500px;margin: 0 auto"></div> <script type="text/javascript"> // 城市的坐标 // yoy : year on year 同比 // mom: month on month 环比 const scatterData = [ { name: \'兴义市\', value: [104.897982, 25.088599], typeList: [{ type: \'数据\', yoy: \'14.8\', mom: \'-12.8\' }], }, { name: \'安龙县\', value: [105.471498, 25.108959], typeList: [{ type: \'数据\', yoy: \'14.8\', mom: \'-12.8\' }], }, { name: \'兴仁市\', value: [105.192778, 25.431378], typeList: [{ type: \'数据\', yoy: \'14.8\', mom: \'-12.8\' }], }, { name: \'普安县\', value: [104.955347, 25.786404], typeList: [{ type: \'数据\', yoy: \'14.8\', mom: \'-12.8\' }], }, { name: \'晴隆县\', value: [105.218773, 25.832881], typeList: [{ type: \'数据\', yoy: \'14.8\', mom: \'-12.8\' }], }, { name: \'贞丰县\', value: [105.650133, 25.385752], typeList: [{ type: \'数据\', yoy: \'14.8\', mom: \'-12.8\' }], }, { name: \'望谟县\', value: [106.091563, 25.166667], typeList: [{ type: \'数据\', yoy: \'14.8\', mom: \'-12.8\' }], }, { name: \'册亨县\', value: [105.81241, 24.983338], typeList: [{ type: \'数据\', yoy: \'14.8\', mom: \'-12.8\' }], }, ]; const option = { title: { text: \'黔西南州\', subtext: \'兴义市\', left: \'center\', }, tooltip: { backgroundColor: \'#fff\', trigger: \'item\', alwaysShowContent: true, triggerOn: \'mousemove\' , formatter: function(params) { let htmlStr = \'\'; params.data.typeList.forEach(item => { // 判断数值升降 let colorSpan = number => { let color = number > 0 ? \'#00cc99\' : \'#ff0000\'; return `<span style="color: ${color}">${number}%</span>`; }; htmlStr += ` <div> ${item.type}：同比 ${colorSpan(item.yoy)} 环比 ${colorSpan(item.mom)} </div> `; }); return `<div style="width: 300px; height: 100px; border-radius: 5px; color: #000; font-weight: 600;"> ${htmlStr} </div>`; }, }, geo: { map: \'黔西南州\', roam: false, zoom: 1.2, itemStyle: { normal: { borderWidth: 2, borderColor: \'#0090fe\', //边框颜色 areaColor: \'#003399\', //地图区域颜色 }, emphasis: { show: \'true\', borderWidth: 4, borderColor: \'#b2163c\', //边框颜色 areaColor: \'#531f67\', //鼠标移上去的颜色 }, }, label: { normal: { color: \'#fff\', fontWeight: \'bold\', show: true, }, emphasis: { color: \'#fff\', fontWeight: \'bold\', show: true, }, }, }, series:[ { type: \'scatter\', coordinateSystem: \'geo\', symbol: \'circle\' , symbolSize: 10 , color: "#00cc99", data: scatterData } ] }; echarts.registerMap("黔西南州", jsonGeo); let myChart = echarts.init(document.getElementById(\'map\')); myChart.setOption(option); myChart.on(\'mouseover\' , (params)=>{ myChart.dispatchAction({ type:\'showTip\',//默认显示江苏的提示框 seriesIndex: 0,//这行不能省 name: params.name }); }) </script> </body> </html>
Echarts地图使用经验-地图变形和添加数据
关于echart2,echart3地图的使用一点人生经验：
1.echart3，echart2加载地图变形修复。
最近在使用echart2使用过程中，发现加载海南地图会产生变形。如下图，海南地图产生了较大的变形，于是需要研究怎么才能消除变形。经过一番折腾，修改echart-all.js中_getTransform函数的
varxScale = width /mapWidth;
varyScale = height / mapHeight;
console.log(rate);
if(xScale > yScale) {
//xScale = yScale * rate;
xScale = yScale;
width = mapWidth * xScale;
}else{
yScale = xScale;
//xScale = yScale * rate;
height = mapHeight * yScale;
}这样地图就能不产生变形(echart3里添加这个aspectScale:1就能使地图不变形)
2.echart2中添加自定义geosjon(主要讲的是echart2，echart3里加载geojson已经比较方便)
同样是修改echart-all.js中代码加入如下代码，就能使用mapType为‘hainan‘的地图
‘hainan‘: {getGeoJson: (function() {
return function(callback) {$.getJSON(‘data/hn.geojson‘,callback);}
})()
},以上是关于使用echarts在地图中使用dispatchAction的主要内容，如果未能解决你的问题，请参考以下文章
vue中使用vue-echarts引入百度地图实现数据可视化