echart 柱状图渐变小demo

效果图：两跟状态图公用一个提示信息，在代码块中渐变效果被注释了

1. 定义一个可以供option 渲染的div

 <div ref="myChart_production_efficient" :style="'width:100%;height:'+templateHeight+'px;'" id="myChart_production_efficient"></div>

2.定义 option  ，将修改默认柱状图的样式、将setEchart放入method中，页面加载时执行， color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0,
                  [
                    { offset: 0, color: '#01516E' },
                    { offset: 0.5, color: '#188df0' },
                    { offset: 1, color: '#008CEB' }
                  ]
                )这一行代码如果单独执行会报错，要放在特点环境中，用于柱状图渐变效果

  SetEchart () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart_production"), 'chalk');
      // 绘制图表
      var option = {
        title: {
          text: '品牌当天生产效率',      //主标题
          textStyle: {
            color: '#01FCDE',        //颜色
            fontWeight: 'bold',    //粗细
            fontSize: 13,     //大小
            align: 'center'   //水平对齐
          },
          left: '0',
          top: 'auto',
          right: 'auto',
          bottom: '0',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        }, grid: {
          left: '3%',
          right: '3%',
          bottom: '15%',
          top: '10%',
          containLabel: true
        },
        xAxis: [
          {
            axisTick: {
              alignWithLabel: true
            },
            splitLine: { show: false },//去除网格线
            type: 'category',
            data: ['早', '中', '晚']
          }
        ],
        yAxis: [
          {
            splitLine: { show: false },//去除网格线
            type: 'value'
          }
        ],
        series: [
          {
            type: 'bar',
            barWidth: 15,//柱图宽度
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0,
                  [
                    { offset: 0, color: '#01516E' },
                    { offset: 0.5, color: '#00A4A3' },
                    { offset: 1, color: '#01FCDE' }
                  ]
                )
              }
            },
            data: [320, 332, 301]
          },
          {
            type: 'bar', barWidth: 15,//柱图宽度
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0,
                  [
                    { offset: 0, color: '#01516E' },
                    { offset: 0.5, color: '#188df0' },
                    { offset: 1, color: '#008CEB' }
                  ]
                )
              }
            },
            data: [220, 182, 191]
          }
        ]
      };
      myChart.setOption(option);
    },