双Y轴曲线阴影 折线图

效果如下

 

代码：

<template>
  <div style="width: 406px; height: 190px" id="it_r_two"></div>
</template>

<script>
export default {
  name: "it_r_two",
  data() {
    return {};
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    // 自适应字体大小变化
    WidthAdaptive(res) {
      var windth = window.innerWidth;
      let fontSize = windth / 1920;
      return fontSize * res;
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("it_r_two"));
      let xLabel = [
        "08/02",
        "08/03",
        "08/04",
        "08/05",
        "08/06",
        "08/07",
        "08/08",
      ];
      let goOutSchool = ["3", "1", "6", "3", "1", "6", "3"];
      let goOutSchool2 = ["2", "5", "1", "4", "3", "6", "9"];

      let option = {
        backgroundColor: "transparent",
        legend: {
          icon: "rect",
          itemWidth: this.WidthAdaptive(14),
          itemHeight: this.WidthAdaptive(4),
          itemGap: this.WidthAdaptive(14),
          padding: this.WidthAdaptive(2),
          textStyle: {
            color: "rgba(201, 229, 255, 1)",
            fontSize: this.WidthAdaptive(12),
            padding: [3, 0, 0, 0],
          },
        },
        grid: {
          top: "18%",
          left: "10%",
          right: "10%",
          bottom: "12%",
          // containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: {
              //坐标轴轴线相关设置。数学上的x轴
              show: true,
              lineStyle: {
                color: "#8C9493",
              },
            },
            axisLabel: {
              //坐标轴刻度标签的相关设置
              textStyle: {
                color: "rgba(201, 229, 255, .8)",
                fontSize: this.WidthAdaptive(12),
                padding: this.WidthAdaptive(2),
              },
              formatter: function(data) {
                return data;
              },
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "#192a44",
              },
            },
            axisTick: {
              show: false,
            },
            data: xLabel,
          },
        ],
        yAxis: [
          {
            name: "单位：MW",
            nameTextStyle: {
              color: "rgba(201, 229, 255, .8)",
              fontSize: this.WidthAdaptive(12),
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "rgba(112,112,112,0.5)",
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#8C9493",
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "rgba(201, 229, 255, .8)",
                fontSize: this.WidthAdaptive(12),
                padding: this.WidthAdaptive(3),
              },
            },
            axisTick: {
              show: false,
            },
          },
          {
            name: "单位：水/t",
            nameTextStyle: {
              color: "rgba(201, 229, 255, .8)",
              fontSize: this.WidthAdaptive(12),
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "rgba(112,112,112,0.5)",
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#8C9493",
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "rgba(201, 229, 255, .8)",
                fontSize: this.WidthAdaptive(12),
                padding: this.WidthAdaptive(3),
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "电耗趋势",
            type: "line",
            symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
            showAllSymbol: true,
            symbolSize: 0,
            smooth: true,
            lineStyle: {
              normal: {
                width: this.WidthAdaptive(2),
                color: "rgba(59, 157, 255, 1)", // 线条颜色
              },
              borderColor: "rgba(0,0,0,.4)",
            },
            itemStyle: {
              color: "rgba(59, 157, 255, 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(59, 157, 255, .5)",
                    },
                    {
                      offset: 1,
                      color: "rgba(59, 157, 255, 0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(10,219,250, 0.5)", //阴影颜色
                shadowBlur: this.WidthAdaptive(20), //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
              },
            },
            data: goOutSchool,
          },
          {
            name: "水耗趋势",
            type: "line",
            symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
            showAllSymbol: true,
            symbolSize: 0,
            yAxisIndex: 1,
            smooth: true,
            lineStyle: {
              normal: {
                width: this.WidthAdaptive(2),
                color: "rgba(255, 173, 14, 1)", // 线条颜色
              },
              borderColor: "rgba(0,0,0,.4)",
            },
            itemStyle: {
              color: "rgba(255, 173, 14, 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(255, 173, 14, .5)",
                    },
                    {
                      offset: 1,
                      color: "rgba(255, 173, 14, 0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(10,219,250, 0.5)", //阴影颜色
                shadowBlur: this.WidthAdaptive(20), //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
              },
            },
            data: goOutSchool2,
          },
        ],
      };
      window.onresize = function() {
        myChart.resize();
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style scoped></style>