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 | ... | ... |