300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > echarts 自定义tooltip显示图例颜色

echarts 自定义tooltip显示图例颜色

时间:2019-08-08 17:24:29

相关推荐

echarts 自定义tooltip显示图例颜色

技术框架:react

echarts默认的tooltip是自带图例颜色的,如下图:

可是很多时候,功能需求会要求提示框带单位或者调整样式。这个时候我们就需要用tooltip的formatter来自定义提示框内容。

点我跳转echarts tooltip自定义

可一旦用到formatter,图例颜色就会消失。如下图

如何设置呢?

上代码:

formatter(params) {let val0 = params[0]["value"];let val1 = params[1]["value"];let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`;let data0 = `${circle}rgba(82, 248, 215, 1)"></span> ${params[0]["seriesName"]}: ${val0}万元`;let data1 = `${circle}rgba(255, 71, 71, 1)"></span> ${params[1]["seriesName"]}: ${val1}万元`;return `${params[0].axisValueLabel}<br/>${data0}<br/>${data1}`;}

结果展示:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。