echarts 设置 不同标题等级

最近做项目做了很多关于echarts 图表生成的

        var dataPretest = [1, 1, 1, 2, 1, 1, 1]; var dataPosttest = [1, 2, 1, 1, 1, 3, 1];var dataAverage=[1, 2, 1, 1, 1, 3, 1];

    var options={
    tooltip: {
        trigger: false,
    },
    legend: {
        x: '60%',
        y: 'top',
        icon: 'roundRect',
        textStyle: {
            color: '#84819E'
        },
        data:['能力诊断(前测)','能力考核(后测)','能力考核(后测)平均分']
    },
    xAxis:{
        type: 'category',
        name: '能力',
        nameTextStyle:{
            color:'#302e60',
            fontSize:14,
        },
        data: xAxis,
        axisLine: {
            lineStyle: {
                width: 1,
                color: '#d6dbf1'
            }
        },
        axisLabel: {
            textStyle: {
                color: '#302e60'
            }
        },
        splitLine: {
            show: false,
            lineStyle: {
                width: 1,
                color: '#f7f8fc'
            }
        },
        axisTick: {
            show: false
        }
        
    },
    yAxis: [{
            type: 'value',
            name: '能力等级',
            nameTextStyle:{
                color:'#302e60',
                fontSize:14,
            },
            
            min: 0,
            max: 6.5,
            interval: 1,
            axisLabel: {
                formatter:value => {
                    if(value==1){
                        return '{a|'+'薄弱'+'}';
                    }else if(value==2){
                        return '{a|'+'有限'+'}';
                    }else if(value==3){
                        return '{b|'+'一般'+'}';
                    }else if(value==4){
                        return '{b|'+'良好'+'}';
                    }else if(value==5){
                        return '{c|'+'优秀'+'}';
                    }else if(value==6){
                        return '{c|'+'卓越'+'}';
                    }else if(value==0){
                        return '{d|'+''+'}';
                    }
                },
                rich:{
                    a:{color:'#ff7d7d'},
                    b:{color:'#efbe28'},
                    c:{color:'#2acba6'},
                    d:{color:'#fff'},
                }
            },
            axisLine: {
                lineStyle: {
                    width: 1,
                    color: '#d6dbf1'
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    width: 1,
                    color: '#f7f8fc'
                }
            },
            axisTick: {
                show: false
            },
        }],
    series: [{
            name: '能力诊断(前测)',
            type: 'bar',barWidth: 20,
            
            itemStyle: {
                normal: {
                    show: true,
                    color: '#90dcff', 
                }
            },
            label:{
                normal: {
                    show: true,
                    position: 'top',
                    formatter:function(params){
                        if(params.value==1){
                            return '{a|'+'薄弱'+'}';
                        }else if(params.value==2){
                            return '{a|'+'有限'+'}';
                        }else if(params.value==3){
                            return '{b|'+'一般'+'}';
                        }else if(params.value==4){
                            return '{b|'+'良好'+'}';
                        }else if(params.value==5){
                            return '{c|'+'优秀'+'}';
                        }else if(params.value==6){
                            return '{c|'+'卓越'+'}';
                        }else if(params.value==0){
                            return '{d|'+''+'}';
                        }
                    },
                    rich:{
                        a:{color:'#ff7d7d'},
                        b:{color:'#efbe28'},
                        c:{color:'#2acba6'},
                        d:{color:'#fff'},
                    },

                }
            },
            data:dataPretest
        }, {
            name: '能力考核(后测)',
            type: 'bar',barWidth: 20,
            itemStyle: {
                normal: {
                    show: true,
                    color: '#7297e6', 
                }
            },
            label:{
                normal: {
                    show: true,
                    position: 'top',
                    formatter:function(params){
                        if(params.value==1){
                            return '{a|'+'薄弱'+'}';
                        }else if(params.value==2){
                            return '{a|'+'有限'+'}';
                        }else if(params.value==3){
                            return '{b|'+'一般'+'}';
                        }else if(params.value==4){
                            return '{b|'+'良好'+'}';
                        }else if(params.value==5){
                            return '{c|'+'优秀'+'}';
                        }else if(params.value==6){
                            return '{c|'+'卓越'+'}';
                        }else if(params.value==0){
                            return '{d|'+''+'}';
                        }
                    },
                    rich:{
                        a:{color:'#ff7d7d'},
                        b:{color:'#efbe28'},
                        c:{color:'#2acba6'},
                        d:{color:'#fff'},
                    },

                }
            },
            data:dataPosttest
        },
        {
            name: '能力考核(后测)平均分',
            type: 'bar',
            barWidth: 20,
            itemStyle: {
                normal: {
                    show: true,
                        color: '#bed0f4', 
                }
            },
            label:{
                normal: {
                    show: true,
                    position: 'top',
                    formatter:function(params){
                        if(params.value==1){
                            return '{a|'+'薄弱'+'}';
                        }else if(params.value==2){
                            return '{a|'+'有限'+'}';
                        }else if(params.value==3){
                            return '{b|'+'一般'+'}';
                        }else if(params.value==4){
                            return '{b|'+'良好'+'}';
                        }else if(params.value==5){
                            return '{c|'+'优秀'+'}';
                        }else if(params.value==6){
                            return '{c|'+'卓越'+'}';
                        }else if(params.value==0){
                            return '{d|'+''+'}';
                        }
                    },
                    rich:{
                        a:{color:'#ff7d7d'},
                        b:{color:'#efbe28'},
                        c:{color:'#2acba6'},
                        d:{color:'#fff'},
                    },
                }
            },
            data:dataAverage
        }
       ]
            
    };

效果图如下:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值