diff --git a/src/views/im/home/index.vue b/src/views/im/home/index.vue index 6ac6882..4fb3007 100644 --- a/src/views/im/home/index.vue +++ b/src/views/im/home/index.vue @@ -68,9 +68,18 @@ }; watch(systemId, handleLoadOnline); + const charts = ref({}); + window.addEventListener('resize', () => + setTimeout(() => { + Object.entries(unref(charts)).forEach((entry) => { + entry[1].resize(); + }); + }, 100) + ); const handleChart = (selector, name, data) => { - const chart = echarts.init(document.querySelector(selector)); - window.addEventListener('resize', () => nextTick(() => chart.resize())); + let chart = charts.value[selector]; + chart?.dispose(); + chart = charts.value[selector] = echarts.init(document.querySelector(selector)); const option = { gradientColor: ['#1DE7FF', '#249AFF', '#6F41FA', '#6F41FA'], visualMap: [ @@ -88,37 +97,35 @@ grid: { left: '0', right: '0', - top: '5%', - bottom: '0', + bottom: '30px', + top: '60px', containLabel: true, }, - xAxis: [ - { - data: data.map((item) => item.label), - }, - ], - yAxis: [{}], - series: [ - { - type: 'line', - name, - showSymbol: false, - smooth: true, - areaStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { - offset: 0, - color: 'rgba(29, 231, 255, 0.3)', - }, - { - offset: 1, - color: 'rgba(29, 231, 255, 0)', - }, - ]), - }, - data: data.map((item) => item.value), + xAxis: { + data: data.map((item) => item.label), + }, + yAxis: { + minInterval: 1, + }, + series: { + type: 'line', + name, + showSymbol: false, + smooth: true, + areaStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: 'rgba(29, 231, 255, 0.3)', + }, + { + offset: 1, + color: 'rgba(29, 231, 255, 0)', + }, + ]), }, - ], + data: data.map((item) => item.value), + }, }; chart.setOption(option); };