首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >百度Echarts图表在Vue项目的完整引入以及按需加载

百度Echarts图表在Vue项目的完整引入以及按需加载

作者头像
胡哥有话说
发布2019-07-25 16:36:37
4.3K0
发布2019-07-25 16:36:37
举报
文章被收录于专栏:胡哥有话说胡哥有话说

导语

近日在项目中需要进行图表展示,百度的Echarts图表是非常合适的一个选择。项目是vue-cli搭建的,如何在项目中引入Echarts就是一个问题了。亲自动手实践了下,整理总结,希望对小伙伴提供一些帮助,少踩一些坑。

Echarts官网木有良好的说明啊,你知道不知道…

一、完整引入Echarts

  1. 下载安装echarts包 npm install echarts -D
  2. 定义图表显示的容器,并进行渲染 <template> <div id="myChart" ref="myChart"></div> </template> <style> #myChart { width: 95%; height: 300px; margin: 20px auto; border: 1px solid #CCC } </style> <script> // 引入完整的echarts import echarts from 'echarts' export default { mounted () { // 调用绘制图表的方法 this.draw(); }, methods: { draw () { // 实例化echarts对象 myChart = echarts.init(this.$refs.myChart) // 绘制条形图 myChart.setOption({ title: { text: 'Echarts 入门实例', top: 5, left: 'center' }, legend: { data: ['衣服', '帽子', '裤子', '鞋子'], top: 30 }, // X轴 xAxis: { data: [ '一月', '二月', '三月', '四月' ] }, // Y轴 yAxis: {}, // 数据 series: [ { name: '衣服', type: 'bar', data: [120, 100, 440, 320] }, { name: '帽子', type: 'bar', data: [200, 120, 240, 330] }, { name: 'bar', type: 'line', data: [120, 200, 240, 260, 300] }, { name: 'bar', type: 'line', data: [120, 200, 300, 140, 260] } ] }) } } } </script>

看效果:

Echarts的条形图bar

缺点:如果是完整的引入Echarts,会额外的引入其他无用的配置文件,造成应用文件体积过大,资源加载耗时过长,影响用户体验。

二、Echarts 按需加载

  1. 专门设置一个echarts配置文件 // 文件路径 @/lib/echarts.js 自行配置 // 加载echarts,注意引入文件的路径 import echarts from 'echarts/lib/echarts' // 再引入你需要使用的图表类型,标题,提示信息等 import 'echarts/lib/chart/bar' import 'echarts/lib/component/legend' import 'echarts/lib/component/title' export default echarts
  2. 在需要的组件内加载echarts,绘制图表 <template> // ... 与上面实例相同 </template> <style> // ... 与上面实例相同 </style> <script> // 重点:此位置引入的是你单独配置的echarts import echarts from '@/lib/echarts' export default { mounted () { // ...与上面实例相同 }, methods: { draw () { // ... 与上面实例相同 } } } </script>

按此方式打包的项目,会只加载引用你所使用的图表、标题、提示信息等组件,降低了应用文件体积,实现按需加载

三、引入插件babel-plugin-equire,配合实现Echarts按需引入

在上面的实例中,我们单独配置的echarts文件,需要引入对应的图表、标题、提示信息等,都需要我们手动进行加载,比较麻烦。引入babel-plugin-equire插件,方便使用。

  1. 下载babel-plugin-equire npm install babel-plugin-equire -D
  2. 在.babelrc文件中的配置 "plugins": [ "... 其他插件", "equire" ]
  3. 修改@/lib/echarts文件 // eslint-disable-next-line const echarts = equire([ // 写上你需要的 'bar', 'legend', 'title' ]) export default echarts
  4. 和上面案例配置是相同的,可以更加愉快的玩耍了…

结语

好了,各位小伙伴,以上就是百度Echarts图表在Vue项目中应用的分享,喜欢的小伙伴记得点击在看,转发朋友圈分享呦!

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-06-17,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 胡哥有话说 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 导语
  • 一、完整引入Echarts
  • 二、Echarts 按需加载
  • 三、引入插件babel-plugin-equire,配合实现Echarts按需引入
  • 结语
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档