echarts地图不用鼠标事件一直显示
时间: 2023-08-11 19:18:59 浏览: 73
echarts 全国地图 点击地图上的点,打开超链接 地图点击事件
您可以在使用 ECharts 地图时,设置地图区域的高亮状态,以达到一直显示的效果,而不需要鼠标事件触发高亮状态。具体实现方法如下:
1. 在 ECharts 的 option 中,设置地图区域的高亮状态,例如:
```js
{
...
series: [{
type: 'map',
map: 'china',
...
itemStyle: {
normal: {
areaColor: '#eee',
borderColor: '#fff'
},
emphasis: {
areaColor: '#ccc',
borderColor: '#fff'
}
},
...
}]
...
}
```
其中,`itemStyle` 中的 `normal` 表示正常状态下的样式,`emphasis` 表示高亮状态下的样式。在上述代码中,正常状态下的区域颜色为 #eee,边框颜色为 #fff,高亮状态下的区域颜色为 #ccc,边框颜色为 #fff。
2. 设置地图区域的高亮状态为默认状态,例如:
```js
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: 0
});
```
其中,`seriesIndex` 表示系列的索引,`dataIndex` 表示数据项的索引。在上述代码中,设置了第一个系列的第一个数据项的高亮状态为默认状态。
3. 在 ECharts 的事件中,设置鼠标移入和移出事件,例如:
```js
myChart.on('mouseover', function (params) {
if (params.componentType === 'series' && params.seriesType === 'map') {
myChart.dispatchAction({
type: 'downplay',
seriesIndex: params.seriesIndex,
dataIndex: params.dataIndex
});
}
});
myChart.on('mouseout', function (params) {
if (params.componentType === 'series' && params.seriesType === 'map') {
myChart.dispatchAction({
type: 'highlight',
seriesIndex: params.seriesIndex,
dataIndex: params.dataIndex
});
}
});
```
在上述代码中,设置了鼠标移入和移出事件。当鼠标移入地图区域时,将该区域的高亮状态取消;当鼠标移出地图区域时,将该区域的高亮状态设置为默认状态。
通过以上步骤,就可以实现 ECharts 地图不需要鼠标事件一直显示的效果。
阅读全文