1# 安装必要依赖 @vue/composition-api
2$ npm i -D @vue/composition-api  
3# 安装 echarts
4$ npm install echarts vue-echarts

 1<template>
 2    <div>
 3        <v-chart style="height: 400px;" :option="option" />
 4    </div>
 5</template>
 6<script setup>
 7// 导入基于 VUE 的 echarts 组件
 8import VChart from "vue-echarts";
 9// 导入 echarts 核心模块，该模块为使用 echarts 提供必要的接口。
10import * as echarts from "echarts/core";
11// 导入 echarts 折线图或者其他图表, 全部图表使用 Chart
12import { LineChart } from "echarts/charts";
13// 导入矩形坐标系组件，全部组件使用 Component
14import { GridComponent } from "echarts/components"
15// 导入 echarts 画布渲染器
16import { CanvasRenderer } from "echarts/renderers";
17// 注册 echarts 所需要的组件
18echarts.use([LineChart, GridComponent, CanvasRenderer]);
19// 为相应的组件配置参数及数据
20const option = ref({
21    // ⚠️⚠️⚠️ 配置什么参数就需要导入相应的组件
22
23    // GridComponent 组件需要的参数
24    xAxis: {// x轴
25        type: 'category',
26        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
27    },
28    yAxis: {
29        type: 'value'
30    },
31    series: [ //图表数据源
32        {
33            data: [820, 932, 901, 934, 1290, 1330, 1320],
34            type: 'line',
35            smooth: true
36        }
37    ]
38})
39</script>

1<script>
2import { 
3    GridComponent, //二维坐标系组件 
4    LegendComponent, //图例组件
5    TooltipComponent, //数据提示组件
6} from "echarts/components"
7</script>

 1<template>
 2    <div>
 3        <!-- 设置 v-chart 引用方法 -->
 4        <v-chart style="height: 400px;" :ref="setVChartRef" :option="option" />
 5    </div>
 6</template>
 7<script setup>
 8import ...
 9// 实现 v-chart 引用方法
10const setVChartRef = (val) => {
11    // 监听浏览器窗口大小变化
12    window.addEventListener('resize', function() {
13        val.resize('auto', '400');
14    });
15
16    // 页面呈现时再重设大小 这里的应用场景是在 el-dialog
17    window.setTimeout(() => {
18        val.resize('auto', '400');
19    }, 100);
20};
21</script>