echarts 渐变色柱状图

import { useRem } from '@mo-yu/vue'
// 适配，可不需要
const { remToPx } = useRem()

export function getGradientBarOption(
  xData: string[],
  yData: number[],
  lableName: string
) {
  const options: EChartsOption = {
    grid: {
      left: '5%',
      right: '5%',
      bottom: '3%',
      top: '8%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: xData,
      boundaryGap: true,
      axisLabel: {
        color: '#D3DEEA',
        interval: 0,
        show: true,
        fontSize: remToPx(0.16)
      },
      splitLine: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#fff'
        }
      }
    },
    yAxis: [
      {
        axisLabel: {
          color: '#D3DEEA',
          interval: 0,
          show: true,
          fontSize: remToPx(0.16)
        },
        axisLine: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.1)'
          }
        }
      }
    ],
    series: [
      {
        data: yData,
        name: lableName,
        barMaxWidth: remToPx(0.2),
        type: 'bar',
        showBackground: false,
        itemStyle: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#00E6FF' },
            { offset: 0.1, color: 'rgba(10,151,173,0.2)' },
            { offset: 1, color: '#0A97AD' }
          ])
        },
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      }
    ],
    color: ['#9DA428']
  }
  return options
}