vue3+ts引入echarts并实现自动缩放

第一种写法（不支持随页面大小变化而缩放）

统一的HTML页面

  <div class="content_box" ref="barChart" id="content_box">

   </div>

TS语法

<script setup lang="ts">
	import * as echarts from 'echarts';
	const barChart=ref<HTMLElement>()
	const myChart = ref<any>()
	const option_bar=ref({})
	 myChart.value = echarts.init(barChart.value!);
	 myChart.value.setOption(option_bar.value);
</script>

第二种写法（支持随页面大小变化而缩放）

main.ts里

import * as ECharts from 'echarts'
app.config.globalProperties.$ECharts = ECharts

使用的页面里

<script setup lang="ts">
	import { getCurrentInstance , ref, onMounted } from "vue"
	const { proxy } = getCurrentInstance() as any
	const echarts = proxy.$ECharts
	const option_bar=ref({})
	//下面是echarts写法，和vue2基本一致
	    const echarts1 = echarts.init(document.getElementById('content_box'))
	    echarts1.setOption(option_bar.value)
	    window.onresize = function () {
	        echarts1.resize()
	    }
</script>