關於 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:{}
}
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM