(echarts)ECharts地图图表tooltip显示多条数据

(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>");
},