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}`;}

结果展示：

echarts 自定义tooltip显示图例颜色相关推荐

echarts tooltips 自定义 formatter 显示图例颜色
我们在设置tooltips的自定义格式时一定会遇到这种情况: formatter 是一个函数时,这个函数的第一个参数有如下属性,并且由于tooltips是鼠标移动事件(本人猜测),每次移进去都会触发这 ...
echarts地图不显示图例
如果你的 echarts 地图不显示图例,可能是以下几个原因导致的: 没有启用图例.在配置项中,可以使用 legend.show 属性来控制是否显示图例.如果将其设置为 false,则不会显示图例. ...
Echarts中tooltip显示的数据与数据本身顺序相反
echarts中默认的tooltip和柱状图显示顺序相反,客户要求表盘,tooltip,图例显示顺序一致,也就是五线城市在tooltip和图例中都需要第一个显示: 解决方式: 修改tooltip的fo ...
echarts自定义tooltip
var option = {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow',label: {show: true}},formatter: ...
echarts图表中显示图例lengend
legend:{},series: [{name: '成交',type: 'line',data: [10, 12, 21, 54, 260, 830, 710]},{name: '预购',type: ...
echarts的tooltip显示百分号
需求:echarts图形的tooltip需要显示百分数,并要有颜色提示. 按官方文档,tooltip的formatter可以通过表达式设置百分号, formatter: '{b0}<br /&g ...
【echarts】 tooltip显示图片
tooltip: { trigger: 'item', borderRadius: 8,//边框圆角 backgroundColor: 'rgba(51,204,204,0.7)',//背景颜色(此时 ...
echars 饼图环形图组件修改自定义图例重新渲染显示对应颜色对应区域
如图产品有个需求是要做一个环形图点击图例显示具体数字但图例加起来是超过百分百的如图一个范围内有男有女有丑逼点击男的显示男的点击女的显示女的并且显示占总数的百分比并且鼠标悬浮上去显示的 ...
R语言ggplot2可视化：使用ggplot2按照热力图的方式显示全是分类变量的dataframe数据、并自定义因子（factor）的图例颜色legend
R语言ggplot2可视化:使用ggplot2按照热力图的方式显示全是分类变量的dataframe数据.并自定义因子(factor)的图例颜色legend(use heatmap to visuali ...

echarts 自定义tooltip显示图例颜色

echarts 自定义tooltip显示图例颜色相关推荐

最新文章

热门文章