vue引入echart柱状图详细流程步骤

安装echarts插件：

npm install echarts --save

这里只讲按需引入，因为全局引入写死的比较简单:

在需要引入的.vue中：

import * as echarts from 'echarts'

 

接下来创建放置柱状图的容器：

<div id='chart' style="width:100%;height:300px"></div>

 

JS mounted方法中执行初始化echart的方法(这里我加了一个延时方法确保页面渲染结束)：

mounted() {
	setTimeout(() => {
		this.getEchartData();
	}, 500);
},

methods添加getEchartData()方法：

getEchartData() {
				var roseCharts = document.getElementById('chart');
				var myChart = echarts.init(roseCharts);
				var option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
						axisTick: {
							alignWithLabel: true
						}
					}],
					yAxis: [{
						type: 'value'
					}],
					series: [{
						name: '直接访问',
						type: 'bar',
						barWidth: '60%',
						data: [10, 52, 200, 334, 390, 330, 220]
					}]
				};
				myChart.setOption(option)
			},

option中的数据是官网例子给出的测试数据，具体项目中的数据修改为自己的就行

此时运行之后就可以看见图了

 PS:拓展业务需求：

有时候我们经常有需求，就是页面中加载多个柱状图分别展示不同的数据，这个时候我们就需要修改一下容器的属性了

 这个时候我们的思路是：

首先修改容器的属性：

<div  class='chart' style="width:100%;height:300px"></div>

 通过class来获取一组容器的属性值

然后getEchartData方法中分别进行初始化：

var roseCharts = document.getElementsByClassName('chart');
for (var i = 0; i < roseCharts.length; i++) {
    var myChart = echarts.init(roseCharts[i]);
    //这里面是同上面的逻辑处理
}