使用echarts在地图中使用dispatchAction

2021-10-11 10:00:07 阅读：183 来源： 互联网

标签：name typeList dispatchAction mom 使用 12.8 type echarts yoy

注意事项

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>

标签：name,typeList,dispatchAction,mom,使用,12.8,type,echarts,yoy
来源： https://www.cnblogs.com/onesea/p/15392009.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

使用echarts在地图中使用dispatchAction