(echarts)ECharts地图图表tooltip显示多条数据
冷链平台
效果:
测试数据:
data() {
return {
resdata: [
...
{
name: "江苏",
value: 1000,
value2: 700,
},
...
],
};
},
代码
//处理地图提示数据格式(重点1)
this.resdata = this.resdata.map((item) => {
let myCity = {};
myCity.name = item.name;
myCity.value = item.value;
myCity.value2 = item.value2;
return myCity;
});
//配置
let option = {
backgroundColor: "#0c1c30", // 图形容器背景色
tooltip: {
formatter(params, ticket, callback) {
let value = params.value;
let datas = option.series.data;
if (Array.isArray(value)) {
// 鼠标移到涟漪点上不显示浮层
return "";
}
if (value === undefined) {
// 鼠标移到路线上不显示浮层
return "";
}
if (isNaN(value)) {
value = 0;
}
let htmlStr = `
<div style='font-size:16px;'> ${params.name}</div>
<p style='text-align:left;margin-top:4px;'>
流入重量:${value}<br/>流出重量:${params["data"].value2} //重点2
</p>
`;
return htmlStr;
},
backgroundColor: "#ff7f50", //提示标签背景颜色
textStyle: { color: "#fff" }, //提示标签字体颜色
},
...
}
解决参考:https://www.cnblogs.com/wangqizhao/p/13253822.html
- 更新最优方法:不用处理也可实现,只需改变formatter格式就行,写法如下
formatter: function (params) {
// 显示模板
return [
params.name,
"流入重量:" + params.value,
"流出重量:" + params["data"].value2,
].join("<br>");
},