echarts vue 柱状图实例_百度Echarts图表在Vue项目的完整引入以及按需加载

导语

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

一、完整引入Echarts下载安装echarts包

npm install echarts -D

定义图表显示的容器，并进行渲染

#myChart {

width: 95%;

height: 300px;

margin: 20px auto;

border: 1px solid #CCC

}

// 引入完整的echarts

import echarts from 'echarts'

export default {

created () {

// 调用绘制图表的方法

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]

}

]

})

}

}

}

看效果：

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

二、Echarts 按需加载专门设置一个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

在需要的组件内加载echarts，绘制图表

// ... 与上面实例相同

// ... 与上面实例相同

// 重点：此位置引入的是你单独配置的echarts

import echarts from '@/lib/echarts'

export default {

created () {

// ...与上面实例相同

},

methods: {

draw () {

// ... 与上面实例相同

}

}

}

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

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

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

npm install babel-plugin-equire -D

在.babelrc文件中的配置

"plugins": [

"... 其他插件",

"equire"

]

修改@/lib/echarts文件

// eslint-disable-next-line

const echarts = equire([

// 写上你需要的

'bar',

'legend',

'title'

])

export default echarts

和上面案例配置是相同的，可以更加愉快的玩耍了…

结语

好了，各位小伙伴，以上就是百度Echarts图表在Vue项目汇总的应用的分享，喜欢的小伙伴记得点赞分享呦。在应用中很多的场景都是请求数据后，再进行图表的绘制，那么期待我的下一篇文章吧：《百度Echarts图表在Vue异步数据场景下的绘制》

作者：justbecoder

链接：https://www.imooc.com/article/40860

来源：慕课网

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

推荐阅读：