diff --git a/src/layouts/default.vue b/src/layouts/default.vue index 2da54df..1dfb112 100644 --- a/src/layouts/default.vue +++ b/src/layouts/default.vue @@ -28,6 +28,7 @@ .layout-container { width: 100vw; height: 100vh; + min-width: 1200px; background-color: @color-white-dark; } .layout-default { diff --git a/src/views/home/index.vue b/src/views/home/index.vue index a3e6f1d..76787c6 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -238,6 +238,14 @@ const handleRate = (num) => new Number(Math.abs(num || 0)).toFixed(2) + '%'; const handleRoute = (route) => router.push(route); + const charts = ref({}); + window.addEventListener('resize', () => + setTimeout(() => { + Object.entries(unref(charts)).forEach((entry) => { + entry[1].resize(); + }); + }, 100) + ); const handleChart = ( selector, name, @@ -245,8 +253,9 @@ formatter = (params) => `${params[0].axisValue}
${params[0].seriesName}${params[0].value}` ) => { - 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: [ @@ -266,7 +275,7 @@ left: '0', right: '0', bottom: '30px', - top: '30px', + top: '60px', containLabel: true, }, xAxis: { @@ -381,6 +390,10 @@ cursor: pointer; display: flex; justify-content: space-between; + &:nth-of-type(4), + &:nth-of-type(5) { + margin-top: 10px; + } &:hover { color: var(--el-color-primary); } @@ -478,10 +491,14 @@ } .right { flex: 1; + position: relative; .header { margin-bottom: @layout-space; justify-content: flex-end; align-items: center; + position: absolute; + top: -20px; + right: 0; } .chart { width: 100%;