引用echart折线图渲染数据

只差亿点点

已于 2023-04-13 10:06:18 修改

阅读量326

点赞数

文章标签： echarts 前端 javascript

于 2023-04-07 09:45:02 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_67898309/article/details/130004525

版权

本文展示了如何在Vue.js应用中利用Echarts库创建一个故障告警趋势的折线图。首先设置包含图表的div容器，然后导入Echarts模块，初始化图表并设置配置项，包括x轴和y轴的数据以及颜色、提示信息等。在方法中调用图表渲染函数，并模拟数据进行填充。同时，处理窗口大小变化时的图表重绘问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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();
      }
    };
  },