echarts tooltips 自定义 formatter 显示图例颜色

我们在设置tooltips的自定义格式时一定会遇到这种情况：

formatter 是一个函数时，这个函数的第一个参数有如下属性，并且由于tooltips是鼠标移动事件（本人猜测），每次移进去都会触发这个函数，我们可以打印出来：

由于我设置的是多折线图所以是一个数组

并且据我观察这个formatter本质是一个html模板字符串

现在就只要把这个color属性拼接在formatter字符串里面就成了

代码如下：

formatter: function(params) {let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`;const result = title? params[0].name +'<br />' +circle +params[0].color +`"></span>` +title +': ' +params[0].value: circle + params[0].color + `"></span>` + params[0].name + ': ' + params[0].value;// const result = (title ? title + '<br />' : '') + params[0].name + ': ' + params[0].value;return result;},

这个title是我从initchart函数里面引进来的，不用管

最终效果如下：

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

echarts 自定义tooltip显示图例颜色
技术框架:react echarts默认的tooltip是自带图例颜色的,如下图: 可是很多时候,功能需求会要求提示框带单位或者调整样式.这个时候我们就需要用tooltip的formatter来自定义 ...
echarts地图设置legend_echarts设置图例颜色和地图底色的方法实例
导读热词前言本来想写echarts初始化函数的,但最近因为要写一个地图与柱状图的混合方式,也就是每个省的地图上要有柱状图显示.于是仔细使用了一下地图. 1.地图的一些基本属性就不介绍了,还是那些s ...
echars 饼图环形图组件修改自定义图例重新渲染显示对应颜色对应区域
如图产品有个需求是要做一个环形图点击图例显示具体数字但图例加起来是超过百分百的如图一个范围内有男有女有丑逼点击男的显示男的点击女的显示女的并且显示占总数的百分比并且鼠标悬浮上去显示的 ...
R语言ggplot2可视化：使用ggplot2按照热力图的方式显示全是分类变量的dataframe数据、并自定义因子（factor）的图例颜色legend
R语言ggplot2可视化:使用ggplot2按照热力图的方式显示全是分类变量的dataframe数据.并自定义因子(factor)的图例颜色legend(use heatmap to visuali ...
echarts 柱状图不显示y坐标轴_Python+matplotlib自定义坐标轴位置、颜色、箭头
图书推荐: <Python程序设计基础与应用>(ISBN:9787111606178),董付国,机械工业出版社图书详情: 用书教师可以联系董老师获取教学大纲.课件.源码.教案.考试系统等 ...
Echarts地图自定义图标Symbol同时动态更改图标进行切换显示
Echarts地图自定义图标Symbol同时动态更改图标进行切换显示文章目录 0.前言 1.引用模块 2.界面设计 3.数据准备 4.实例地图 5.动态修改气泡图标 6.结束语 0.前言实现的效果 ...
echarts柱状图自定义显示内容
echarts柱状图自定义显示内容基础搭建基础搭建 1.引入js <script src="js/echarts.min.js"></script> 2 ...
echarts 实现横坐标只显示第一个和最后一个自定义的内容
echarts 实现横坐标只显示第一个和最后一个自定义的内容要实现横坐标的修改则可以找到 xAxis->axisLabel xAxis:[{axisLabel:{show:true,forma ...
echarts图例颜色与地图底色
本来想写echarts初始化函数的,但最近因为要写一个地图与柱状图的混合方式,也就是每个省的地图上要有柱状图显示.于是仔细使用了一下地图. 1.地图的一些基本属性就不介绍了,还是那些style 2.地 ...

echarts tooltips 自定义 formatter 显示图例颜色

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

最新文章

热门文章