引用echart折线图渲染数据

1 效果图：

2 代码部分

//1 首先要用一个div盒子容器，固定宽高，用来放图表
//其次添加id，ref，要用来获取容器图表进行渲染
//注意引用前提是要安装echart不然不生效

<div class="title">故障告警趋势</div>
      <div class="chart-box">
        <div
          id="alarmEventLien"
          style="width: 100%;height:260px;"
          ref="alarmEventLien"
        />
       </div>

//2 局部引入折线图，最好是用哪个引用哪个
import * as echarts from "echarts";


//3 methods中写入事件，然后再需要的地方调用
methods：{
     initChart() {
      this.alarmEventLien = echarts.init(
        document.getElementById("alarmEventLien")
      );

      //这里还用了一个事件this.alarmEventLien,由于可能大小屏切换，要计算宽高，所以选择用resize根据window计算，使用时在created中调用，具体看下面created中代码
      // 绘制图表
      this.alarmEventLien.setOption({
        color: ["#377dff"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        grid: {
          left: "36px",
          right: "68px",
          bottom: "10px",
          top: "32px",
          containLabel: true,
          borderColor: "#d8d8d8"
        },
        xAxis: [
          {
            name: "日期",
            type: "category",
            boundaryGap: false,
            data: [],
            nameTextStyle: {
              color: "#b8bcba"
            },
            axisLine: {
              lineStyle: {
                color: "#b8babc"
              }
            }
          }
        ],
        yAxis: [
          {
            name: "故障告警数量",
            type: "value",
            nameTextStyle: {
              color: "#b8bcba"
            },
            axisLine: {
              lineStyle: {
                color: "#b8babc"
              }
            },
            axisPointer: {
              snap: true
            },
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.1)"
              }
            }
          }
        ],
        series: [
          {
            name: "故障告警数量",
            type: "line",
            stack: "总量",
            data: []
          }
        ]
      });
    },

    //在这个事件触发时赋值，所以在这里调用this.initChart
     countUserEvent() {
      this.initChart();
      const data = {
        regionIdentify: "region",
        parentRegionCode: this.areaId,
        regionName: this.areaName,
        alarmTime: this.selectMonth
      };
      this.loadingChart = true;
      setTimeout(() => {
        this.alarmEventLien.hideLoading();
        this.dayData = [];
        this.dayList = [];
            //数据写死用来模拟，有接口调用直接赋值就行
        let chartDa=[ {
      "day": "1",
      "value": 6
    },
    {
      "day": "2",
      "value": 6
    },
    {
      "day": "3",
      "value": 0
    },
    {
      "day": "4",
      "value": 5
    },
    {
      "day": "5",
      "value": 4
    },
    {
      "day": "6",
      "value": 0
    },
    {
      "day": "7",
      "value": 1
    },
    {
      "day": "8",
      "value": 0
    },
    {
      "day": "9",
      "value": 2
    },
    {
      "day": "10",
      "value": 3
    },
    {
      "day": "11",
      "value": 1
    },
    {
      "day": "12",
      "value": 0
    },
    {
      "day": "13",
      "value": 0
    },
    {
      "day": "14",
      "value": 0
    },
    {
      "day": "15",
      "value": 8
    },
    {
      "day": "16",
      "value": 1
    },
    {
      "day": "17",
      "value": 0
    },
    {
      "day": "18",
      "value": 1
    },
    {
      "day": "19",
      "value": 0
    },
    {
      "day": "20",
      "value": 0
    },
    {
      "day": "21",
      "value": 9
    },
    {
      "day": "22",
      "value": 1
    },
    {
      "day": "23",
      "value": 3
    },
    {
      "day": "24",
      "value": 1
    },
    {
      "day": "25",
      "value": 0
    },
    {
      "day": "26",
      "value": 2
    },
    {
      "day": "27",
      "value": 4
    },
    {
      "day": "28",
      "value": 0
    }]
    //series动态数据不能有空数据，不然，只有数据点，而连线出不来
        let chartData=chartDa
        //对拿到的数据做处理转换
        if (chartData != null && chartData.length > 0) {
          for (let i = 0; i < chartData.length; i++) {
            this.dayData.push(chartData[i].value);
            this.dayList.push(chartData[i].day);
          }
        }
        this.alarmEventLien.setOption({
          xAxis: [
            {
              data: this.dayList
            }
          ],
          series: [
            {
              data: this.dayData
            }
          ]
        });
        this.loadingChart = false;
      }, 100);
    },

}
//最后要在页面挂载时在调一下用来赋值的事件
  mounted() {
    this.countUserEvent();
  },


//现在是created中
created() {
    window.onresize = () => {
      if (this.alarmEventLien) {
        this.alarmEventLien.resize();
      }
    };
  },