记一次vue中使用echart柱状图

 let myChart = this.$echarts.init(document.getElementById('myChart'));
let option = {
color: ['#FFCD86'],//柱子颜色
backgroundColor: ['#fff'],//背景色
title: {
text: ''
},
tooltip: {},
legend: {
data: ['总订单量'],
},
xAxis: [{
type: 'category',
data: ['10.1-10.7', '10.7-10.14', '10.14-10.21', '10.21-10.28', '10.28-11.5', '11.5-11.12', '11.12-11.19', '11.19-11.26'],
axisLabel: {
interval: 0,//横轴信息全部显示
// rotate: -5,//-15度角倾斜显示
},
}],
yAxis: {
},
series: [{
name: '总订单量',
type: 'bar',
data: [50, 120, 180, 80, 200, 110, 130, 50],
barWidth: 30,//柱图宽度
}]
};
myChart.setOption(option);// 使用刚指定的配置项和数据显示图表。
//点击图例默认是把柱状图隐藏了，此段代码就是为了点击图例展示柱状图
myChart.on('legendselectchanged', function (params) {
let option = this.getOption();
let select_key = Object.keys(params.selected);
if (!params.selected[params.name]) {
select_key.map(res => {
option.legend[0].selected[res] = !params.selected[res];
});
} else {
select_key.map(res => {
option.legend[0].selected[res] = false;
});
option.legend[0].selected[params.name] = true;
}
this.setOption(option);
});

最后

以上就是专注钢笔为你收集整理的记一次vue中使用echart柱状图的全部内容，希望文章能够帮你解决记一次vue中使用echart柱状图所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。