【问题解答】关于图表刷新
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>
-
前端
大佬,能看懂一点,但是不会写😂