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

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

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

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

二、背景

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

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

除了顏色的問(wèn)題，同時(shí)存在以下幾個(gè)小問(wèn)題會(huì)一同解決：

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

三、解決思路

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

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

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

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

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

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

首先將每個(gè)柱子的配置對(duì)象寫(xiě)成公共方法：

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

附上代碼如下：

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: '客戶呼入隊(duì)列未接通數(shù)',
    index: 0,
    color: 'rgba(227, 103, 61, 1)',
    colorStart: 'rgba(227, 103, 61, 1)',
    colorStop: 'rgba(252, 70, 107, 1)'
  },
  emptyCount: {
    name: '排隊(duì)無(wú)可用坐席溢出數(shù)',
    index: 1,
    color: 'rgba(239, 217, 171, 1)',
    colorStart: 'rgba(239, 217, 171, 1)',
    colorStop: 'rgba(221, 145, 123, 1)'
  },
  timeoutCount: {
    name: '排隊(duì)超時(shí)溢出數(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)隊(duì)列前無(wú)座席溢出數(shù)',
    index: 3,
    color: 'rgba(19, 251, 157, 1)',
    colorStart: 'rgba(250, 112, 170, 1)',
    colorStop: 'rgba(102, 27, 221, 1)'
  }
}

最后，在series中進(jìn)行調(diào)用即可。這樣不僅柱子是漸變色，而且每個(gè)圖例也會(huì)自動(dòng)變成漸變色。

在series數(shù)組中的四個(gè)對(duì)象，就解決了多數(shù)值柱子的問(wèn)題。相信看的仔細(xì)的同學(xué)也發(fā)現(xiàn)了柱子帶圓角的設(shè)置位置（borderRadius: [5, 5, 0, 0], // 帶圓角的柱子設(shè)置）。

五、總結(jié)

到此這篇關(guān)于基于vue+echarts實(shí)現(xiàn)柱狀圖漸變色效果(每個(gè)柱子顏色不同)的文章就介紹到這了,更多相關(guān)vue+echarts柱狀圖漸變色內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: