echarts-折線圖-帶陰影

效果圖：

 

 

  <div style="width: 462px; height: 220px" id="zhexiantu"></div>

 

// 自適應字體大小變化
    WidthAdaptive(res) {
      var windth = window.innerWidth;
      let fontSize = windth / 1920;
      return fontSize * res;
    },
    drawLine() {
      // 基於准備好的dom，初始化echarts實例
      let myChart = this.$echarts.init(document.getElementById("zhexiantu"));

      let option = {
        backgroundColor: "transparent",
        color: ["#FFDD01"],

        grid: {
          left: "4%",
          right: "5%",
          top: "20%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: {
          axisTick: { show: false },
          boundaryGap: false,
          axisLabel: {
            margin: 10,

            textStyle: { color: "#CCCCCC", fontSize: this.WidthAdaptive(14) },
          },
          axisLine: {
            // onZero: false, // X軸脫離Y軸0刻度
            lineStyle: { color: "#cccccc", type: "solid" },
          },

          data: ["3月", "4月", "5月", "6月", "7月", "8月"],
          //   data: ["2018年", "2019年", "2020年", "2021年", "2022年", "2023年"],
        },
        yAxis: {
          name: "單位:億元",
          nameTextStyle: {
            color: "#CCCCCC",
            fontSize: this.WidthAdaptive(12),
            padding: this.WidthAdaptive(8),
          },
          axisTick: { show: false },
          axisLabel: {
            margin: this.WidthAdaptive(10),
            textStyle: { color: "#CCCCCC", fontSize: this.WidthAdaptive(12) },
          },
          axisLine: {
            show: false,
            lineStyle: { color: "#cccccc", type: "solid" },
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "rgba(135,140,147,0.2)",
            },
          },
          boundaryGap: [0, 0.1],
        },
        series: [
          {
            name: "地面",
            type: "line",
            symbolSize: this.WidthAdaptive(6),
            symbol: "circle",
            data: [61, 65, 96, 59, 54, 69],
            areaStyle: {
              //區域填充樣式
              normal: {
                //線性漸變，前4個參數分別是x0,y0,x2,y2(范圍0~1);相當於圖形包圍盒中的百分比。如果最后一個參數是‘true’，則該四個值是絕對像素位置。
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(255, 210, 0, 0.38)",
                    },
                    {
                      offset: 1,
                      color: "rgba(109, 126, 0, 0)",
                    },
                  ],
                  false
                ),
                // shadowColor: "rgba(109, 126, 0, 0.5)", //陰影顏色
                shadowBlur: this.WidthAdaptive(20), //shadowBlur設圖形陰影的模糊大小。配合shadowColor,shadowOffsetX/Y, 設置圖形的陰影效果。
              },
            },
          },
        ],
      };
      window.onresize = function () {
        myChart.resize();
      };
      myChart.setOption(option);
    },