第一种写法(不支持随页面大小变化而缩放)
统一的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({})
const echarts1 = echarts.init(document.getElementById('content_box'))
echarts1.setOption(option_bar.value)
window.onresize = function () {
echarts1.resize()
}
</script>