Echarts中柱状图渐变色-526互联

series绘制图表本身

name: '基站数目',
type: 'bar',：图表类型（柱状、折线…）
是否在柱形图上显示数字：label: { show: false, position: 'insideRight', ... }
设置柱状图宽度：barWidth
实现柱状体渐变色：
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
1, 0, 0, 0, // 表示从上到下
[
{offset: 1, color: '#33e7ff'},
{offset: 0, color: '#047fff'}
])
}},
1, 0, 0, 0 // 表示从上到下
0, 1, 0, 0 // 表示从下到上
0, 0, 1, 0 // 表示从左到右
0, 0, 0, 1 // 表示从右到左
删了上面的 itemStyle，柱状图就会自动读取 color，变为纯色图表

方式一：

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',
      color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
        {
          offset: 0,
          color: '#11d56d'
        },
        {
          offset: 1,
          color: '#83bff6'
        }
      ])
    }
  ]
};

方式二：

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',
      color: {
        type: 'linear',
        x: 0, //右
        y: 0, //下
        x2: 0, //左
        y2: 1, //上
        colorStops: [
          {
            offset: 0,
            color: '#11d56d' // 0% 处的颜色
          },
          {
            offset: 1,
            color: '#83bff6' // 100% 处的颜色
          }
        ]
      }
    }
  ]
};