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