diff --git a/src/views/link/DashBoard/components/TopCard.vue b/src/views/link/DashBoard/components/TopCard.vue index 199d4833..adec0682 100644 --- a/src/views/link/DashBoard/components/TopCard.vue +++ b/src/views/link/DashBoard/components/TopCard.vue @@ -157,7 +157,15 @@ watch( .dash-board-item { flex: 1; //margin: 24px 12px; - min-width: 250px; + min-width: calc(25% - 24px); } } + +@media (max-width: 1400px) { + .dash-board { + .dash-board-item { + min-width: calc(50% - 24px); + } + } +} diff --git a/src/views/link/DashBoard/components/TopEchartsItemNode.vue b/src/views/link/DashBoard/components/TopEchartsItemNode.vue index f1952fcb..77ea2e4d 100644 --- a/src/views/link/DashBoard/components/TopEchartsItemNode.vue +++ b/src/views/link/DashBoard/components/TopEchartsItemNode.vue @@ -43,19 +43,27 @@ export default { data() { return { options: {}, + myChart: undefined }; }, + beforeDestroy() { + window.removeEventListener('resize', this.resize) + }, methods: { createChart(val) { const chart = this.$refs.chartRef; - if (chart && Object.keys(val).length > 0) { - const myChart = echarts.init(chart); - myChart.setOption(val); - window.addEventListener('resize', function () { - myChart.resize(); - }); + if (chart && Object.keys(val).length > 0 && !this.myChart) { + console.log('createChart') + this.myChart = echarts.init(chart); + this.myChart.setOption(val); + window.addEventListener('resize', this.resize); + } else if (this.myChart) { + this.myChart.setOption(val); } }, + resize() { + this.myChart?.resize(); + }, getOptions(max, formatter, val) { let formatterCount = 0; this.options = {