全局引入ECharts非常的方便，但是该方式会加载ECharts所有图表和组件，build时也会将所有的echarts图表打包导致体积过大直接影响运行效率。如果我们用到的图表不多完全没必要全局引入，可以在需求的组件中按需引入ECharts。比如我们上面显示的柱状图，我们完全可以直接引入echarts中的bar组件来实现。
通过上面的元素创建并配置，成功将ECharts挂载到了div元素中。我们在前端就可以看到如下的显示效果，显示的图表类型在option中通过series中的type指定为bar（柱状图）。
在ECharts中有很多的参数选项，很容易搞混淆。最简单的方式就是进入ECharts官网，在官网中找到你想要的ECharts模板。在模板的左侧就会提供该示例的option参数设置，我们可以对照右图中的显示效果修改好之后直接复制到我们的项目中来。
ECharts几乎涵盖各行业图表，基本上可以满足开发中的各种需求。随着大数据的到来，可视化图表备受青睐！学会ECharts还是很有必要的哦，以上内容是小编给大家分享的【Vue实战090：Vue使用ECharts图表详解】。希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。更多Vue实战技巧可以参考以下专栏：
为了方便学习，下面附上本文用到的源码：
> npm install echarts --save
**********省略*************
echarts@4.9.0
added 2 packages in 19.44s
---------------------------------------------------------------
//main.js文件
import echarts from 'echarts' // 引入echarts
Vue.prototype.$echarts = echarts //注册echarts组件
<template>
<div class="home">
<div ref="echarts" :style="{width: '400px', height: '400px'}" ></div>
</div>
</template>
<script>
export default {
name: 'echarts',
methods: {
drawLine () {
let dom = this.$refs.echarts
this.$echarts.init(dom).setOption({
title: { text: '在Vue中使用echarts' },
tooltip: {},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
})
}
},
mounted () {
this.drawLine()
}
}
-------------------------------------------------------------------
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
