vchart双Y轴配置且定义Y轴标尺大小值

2022-12-08 728点热度 0人点赞 0条评论

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
}

效果如图:

admin

这个人很懒,什么都没留下

文章评论

您需要 登录 之后才可以评论