导语
近日在项目中需要进行图表展示,百度的Echarts图表是非常合适的一个选择。项目是vue-cli搭建的,如何在项目中引入Echarts就是一个问题了。亲自动手实践了下,整理总结,希望对小伙伴提供一些帮助,少踩一些坑。
Echarts官网木有良好的说明啊,你知道不知道…
一、完整引入Echarts
下载安装echarts包
npm install echarts -D
定义图表显示的容器,并进行渲染
<template>
<div id="myChart" ref="myChart">div>
template>
<style>#myChart {width: 95%;height: 300px;margin: 20px auto;border: 1px solid #CCC
}style>
<script>// 引入完整的echartsimport 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,会额外的引入其他无用的配置文件,造成应用文件体积过大,资源加载耗时过长,影响用户体验。
二、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,绘制图表
<template>
// ... 与上面实例相同
template>
<style>
// ... 与上面实例相同style>
<script>// 重点:此位置引入的是你单独配置的echartsimport echarts from '@/lib/echarts'export default {
mounted () {// ...与上面实例相同
},methods: {
draw () {// ... 与上面实例相同
}
}
} script>
按此方式打包的项目,会只加载引用你所使用的图表、标题、提示信息等组件,降低了应用文件体积,实现按需加载
三、引入插件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项目中应用的分享,喜欢的小伙伴记得点击在看,转发朋友圈分享呦!