echarts-折線圖-漸變陰影

效果圖：

 

 

  <div style="width: 462px; height: 180px" id="indexLeftbottom"></div>

 

// 自適應字體大小變化
    WidthAdaptive(res) {
      var windth = window.innerWidth;
      let fontSize = windth / 1920;
      return fontSize * res;
    },
    drawLine() {
      // 基於准備好的dom，初始化echarts實例
      let myChart = this.$echarts.init(
        document.getElementById("indexLeftbottom")
      );
      let xLabel = [
        "08/02",
        "08/03",
        "08/04",
        "08/05",
        "08/06",
        "08/07",
        "08/08",
      ];
      let goOutSchool = ["300", "1250", "602", "365", "1330", "610", "300"];

      let option = {
        backgroundColor: "transparent",
        grid: {
          top: "15%",
          left: "15%",
          right: "10%",
          bottom: "20%",
          // containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: {
              //坐標軸軸線相關設置。數學上的x軸
              show: true,
              lineStyle: {
                color: "#8C9493",
              },
            },
            axisLabel: {
              //坐標軸刻度標簽的相關設置
              textStyle: {
                color: "rgba(255, 255, 255, 0.8)",
                padding: this.WidthAdaptive(2),
              },
              formatter: function (data) {
                return data;
              },
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "#192a44",
              },
            },
            axisTick: {
              show: false,
            },
            data: xLabel,
          },
        ],
        yAxis: [
          {
            name: "單位(Kw-H)",
            nameTextStyle: {
              color: " rgba(255, 255, 255, 0.6)",
              fontSize: this.WidthAdaptive(10),
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "rgba(112,112,112,0.5)",
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#8C9493",
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "rgba(255, 255, 255, 0.8)",
                padding: this.WidthAdaptive(2),
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "放學",
            type: "line",
            symbol: "circle", // 默認是空心圓（中間是白色的），改成實心圓
            showAllSymbol: true,
            symbolSize: 0,
            smooth: true,
            lineStyle: {
              normal: {
                width: this.WidthAdaptive(3),
                color: "rgba(24,187,157,1)", // 線條顏色
              },
              borderColor: "rgba(0,0,0,.4)",
            },
            itemStyle: {
              color: "rgba(24,187,157,1)",
              borderColor: "#646ace",
              borderWidth: this.WidthAdaptive(20),
            },
            tooltip: {
              show: true,
            },
            areaStyle: {
              //區域填充樣式
              normal: {
                //線性漸變，前4個參數分別是x0,y0,x2,y2(范圍0~1);相當於圖形包圍盒中的百分比。如果最后一個參數是‘true’，則該四個值是絕對像素位置。
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(24,187,157,.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(24,187,157, 0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(10,219,250, 0.5)", //陰影顏色
                shadowBlur: this.WidthAdaptive(20), //shadowBlur設圖形陰影的模糊大小。配合shadowColor,shadowOffsetX/Y, 設置圖形的陰影效果。
              },
            },
            data: goOutSchool,
          },
        ],
      };
      window.onresize = function () {
        myChart.resize();
      };
      myChart.setOption(option);
    },