Echarts 地图(map)插件之 鼠标HOVER和tooltip自定义数据
时间: 2023-08-05 12:08:50 浏览: 99
echarts自作地图显示散点图 tooltip自定义内容
好的,关于 Echarts 地图插件的鼠标hover和tooltip自定义数据,您可以参考以下示例代码:
```
// 定义数据
var data = [
{name: '北京', value: 100},
{name: '上海', value: 50},
{name: '广州', value: 80},
{name: '深圳', value: 70},
{name: '重庆', value: 60},
];
// 配置项
var option = {
tooltip: {
// 自定义 tooltip 显示内容
formatter: function(params) {
return '城市:' + params.name + '<br>数值:' + params.value;
}
},
series: [
{
type: 'map',
mapType: 'china',
roam: true,
itemStyle: {
normal: {
label: {
show: true
}
},
emphasis: {
label: {
show: true
}
}
},
// 自定义地图数据
data: data
}
]
};
// 使用 echarts 绘制地图
var myChart = echarts.init(document.getElementById('map'));
myChart.setOption(option);
```
以上代码中,我们通过 `formatter` 属性来自定义 tooltip 显示内容,使用 `<br>` 标签进行换行。而 `data` 数组则是我们自定义的地图数据,包含了每个城市的名称和数值。最后,我们使用 `echarts.init()` 方法来初始化 echarts 实例,并通过 `setOption()` 方法来设置配置项和数据,从而绘制出地图。
希望这个例子对您有所帮助,如果有其他问题,欢迎继续提问。
阅读全文