Echarts柱状图渐变两种实现方式

效果展示

两种写法

方法一：color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{}，{}，{}])
方法二：避开new echarts，color: {x: 0, y: 0, x2: 0, y2: 1,colorStops: [{}，{}，{}]}

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        // 背景色
        color: 'rgba(180, 180, 180, 0.2)'
      },
      itemStyle: {  // 使用方法二的写法
        color: {
          type: 'linear',
          x: 0,  //右
          y: 0,  //下
          x2: 0,  //左
          y2: 1,  //上
          colorStops: [
            {
              offset: 0,
              color: 'pink' // 0% 处的颜色
            },
            {
              offset: 0.7,
              color: '#2378f7' // 70% 处的颜色
            },
            {
              offset: 1,
              color: '#83bff6' // 100% 处的颜色
            }
          ]
        }
      },
      emphasis: { // 选中时的颜色
        itemStyle: { // 使用方法一的写法
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'purple' },
            { offset: 0.7, color: '#2378f7' },
            { offset: 1, color: '#83bff6' }
          ])
        }
      }
    }
  ]
};

这篇好文章是转载于：学新通技术网