echarts 在vue中配置漸變折線圖

效果圖

直接上代碼

option = {
          title: {
            text: '平臺收入統計',
            x: 'center',//水平安放位置，默認爲'left'，可選爲：'center' | 'left' | 'right' | {number}（x座標，單位px）
            textAlign: "center",//水平對齊方式，默認根據x設置自動調整，可選爲： left' | 'right' | 'center
            textStyle: {
              //主標題文本樣式
              fontSize: 16,
              fontStyle: 'normal',
              fontWeight: 'normal',
              color: "#333333"
            },
          },
          tooltip: {
            trigger: 'axis',
            showContent: false
          },
          xAxis: {
            type: 'category',
            scale: true,
            axisTick: {       //x軸刻度線是否顯示
              show: false
            },
            axisLine: {
              lineStyle: {
                // 設置x軸顏色
                color: '#666666',
                width: 0, //x軸 是否顯示
                type: 'dotted', //'dotted'虛線 'solid'實線
              }
            },
            // 設置X軸數據旋轉傾斜
            boundaryGap: true,
            data:["19-05","19-08"] //日期數據源
          },
          yAxis: {
            type: 'value',
            axisTick: {       //y軸刻度線是否顯示
              show: false
            },
            axisLine: {
              lineStyle: {
                // 設置y軸顏色
                color: '#666666',
                width: 0, //y軸 是否顯示
              }
            },
          },
          //邊距調整
          grid: {
            x: 40,
            x2: 20,
            y: 12,
          },
          series: [{
            data: [12,123], //總數數據源,
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            // 設置折線上圓點大小
            symbolSize: 8,
            areaStyle: {  //覆蓋區域的漸變色
              normal: {
                // color: '#091e3b', //改變區域顏色
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0, color: '#0F89D7' // 0% 處的顏色
                  }, {
                    offset: 0.5, color: '#29BFF7' // 100% 處的顏色
                  }, {
                    offset: 1, color: '#fff' // 100% 處的顏色
                  }]
                ),  //背景漸變色
              }
            },
            itemStyle: {
              normal: {
                // 拐點上顯示數值
                label: {
                  show: true
                },
                borderColor: '#0FA8E1', // 拐點邊框顏色
                color: "#0FA8E1",
                lineStyle: {
                  width: 3, // 設置線寬
                  type: 'solid' //'dotted'虛線 'solid'實線
                }
              }
            }
          }],
        };