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

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

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], // 带圆角的柱子设置
      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
      },
    }
  }
}

const propDict = {
  telNoAnsweredCount: {
    name: '客户呼入队列未接通数',
    index: 0,
    color: 'rgba(227, 103, 61, 1)',
    colorStart: 'rgba(227, 103, 61, 1)',
    colorStop: 'rgba(252, 70, 107, 1)'
  },
  emptyCount: {
    name: '排队无可用坐席溢出数',
    index: 1,
    color: 'rgba(239, 217, 171, 1)',
    colorStart: 'rgba(239, 217, 171, 1)',
    colorStop: 'rgba(221, 145, 123, 1)'
  },
  timeoutCount: {
    name: '排队超时溢出数',
    index: 2,
    color: 'rgba(2, 164, 255, 1)',
    colorStart: 'rgba(2, 164, 255, 1)',
    colorStop: 'rgba(5, 125, 210, 1)'
  },
  joinEmptyCount: {
    name: '进队列前无座席溢出数',
    index: 3,
    color: 'rgba(19, 251, 157, 1)',
    colorStart: 'rgba(250, 112, 170, 1)',
    colorStop: 'rgba(102, 27, 221, 1)'
  }
}