【问题解答】关于图表刷新

https://fishpi.cn/article/1694081251010 帖子的解答简单 demo

不是专业前端,写的比较粗糙,各位大佬轻喷。

技术栈是 vue2 + elmentUI,但是基本用的就是响应式和 js 方法。

<template>  <div class="dashboard-editor-container">    <div>      <el-row>        <el-col :span="12">          <el-checkbox-group v-model="checkList" @change="handleFilterData">            <el-checkbox label="设备1"></el-checkbox>            <el-checkbox label="设备2"></el-checkbox>            <el-checkbox label="设备3"></el-checkbox>          </el-checkbox-group>        </el-col>        <el-col :span="12" align="right">          <el-button-group>            <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>            <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>            <el-button type="primary" @click="handleNextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i>            </el-button>          </el-button-group>        </el-col>      </el-row>    </div>    <div>      <el-row>        <el-col :span="6" v-for="item in tableData" v-if="tableData">          <div :id="item.key" style="height: 300px;width: 300px"/>        </el-col>      </el-row>    </div>    <div>      <el-checkbox-group v-model="checkList" @change="handleFilterData">        <el-checkbox label="设备1"></el-checkbox>        <el-checkbox label="设备2"></el-checkbox>        <el-checkbox label="设备3"></el-checkbox>      </el-checkbox-group>    </div>  </div> </template> <script> import echarts from "echarts"; export default {  name: 'DashboardAdmin',  data() {    return {      checkList: [],      num: 8,      tableData: [],      charts: [],      options: {        title: {          left: 'center'       },        tooltip: {          trigger: 'item'       },        series: [         {            type: 'pie',            radius: '50%',            data: [],            emphasis: {              itemStyle: {                shadowBlur: 10,                shadowOffsetX: 0,                shadowColor: 'rgba(0, 0, 0, 0.5)'             }           }         }       ]     }   } },  mounted() {    this.initChart() },  methods: {    initChart() {      this.handleNextPage()   },    reloadChart() {      this.clearChart();      for (let i = 0; i < this.tableData.length; i++) {        let tableItem = this.tableData[i];        let key = tableItem.key;        let data = tableItem.data;        let item = echarts.init(document.getElementById(key))        let itemOptions = JSON.parse(JSON.stringify(this.options));        itemOptions.series[0].data = data.filter((item) => this.checkList.includes(item.name));        item.setOption(itemOptions)        this.charts.push(item)     }   },    clearChart() {      this.charts.forEach(item => item.dispose());      this.charts = [];   },    handleNextPage() {      // 正常应该重新请求接口数据,我这里就直接模拟数据了      this.mockTableData();      setTimeout(() => {        this.reloadChart();     }, 1000)   },    handleFilterData() {      this.reloadChart();   },    mockTableData() {      this.tableData = [];      let days = this.getRandomInt(1, 6);      for (let i = 0; i < days; i++) {        let tableItem = {};        let key = 'key' + i;        tableItem.key = key;        tableItem.data = [         {value: this.getRandomInt(100, 500), name: '设备1'},         {value: this.getRandomInt(100, 500), name: '设备2'},         {value: this.getRandomInt(100, 500), name: '设备3'}]        this.tableData.push(tableItem);     }      console.log(130, 'this.tableData', this.tableData)   },    getRandomInt(min, max) {      min = Math.ceil(min);      max = Math.floor(max);      return Math.floor(Math.random() * (max - min + 1)) + min;   } } } </script>