echarts.tooltip提示框示例

最新推荐文章于 2024-09-20 15:52:37 发布

汪酱～

最新推荐文章于 2024-09-20 15:52:37 发布

阅读量310

点赞数

文章标签： echarts vue

本文链接：https://blog.csdn.net/qq_44768564/article/details/113520061

版权

最近项目用到了echarts,做一下简单总结，主要是提示框tooltip中的formatter用法：
在这里插入图片描述
主要配置代码：

option: {
	grid: { 	//图表间距配置
	  left: "0",
	  right: "10",
	  top: "8%",
	  bottom: "10%",
	  containLabel: true,
	},
	tooltip: { //提示框，可更改样式和所要提示的信息
	  trigger: "axis",
	  formatter: (params) => {
	    console.log('formatter~~params',params)
	    let res = `${
	      params[0] ? params[0].name : 0
	    }<br>`;
	    for (let i = 1; i < params.length; i++) {
	      res += `${params[i].seriesName}：<span style="font-weight: 600;color:#42505C">${params[i].value}</span><br/>`;
	    }
	    return res;
	  },
	  textStyle: {
	    color: "#79828b",
	    fontSize: "12px",
	  },
	  axisPointer: {
	    color: "#0FA0F8",
	  },
	  padding: 9,
	  borderColor: "#E7B962",
	  borderRadius: 8,
	  borderWidth: 1,
	  backgroundColor: "#fff",
	},
}