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>