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 |