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];
// }
// },
// }
}
},
<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];
// }
// },
// }
}
},
<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
}
<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
}
<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 }
效果如图:
文章评论