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