记录一次好看的折线图（Echarts）（不接受任何反驳，就是好看

突然觉得挺好看的，所以记录下。

HTML部分

<div class="my_chart_two" ref="myChartTow"></div>

CSS部分

.my_chart_two {
    width: 800px;
    height: 700px;
    position: absolute;
    z-index: 201;
    top: 120px;
    left: 200px;
    border-radius: 4px;
    background: rgba(26, 128, 137, 0.8);
    border: 2px solid rgba(6, 254, 211, 0.8);
    box-shadow: inset 0px -8px 57px 0px rgba(20, 196, 164, 0.8);
  }

JS部分（用TS实现的，大致差不多）

public drawChartLine() {
    const chart = echarts.init(this.$refs.myChartTow as HTMLDivElement);
    const option: any = {
      grid: {
        x: 50,
        y: 50,
        x2: 30,
        y2: 25,
      },
      legend: {
        color: ['#FFCAD4', '#AAF487', '#F6D06F', '#1E90FF'],
        data: ['A相', 'B相', 'C相', 'D相'],
        left: 'right',
        top: 'top',
        textStyle: {
          color: '#fff',
        },
      },
      xAxis: [
        {
          name: 'm',
          nameTextStyle: {
            color: '#fff',
          },
          type: 'category',
          boundaryGap: false,
          axisTick: {
            show: false,
          },
          axisLabel: {
            margin: 5,
            textStyle: {
              fontSize: 14,
              color: '#fff',
            },
          },
          axisLine: {
            lineStyle: {
              color: '#ddd',
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255, 255, 255, 0.3)',
            },
          },
          data: ['测试1', '测试2', '测试3', '测试4', '测试5', '测试6'],
        },
      ],
      yAxis: [
        {
          type: 'value',
          name: '℃',
          nameTextStyle: {
            color: '#fff',
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: '#ddd',
            },
          },
          axisLabel: {
            margin: 5,
            textStyle: {
              fontSize: 14,
              color: '#fff',
            },
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255, 255, 255, 0.3)',
            },
          },
        },
      ],
      series: [
        {
          name: 'A相',
          type: 'line',
          showSymbol: false,
          hoverAnimation: false,
          data: [800, 900, 220, 130, 660, 289],
          color: '#FFCAD4',
          lineStyle: {
            normal: {
              width: 3,
              color: {
                type: 'linear',
                colorStops: [
                  {
                    offset: 0,
                    color: '#FFCAD4', // 0% 处的颜色
                  },
                  {
                    offset: 0.4,
                    color: '#F58080', // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#F58080', // 100% 处的颜色
                  },
                ],
              },
            },
          },
        },
        {
          name: 'B相',
          type: 'line',
          showSymbol: false,
          hoverAnimation: false,
          data: [123, 568, 111, 222, 123, 56],
          color: '#AAF487',
          lineStyle: {
            normal: {
              width: 3,
              color: {
                type: 'linear',
                colorStops: [
                  {
                    offset: 0,
                    color: '#AAF487', // 0% 处的颜色
                  },
                  {
                    offset: 0.4,
                    color: '#47D8BE', // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#47D8BE', // 100% 处的颜色
                  },
                ],
              },
            },
          },
        },
        {
          name: 'C相',
          type: 'line',
          showSymbol: false,
          hoverAnimation: false,
          data: [125, 568, 25, 36, 784, 56],
          color: '#F6D06F',
          lineStyle: {
            normal: {
              width: 3,
              color: {
                type: 'linear',
                colorStops: [
                  {
                    offset: 0,
                    color: '#F6D06F', // 0% 处的颜色
                  },
                  {
                    offset: 0.4,
                    color: '#F9A589', // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#F9A589', // 100% 处的颜色
                  },
                ],
              },
            },
          },
        },
        {
          name: 'D相',
          type: 'line',
          showSymbol: false,
          hoverAnimation: false,
          data: [225, 168, 125, 236, 384, 256],
          color: '#1E90FF',
          lineStyle: {
            normal: {
              width: 3,
              color: {
                type: 'linear',
                colorStops: [
                  {
                    offset: 0,
                    color: '#1E90FF', // 0% 处的颜色
                  },
                  {
                    offset: 0.4,
                    color: '#00E4FF', // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#00E4FF', // 100% 处的颜色
                  },
                ],
              },
            },
          },
        },
      ],
    };
    chart.clear();
    chart.setOption(option);
  }

就是好看，不接受任何反驳，(`へ´*)ノ