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

2022-12-08 381点热度 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];
        //         }
        //     },
        // }
    }
},

另外希望可以自定义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
}

效果如图:

admin

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

文章评论

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