基于vue+echarts实现柱状图渐变色效果(每个柱子颜色不同)

月英

一、需要实现的效果图

二、背景

1. Echarts

复制代码

的柱状图，由于默认所有柱子都是同一个颜色，且颜色为纯色系，显示效果不能满足我们的设计稿要求，遂需要进行改造。
本文介绍如何为每个柱子添加不同的颜色，以及如何添加渐变色，以丰富图表的显示效果。

1. 除了颜色的问题，同时存在以下几个小问题会一同解决：
   
2. <ul><li>多数值柱状图；</li><li>带圆角的柱状图；</li></ul>

复制代码

三、解决思路

这是一个集多数值的柱状图、每个柱子的颜色不同，且每个柱子都有自己的渐变色、带圆角的柱状图于一体的柱状图，就需要考虑代码的整洁性和复用性。
由于柱子的宽度和

1. y

复制代码

轴坐标值一样，只是每个柱子的值、颜色、名称不同，可以考虑将每个柱子的设置对象写成公共方法，经过传值完成。

四、为每个柱子设置不同颜色，以及渐变色的设置

这个是在

1. series

复制代码

中进行设置的，

1. series

复制代码

是个数组，我们有四个柱子表示四种数据，每个柱子对应数组中的一个对象，即

1. series

复制代码

数组中包含了四个对象：

1. series: [
   
2.   getBarSeriesData('telNoAnsweredCount'),
   
3.   getBarSeriesData('emptyCount'),
   
4.   getBarSeriesData('timeoutCount'),
   
5.   getBarSeriesData('joinEmptyCount')
   
6. ]

复制代码

1. 备注：为了提高代码的可读性和可拓展性，减少冗余代码，此处将数组中的对象提取成一个公共方法，根据参数不同，显示不同数据。

复制代码

• 首先将每个柱子的配置对象写成公共方法：
  

下图是该公共方法的代码内容截图，主要是将渐变色的色值(

1. color

复制代码

)、柱子名称(

1. name

复制代码

)和数据(

1. data

复制代码

)写成变量：

附上代码如下：

1. function getBarSeriesData(target: keyof typeof propDict): SeriesOption {
   
2.   return {
   
3.     name: propDict[target].name,
   
4.     data: incomingCallTrendData.data.data[target],
   
5.     tooltip: {
   
6.       trigger: 'axis'
   
7.     },
   
8.     type: 'bar',
   
9.     barWidth: '6', // 柱子宽度可自定义
   
10.     roundCap: true,
    
11.     itemStyle: {
    
12.       borderRadius: [5, 5, 0, 0], // 带圆角的柱子设置
    
13.       color: {
    
14.         type: 'linear',
    
15.         x: 0,
    
16.         y: 0,
    
17.         x2: 0,
    
18.         y2: 0.95,
    
19.         colorStops: [
    
20.           {
    
21.             offset: 0,
    
22.             color: propDict[target].colorStart, // 0% 处的颜色
    
23.           },
    
24.           {
    
25.             offset: 1,
    
26.             color: propDict[target].colorStop, // 100% 处的颜色
    
27.           },
    
28.         ],
    
29.         global: false, // 缺省为 false
    
30.       },
    
31.     }
    
32.   }
    
33. }

复制代码

• 将渐变色的颜色、柱子名称(
  1. name

  复制代码
  )进行自定义：
  

1. const propDict = {
   
2.   telNoAnsweredCount: {
   
3.     name: '客户呼入队列未接通数',
   
4.     index: 0,
   
5.     color: 'rgba(227, 103, 61, 1)',
   
6.     colorStart: 'rgba(227, 103, 61, 1)',
   
7.     colorStop: 'rgba(252, 70, 107, 1)'
   
8.   },
   
9.   emptyCount: {
   
10.     name: '排队无可用坐席溢出数',
    
11.     index: 1,
    
12.     color: 'rgba(239, 217, 171, 1)',
    
13.     colorStart: 'rgba(239, 217, 171, 1)',
    
14.     colorStop: 'rgba(221, 145, 123, 1)'
    
15.   },
    
16.   timeoutCount: {
    
17.     name: '排队超时溢出数',
    
18.     index: 2,
    
19.     color: 'rgba(2, 164, 255, 1)',
    
20.     colorStart: 'rgba(2, 164, 255, 1)',
    
21.     colorStop: 'rgba(5, 125, 210, 1)'
    
22.   },
    
23.   joinEmptyCount: {
    
24.     name: '进队列前无座席溢出数',
    
25.     index: 3,
    
26.     color: 'rgba(19, 251, 157, 1)',
    
27.     colorStart: 'rgba(250, 112, 170, 1)',
    
28.     colorStop: 'rgba(102, 27, 221, 1)'
    
29.   }
    
30. }

复制代码

• 最后，在
  1. series

  复制代码
  中进行调用即可。这样不仅柱子是渐变色，而且每个图例也会自动变成渐变色。
  

1. 在series数组中的四个对象，就解决了多数值柱子的问题。相信看的仔细的同学也发现了柱子带圆角的设置位置（borderRadius: [5, 5, 0, 0], // 带圆角的柱子设置）。

复制代码

五、总结

到此这篇关于基于vue+echarts实现柱状图渐变色效果(每个柱子颜色不同)的文章就介绍到这了,更多相关vue+echarts柱状图渐变色内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/3210242xy.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！