vue使用使用vchart,如果要统计两个维度,可以让Y轴左右各显示两个维度,例如:
<VeHistogram :data="chartData" :settings="chartSettings" :extend="chartExtendBar"></VeHistogram>
this.chartData = {
columns: ['班级类型', '已开班级数', '已培训人次'],
rows: [{'班级类型':'A班', '已开班级数': 5, '已培训人次': 2000}, {'班级类型':'B班', '已开班级数': 14, '已培训人次': 3100}, {'班级类型':'C班', '已开班级数': 22, '已培训人次': 3333}]
}
this.chartSettings= {
axisSite: { right: ['已培训人次'] },
yAxisType: ['KMB', 'KMB'],
yAxisName: ['已开班级数', '培训人次']
}
this.chartExtend = {
series: {
barWidth: 30,
barMaxWidth: 40,
// itemStyle: {
// //通常情况下:
// normal: {
// //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组
// color: function(params) {
// var colorList = [
// "#65d186",
// "#f67287",
// "#f29e3c",
// "#c05bdd",
// "#f29e3c",
// "#7a65f2",
// "#65d186",
// "#f67287"
// ]; //每根柱子的颜色
// return colorList[params.dataIndex];
// }
// },
// }
}
},
另外希望可以自定义Y轴的刻度范围(最大最小值),可以使用after-config方法
<VeHistogram :data="chartData" :settings="chartSettings" :after-config="afterConfig" :extend="chartExtendBar"></VeHistogram>
afterConfigBar (options) {
options.yAxis[0] = {
type: 'value',
name: '班级数量',
min: 0,
max: 50, //左侧y轴最大数值
axisLabel: {
formatter: '{value}', //设置你的左侧y轴的数值展现形式
textStyle: {
color: "black" //y轴文字样式
}
},
axisLine: {
show: true //显示y轴
},
splitLine: { //网格线
show: false
}
};
return options
}
效果如图:

文章评论