基于vue+echarts實現(xiàn)柱狀圖漸變色效果(每個柱子顏色不同)

更新時間：2024年05月13日 10:06:34 作者：小蹦跶兒

前段時間的vue項目中用到了echarts柱狀圖,由于UI設(shè)計稿中要求使用漸變色,并且每個柱子的顏色不同,于是做了一番研究,現(xiàn)將我的實現(xiàn)方案分享如下

一、需要實現(xiàn)的效果圖

二、背景

Echarts的柱狀圖，由于默認(rèn)所有柱子都是同一個顏色，且顏色為純色系，顯示效果不能滿足我們的設(shè)計稿要求，遂需要進(jìn)行改造。

本文介紹如何為每個柱子添加不同的顏色，以及如何添加漸變色，以豐富圖表的顯示效果。

除了顏色的問題，同時存在以下幾個小問題會一同解決：

多數(shù)值柱狀圖；
帶圓角的柱狀圖；

三、解決思路

這是一個集多數(shù)值的柱狀圖、每個柱子的顏色不同，且每個柱子都有自己的漸變色、帶圓角的柱狀圖于一體的柱狀圖，就需要考慮代碼的整潔性和復(fù)用性。

由于柱子的寬度和y軸坐標(biāo)值一樣，只是每個柱子的值、顏色、名稱不同，可以考慮將每個柱子的設(shè)置對象寫成公共方法，經(jīng)過傳值完成。

四、為每個柱子設(shè)置不同顏色，以及漸變色的設(shè)置

這個是在series中進(jìn)行設(shè)置的，series是個數(shù)組，我們有四個柱子表示四種數(shù)據(jù)，每個柱子對應(yīng)數(shù)組中的一個對象，即series數(shù)組中包含了四個對象：

series: [
  getBarSeriesData('telNoAnsweredCount'),
  getBarSeriesData('emptyCount'),
  getBarSeriesData('timeoutCount'),
  getBarSeriesData('joinEmptyCount')
]

備注：為了提高代碼的可讀性和可拓展性，減少冗余代碼，此處將數(shù)組中的對象提取成一個公共方法，根據(jù)參數(shù)不同，顯示不同數(shù)據(jù)。

首先將每個柱子的配置對象寫成公共方法：

下圖是該公共方法的代碼內(nèi)容截圖，主要是將漸變色的色值(color)、柱子名稱(name)和數(shù)據(jù)(data)寫成變量：

附上代碼如下：

function getBarSeriesData(target: keyof typeof propDict): SeriesOption {
  return {
    name: propDict[target].name,
    data: incomingCallTrendData.data.data[target],
    tooltip: {
      trigger: 'axis'
    },
    type: 'bar',
    barWidth: '6', // 柱子寬度可自定義
    roundCap: true,
    itemStyle: {
      borderRadius: [5, 5, 0, 0], // 帶圓角的柱子設(shè)置
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 0.95,
        colorStops: [
          {
            offset: 0,
            color: propDict[target].colorStart, // 0% 處的顏色
          },
          {
            offset: 1,
            color: propDict[target].colorStop, // 100% 處的顏色
          },
        ],
        global: false, // 缺省為 false
      },
    }
  }
}

將漸變色的顏色、柱子名稱(name)進(jìn)行自定義：

const propDict = {
  telNoAnsweredCount: {
    name: '客戶呼入隊列未接通數(shù)',
    index: 0,
    color: 'rgba(227, 103, 61, 1)',
    colorStart: 'rgba(227, 103, 61, 1)',
    colorStop: 'rgba(252, 70, 107, 1)'
  },
  emptyCount: {
    name: '排隊無可用坐席溢出數(shù)',
    index: 1,
    color: 'rgba(239, 217, 171, 1)',
    colorStart: 'rgba(239, 217, 171, 1)',
    colorStop: 'rgba(221, 145, 123, 1)'
  },
  timeoutCount: {
    name: '排隊超時溢出數(shù)',
    index: 2,
    color: 'rgba(2, 164, 255, 1)',
    colorStart: 'rgba(2, 164, 255, 1)',
    colorStop: 'rgba(5, 125, 210, 1)'
  },
  joinEmptyCount: {
    name: '進(jìn)隊列前無座席溢出數(shù)',
    index: 3,
    color: 'rgba(19, 251, 157, 1)',
    colorStart: 'rgba(250, 112, 170, 1)',
    colorStop: 'rgba(102, 27, 221, 1)'
  }
}