echarts的tooltip展示自定义值

Posted 2023-04-18

参考技术A echarts经常需要展示自定义的数据，如下图所示，本来坐标数据是日期和百分比，但是要求折线图的tooltip却要展示具体数据，展示结果如下

解决方法

1.组件引用

2.数据拼凑

3.改写组件

这一步中通过获取传入得key值即可，

echart使用自定义单个柱状颜色实现

项目实践中遇到一个根据需要，当X轴等于某个值是，柱状变成特殊颜色的需求，大致有两个方案实现：

1、在前台遍历数据对象，判断设置；

2、在后台拼装数据是，按照格式要求拼装好；

具体代码如下：

方法一：

option = {
? ? title: {
? ? ? ? text: 'ECharts 示例'
? ? },
? ? tooltip: {},
? ? legend: {
? ? ? ? data:['销量']
? ? },
? ? xAxis: {
? ? ? ? data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
? ? ? ? axisLabel: {color: 'green'}
? ? },
? ? yAxis: {},
? ? series: [{
? ? ? ? name: '销量',
? ? ? ? type: 'bar',
? ? ? ? data: [5, 20, 36, 10, 10, 20],
? ? ? ? itemStyle: {
? ? ? ? ? ? color: function(params){
? ? ? ? ? ? ? ? var c ='';
? ? ? ? ? ? ? ? if(params.value>20){
? ? ? ? ? ? ? ? ? ? c='red'
? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? c='green'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? return c;
? ? ? ? ? ? }
? ? ? ? }
? ? }]
};

方法二：

option = {
? ? title: {
? ? ? ? text: 'ECharts 示例'
? ? },
? ? tooltip: {},
? ? legend: {
? ? ? ? data:['销量']
? ? },
? ? xAxis: {
? ? ? ? data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
? ? ? ? axisLabel: {color: 'green'}
? ? },
? ? yAxis: {},
? ? series: [{
? ? ? ? name: '销量',
? ? ? ? type: 'bar',
? ? ? ? data: [5, 20, {
? ? ? ? ? ? value:'35',
? ? ? ? ? ? itemStyle: {
? ? ? ? ? ? ? ? color: 'orange'
? ? ? ? ? ? }
? ? ? ? }, 10, 10, 20]
? ? }]
};

也可以二者结合使用，实现自己的特殊需求，如果让后台实现则按照这个格式拼装数据返回到前台即可。希望对有类似需求的小伙伴，有所帮助。

原文地址：https://segmentfault.com/a/1190000016722330