npm i echarts --save

<script>
import { provide } from 'vue'
import * as echarts from 'echarts'
export default {
  setup() {
    provide('echarts', echarts)
  },
};
</script>

<script setup>
import { inject } from "vue"
const echarts = inject("echarts")
</script>

<template>
    <div class="echart" ref="chartDom"></div>
</template>

<script setup>
//按需導入需要用到的 vue函數 和echarts
import { ref, inject, onMounted } from "vue";
const echarts = inject("echarts");
//獲取 dom 和 父組件數據 并定義"myChart"用于初始化圖表
const chartDom = ref()
let myChart = null;
let option = reactive ({
    title: { text: "總用戶量" },
    tooltip: {},
    xAxis: {
        data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
    },
    yAxis: {},
    series: [
        {
            name: "用戶量",
            type: "line",
            data: [5, 20, 36, 10, 10, 20],
        },
    ],
})
//頁面成功渲染，開始繪制圖表
onMounted(() => {
    myChart = echarts.init(chartDom.value)
    myChart.setOption(props.option, true);
})
</script>

<style lang="scss" scoped>
.echart {
    width: 800px;
    height: 500px;
}
</style>

<template>
    <div class="echart" ref="chartDom"></div>
</template>

<script setup>
//按需導入需要用到的 vue函數 和 echarts
import { ref, inject, onMounted, onBeforeUnmount, defineProps, watch } from "vue";
const echarts = inject("echarts");
//獲取 dom 和 父組件數據 并定義"myChart"用于初始化圖表
const chartDom = ref()
let myChart = null;
const props = defineProps({
    option: Object,
})
//重繪圖表函數
const resizeHandler = () => {
    myChart.resize();
}
//設置防抖，保證無論拖動窗口大小，只執(zhí)行一次獲取瀏覽器寬高的方法
const debounce = (fun, delay) => {
    let timer;
    return function () {
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            fun();
        }, delay);
    }
};
const cancalDebounce = debounce(resizeHandler, 500);
//頁面成功渲染，開始繪制圖表
onMounted(() => {
	//配置為 svg 形式，預防頁面縮放而出現模糊問題；圖表過于復雜時建議使用 Canvas
    myChart = echarts.init(chartDom.value,null, {renderer:'svg'})
    // myChart = echarts.init(chartDom.value)
    myChart.setOption(props.option, true);
    //自適應不同屏幕時改變圖表尺寸
    window.addEventListener('resize', cancalDebounce);
})
//頁面銷毀前，銷毀事件和實例
onBeforeUnmount(() => {
    window.removeEventListener('resize', cancalDebounce)
    myChart.dispose()
})
//監(jiān)聽圖表數據時候變化，重新渲染圖表
watch(() => props.option, () => {
    myChart.setOption(props.option, true);
}, { deep: true })
</script>

<style lang="scss" scoped>
.echart {
    width: 100%;
    height: 100%
}
</style>