最近做大数据展示平台,需要用到很多图表去实现数据可视化,图表比较多,但其实用到的就是 饼图、柱状图和折线图,如果完整引入,会多很多不必要的插件和增大包的体积,最近一直在上性能优化的课,明白 完整引入和按需引入的差别,所以认真去了解了Echart如何按需引入,在此记录一下:
1、安装babel-plugin-equire插件,装在 devDependencies 里,即装在开发环境里,不需要装在生产环境里
npm install babel-plugin-equire -D
2、在 .babelrc文件里 的plugins加入equire插件,vue-cli3 以上版本没这个文件,可以自己直接新建一个,与package.json同级
3、新建一个 echarts.js文件,一般放在lib文件夹下,其他地方也可以,文件内容如下:
const echarts = equire([
// 写上需要的组件
'bar', //柱状图
'pie', //饼图
'line', //折线图
'legend', //图例
'title', //标题
'tooltip' //提示工具
])
export default echarts
4、在需要用到图表的vue组件内引入即可,注意:这里引入的是您新建的echarts.js ,注意路径
import echarts from "@/lib/echarts";
到这里就实现了按需引入Echart了,下面是我实现的一个折线图效果
我一般从后端请求回数据之后,处理成我要的数据格式,然后调用 绘图方法
之所以要把 绘图的方法放在 $nextTick里,是因为图表不一定是固定的,还可能需要根据后端返回的数据动态渲染DOM结构,要想绘制图标 就需要获取到最新的DOM结构。不然会报无法获取DOM结构错误。
图表的配置代码,即option,我没有贴上来,因为太长了,不同项目有不同的配置需求,建议直接看官方文档,非常详细:https://echarts.apache.org/zh/option.html#series
ps:官方的实例挺多的,建议找个相似的实例看一下,个人感觉,官方写的比较简洁,没有那么多 多余的代码
官方实例:https://echarts.apache.org/examples/zh/index.html
他的配置文档里,很多配置参数右侧都有一个试一试,可以测试一下效果,很直观,挺好用的,我刚开始还没注意到
ps:菜鸟成长过程的简单记录,如果不严谨之处,欢迎指正!