- 下载echarts,引入echarts文件
npm i echarts
-----------
import echarts from "echarts";
-
在页面放置具有宽高的盒子,放echarts。
【注意】:放echarts的盒子一定要有宽高,否则图表不显示。
-
开始实例化图表。
【注意】:在实例化图表之前一定要清空,否则多次请求之后,数据堆叠,页面会卡死。 -
实例化图表之后就是正常的图表配置。常用配置项
-
从后台获取数据渲染图表的注意点
①实例化图表initchartDealLine()函数的调用时机:获取到图表数据之后
②在beforeDestroy函数中清空图表数据
-
页面渲染图表优化点
①v-loading:在获取到图表数据之后在关闭,这样一进页面就会显示图表一直在加载中。
②如果没有图表数据,就显示暂无数据的图片代替。el-empty空状态