VUE3.2 项目使用Echarts5.4总结

1、概念：必须理解按需引入

说白了就是在VUE页面中直接写，而且采用单独Import {} from ，然后在use的形式 。与之对应的就是一句话全部引入,或在man.js中配置部分重复功能综合使用。

import * as echarts from 'echarts/core';
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  DataZoomComponent
} from 'echarts/components';
import { CustomChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  DataZoomComponent,
  CustomChart,
  CanvasRenderer
]);

2、安装步骤

实际上有2种方式一种是npm，一种是按官网下载文件（echarts.js或echarts.mini.js）然后放入对应目录中再配置。这里推荐npm方式，因为不用去单独配置别的文件了。

①安装sass-loader ：

选择 dart-sass 不选node sass （这步我开始跳过了，后来报错，因为有的例子使用了scss），我之前安装了node.js，采用下面命令直接安装：

npm install -g sass

②安装echarts：

npm install echarts --save

接下来就开始使用（如果例子中使用了$，那别忘记还要安装jquery）。

3、在.vue中直接使用：

①template区域给一个div,并署名id

<div id="main" style="width: 100%;height:80vh;  "></div>

②script区域：

这里官网没有的，注意在该区域第一行就引入：

import { onMounted } from 'vue'

③script区域：

打开例子代码，官网例子中的按需导入和ESmode模式，如下图

拷贝从 import * as echarts from 'echarts/core'; 到 echarts.use([.. 段 的内容：

import * as echarts from 'echarts/core';
import {
  TitleComponent,
  ToolboxComponent,