echarts柱状图渐变和柱图宽度

396 阅读1分钟

数据统计的界面,就是那种很多个统计图在一个界面显示,并且要做出十分炫酷的效果,必然会用到了渐变风格的设置属性。

柱图宽度

series: [
        {
          type: "bar",
          barWidth: 8, //柱图宽度
          data: [10, 20, 36, 41, 15, 26, 37, 18, 29],
        },
      ],

柱图渐变效果

横向

   series: [
          {
            name: "2011年",
            type: "bar",
            data: [1, 2, 3, 4, 5, 6, 7, 8, 9],
            itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: '#2034f9'
              }, {
                offset: 1,
                color: '#04a1ff'
              }]),
            }
          }
          },
        ],

纵向

   series: [
          {
            name: "2011年",
            type: "bar",
            data: [1, 2, 3, 4, 5, 6, 7, 8, 9],
            itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1 [{
                offset: 0,
                color: '#2034f9'
              }, {
                offset: 1,
                color: '#04a1ff'
              }]),
            }
          }
          },
        ],