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);
    },