echarts 提示框-echarts自定义tooltip提示框内容

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

更改tooltip提示框的内容

1.第一个是默认的提示信息

触发器为触发形式，将物品放置在对应的地图上即可触发对应的提示框

默认状态下echarts 提示框，由于前端数据的原因，提示框的内容没有单位

2. 解决方案

在工具提示中添加格式化程序属性

params 是格式化程序所需的数据集。 官方解释如下：

一般来说echarts 提示框，复制params并选择你需要结束的值。

3. 对应代码

		tooltip: {
			trigger: 'item',
			formatter: function(params) {
				// console.log(params);
				var htmlStr = '';
				var color = params.color; //图例颜色
				var seriesName = params.seriesName; //图例名称
				var xName = params.name; //x轴的名称
				var value = params.value; //y轴值
				var htmlStr = '<div>';
				htmlStr += seriesName + '<br/>';
				htmlStr +=
					'<span style="margin-right: 5px; font-size: 16pt; font-family: Consolas;display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color:' +
					color + ' ;"></span>';
				htmlStr += "<span style='min-height: 20pt; font-size: 10pt'>";
				htmlStr += xName + '年';
				htmlStr += '</span>';
				htmlStr += "<span style='min-height: 20pt; font-size: 10pt; margin-left: 20px'>";
				// console.log(params.data.length);
				if (!value.length) {
					htmlStr += value + '%';
				} else {
					htmlStr += value[params.seriesIndex + 1] + '万元';//选择对应value的坐标
				}
				htmlStr += '</span>'
				htmlStr += '</div>';
				return htmlStr;
			}
		},

4、结果：添加单元成功

（菜鸟上路，有错误请见谅）