关于 echarts 使用 geo 制作地图 tooltip 不显示问题

Posted zxr0

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于 echarts 使用 geo 制作地图 tooltip 不显示问题相关的知识,希望对你有一定的参考价值。

我之前遇到过这问题,单独设置 tooltip 没效果,geo 下面也有 tooltip 属性,但是也不管用,网上查了一下说 geo 不支持 tooltip 提示框显示,就自己根据 echarts 配置项试了试,弄出两种方法

第一种就是 tooltip 全局设置一个,geo 下面 tooltip 在设置一个,两个都设置才管用,单独设置没效果,

代码附上

const option = {

title: {

text: ""

 },

tooltip: {

trigger: "item",

show: true,

formatter: function(params) {

let city = params.name + "市";

let res = "";

sswlist.map(item => {

if (item.properties.name == city) {

res = item.properties.info;

 }

 });

return res;

 },

padding: 2,

textStyle: {

fontSize: 8,

lineHeight: 10,

align: "left"

 }

 },

geo: {

map: "yns",

zlevel: 10,

show: true,

layoutCenter: ["50%", "48%"],

roam: false,

layoutSize: "150%",

zoom: 1,

label: {

normal: {

show: true,

textStyle: {

fontSize: 12,

color: "#43D0D6"

 }

 }

 },

itemStyle: {

normal: {

color: "#062031",

borderWidth: 1.1,

borderColor: "#43D0D6"

 }

 },

emphasis: {

areaColor: "#FFB800",

label: {

show: false

 }

 },

tooltip: {

trigger: "item",

show: true,

formatter: function(params) {

let city = params.name + "市";

let res = "";

sswlist.map(item => {

if (item.properties.name == city) {

res = item.properties.info;

 }

 });

return res;

 },

padding: 2,

textStyle: {

fontSize: 8,

lineHeight: 10,

align: "left"

 }
第二种就是 label  通过更改 label 下的 formatter 属性来实现,formatter 和 tooltip 下的 formatterz 作用一样,如果想让鼠标点击或划过显示的话通过 emphasis 下的 label 实现例如:

emphasis:{
label:
{formatter:{}
}
}

以上是关于关于 echarts 使用 geo 制作地图 tooltip 不显示问题的主要内容,如果未能解决你的问题,请参考以下文章

ECharts地理坐标系属性介绍

Pyecharts绘制全球流向图

echarts geo世界地图,汉化之后部分国家名称显示的位置不对,这个该怎么调?

地图(用ECharts绘制)

基于VUE+TS中引用ECharts的中国地图和世界地图密度表

echarts使用本地json文件无法显示地图