使用echarts在地圖中使用dispatchAction
阿新 • • 發佈:2021-10-11
注意事項
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>