echarts 漸變色

image.png

image.png
const optionBarFarm = {
  tooltip: {
    trigger: 'axis',
    axisPointer: { // 坐標(biāo)軸指示器,坐標(biāo)軸觸發(fā)有效
      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],
    },
  ],
};
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容