echat 折线图，展示全部数据

import lineChart from './components/accountlintChart.vue'

components: { lineChart },

<div class="hazardBox">
          <lineChart :chartData="tagTrendData" />
        </div>

<template>
  <div ref="linechart" class="chart" />
</template>

<script>
import * as echarts from "echarts";
import fontSize from "@/utils/fontSize"

export default {
  props: {
    chartData: {
      type: Object,
      default: {},
    },
  },
  data () {
    return {
      chart: null,
    };
  },
  watch: {
    chartData () {
      this.$nextTick(() => {
        this.initChart();
      });
    },
  },
  beforeDestroy () {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart () {
      this.chart = echarts.init(this.$refs.linechart);
      const data = this.chartData;
      const xxData = data.xxData;
      const yyData = data.yyData;
      // const legend = data.aimData.map((item) => item.name);
      let serieslist = [];
      for (let i in yyData) {
        serieslist.push({
          // name: legend[i],
          type: "line",
          stack: "总量" + i,
          data: yyData[i],
          smooth: true,
          symbol: "none",
          areaStyle: {
            normal: {
              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(25,163,223,.3)",
                  },
                  {
                    offset: 1,
                    color: "rgba(25,163,223, 0)",
                  },
                ],
                false
              ),
              shadowColor: "rgba(25,163,223, 0.5)", //阴影颜色
              shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            },
          },
        });
      }
      let option = {
        color: ["#31d2f2", "#4166e8"],
        tooltip: {
          trigger: "axis",
          textStyle: {
            fontSize: fontSize(),
          },
        },
        // legend: {
        //   show: false,
        //   data: legend,
        //   left: 20,
        //   top: "1%",
        //   textStyle: {
        //     fontSize: fontSize(),
        //   },
        // },
        grid: {
          top: "20%",
          left: "5%",
          right: "5%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xxData,
          axisLabel: {
            fontSize: fontSize(),
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            fontSize: fontSize(),
          },
        },
        series: serieslist,
      };
      this.chart.setOption(option);
      // window.addEventListener("resize", () => {
      //   this.chart.resize();
      // });
    },
  },
};
</script>
<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>