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 anyconst echarts = proxy.$EChartsconst option_bar=ref({})//下面是echarts写法，和vue2基本一致const echarts1 = echarts.init(document.getElementById('content_box'))echarts1.setOption(option_bar.value)window.onresize = function () {echarts1.resize()}
</script>