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

安德玛

发布于 2022-03-04 08:51:58

38700

代码可运行

运行总次数：0

代码可运行

安装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]);

//这里面是同上面的逻辑处理

本文系转载，前往查看

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

本文系转载，前往查看

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

登录后参与评论

0 条评论

热度