echarts.tooltip提示框示例

亦凉 2022-10-26 01:25 292阅读 0赞

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

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",
    	},
    }

在控制台打印params参数如下图所示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70 1]

参考：[echarts官网tooltip.formatter具体用法][echarts_tooltip.formatter]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70]: /images/20221024/0b133ee0e9b54bb3a805f5198a78afd3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70 1]: /images/20221024/96a9cd4aa9a141b3ab8948593ebd5eed.png
[echarts_tooltip.formatter]: https://echarts.apache.org/zh/option.html#tooltip.formatter