echarts 渐变色

image.png
image.png

const optionBarFarm = {
  tooltip: {
    trigger: 'axis',
    axisPointer: { // 坐标轴指示器，坐标轴触发有效
      type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
    },
  },
  grid: {
    left: '2%',
    right: '4%',
    bottom: '6%',
    top: '16%',
    containLabel: true,
  },
  legend: {
    data: ['水稻', '稻鱼', '稻鸭'],
    right: 10,
    top: 12,
    textStyle: {
      color: '#fff',
      fontSize: fontSize(16),
    },
    itemWidth: 12,
    itemHeight: 10,
    // itemGap: 35
  },
  xAxis: {
    type: 'category',
    data: ['2020', '2021', '2022'],
    axisLine: {
      lineStyle: {
        color: 'white',
      },
    },
    axisLabel: {
      // interval: 0,
      // rotate: 40,
      fontFamily: 'Microsoft YaHei',
      fontSize: fontSize(16),
    },
  },

  yAxis: {
    type: 'value',
    //   max:'1200',
    axisLine: {
      show: false,
      lineStyle: {
        color: 'white',
      },
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgba(255,255,255,0.3)',
      },
    },
    axisLabel: {
      fontSize: fontSize(16),
    },
  },
  series: [
    {
      name: '水稻',
      type: 'bar',
      barWidth: '15%',
      stack: '水稻',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#4FACFE',
        }, {
          offset: 1,
          color: '#00F2FE',
        }]),
        borderRadius: [12, 12, 0, 0],
      },
      data: [1800, 3100, 4200],
    },
    {
      name: '稻鱼',
      type: 'bar',
      barWidth: '15%',
      stack: '稻鱼',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#C1FDC9',
        }, {
          offset: 1,
          color: '#57F5A1',
        }]),
        borderRadius: [12, 12, 0, 0],
      },
      data: [1900, 2000, 2600],
    },
    {
      name: '稻鸭',
      type: 'bar',
      barWidth: '15%',
      stack: '稻鸭',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#FFE8CE',
        }, {
          offset: 1,
          color: '#FBB8A0',
        }]),
        borderRadius: [12, 12, 0, 0],
      },
      data: [1200, 1900, 2500],
    },
    {
      name: '水稻',
      type: 'line',
      barWidth: '15%',
      stack: '水稻',
      itemStyle: {
        // normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#4FACFE',
        }, {
          offset: 1,
          color: '#00F2FE',
        }]),
        borderRadius: 12,
        // },
      },
      data: [1800, 3100, 4200],
    },
    {
      name: '稻鱼',
      type: 'line',
      barWidth: '15%',
      stack: '稻鱼',
      itemStyle: {
        // normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#C1FDC9',
        }, {
          offset: 1,
          color: '#57F5A1',
        }]),
        borderRadius: 11,
        // },

      },
      data: [1900, 2000, 2600],
    },
    {
      name: '稻鸭',
      type: 'line',
      barWidth: '15%',
      stack: '稻鸭',
      itemStyle: {
        // normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#FFE8CE',
        }, {
          offset: 1,
          color: '#FBB8A0',
        }]),
        borderRadius: 11,
        // },
      },
      data: [1200, 1900, 2500],
    },
  ],
};