Showing
1 changed file
with
10 additions
and
0 deletions
... | ... | @@ -46,6 +46,12 @@ |
46 | 46 | |
47 | 47 | const chartRef = ref<HTMLDivElement | null>(null); |
48 | 48 | |
49 | + const watchClientWidth = () => { | |
50 | + return `width:${document.body.clientWidth - 280}px`; | |
51 | + }; | |
52 | + | |
53 | + const resizeStatus = ref(false); | |
54 | + | |
49 | 55 | const { setOptions, resize } = useECharts(chartRef as Ref<HTMLDivElement>); |
50 | 56 | |
51 | 57 | const getOptions = (): EChartsOption => { |
... | ... | @@ -99,6 +105,7 @@ |
99 | 105 | window.addEventListener('resize', () => { |
100 | 106 | resize(); |
101 | 107 | setOptions(getOptions()); |
108 | + resizeStatus.value = true; | |
102 | 109 | }); |
103 | 110 | }); |
104 | 111 | |
... | ... | @@ -106,6 +113,7 @@ |
106 | 113 | const startTs = Date.now() - e.target.value; |
107 | 114 | const endTs = Date.now(); |
108 | 115 | emits('emitTimeRange', e.target.value, startTs, endTs); |
116 | + watchClientWidth(); | |
109 | 117 | }; |
110 | 118 | </script> |
111 | 119 | <template> |
... | ... | @@ -120,9 +128,11 @@ |
120 | 128 | </template> |
121 | 129 | </a-radio-group> |
122 | 130 | </template> |
131 | + <!-- 不能使用100%设为宽,width=100%,实际是100px--> | |
123 | 132 | <div |
124 | 133 | v-show="(chartsData?.series as SeriesOption[])?.length" |
125 | 134 | ref="chartRef" |
135 | + :style="!resizeStatus ? watchClientWidth() : `null`" | |
126 | 136 | class="w-full h-80" |
127 | 137 | ></div> |
128 | 138 | <div | ... | ... |