echarts在vue项目中的使用

1. 下载echarts,引入echarts文件

npm i echarts
-----------
import echarts from "echarts";

2. 在页面放置具有宽高的盒子，放echarts。
   
   【注意】：放echarts的盒子一定要有宽高，否则图表不显示。
   

3. 开始实例化图表。
   
   【注意】：在实例化图表之前一定要清空，否则多次请求之后，数据堆叠，页面会卡死。

4. 实例化图表之后就是正常的图表配置。常用配置项
   

5. 从后台获取数据渲染图表的注意点
   ①实例化图表initchartDealLine()函数的调用时机：获取到图表数据之后
   
   ②在beforeDestroy函数中清空图表数据
   

6. 页面渲染图表优化点
   ①v-loading:在获取到图表数据之后在关闭，这样一进页面就会显示图表一直在加载中。
   ②如果没有图表数据，就显示暂无数据的图片代替。el-empty空状态