echrats 柱状图同时显示数量和百分比

最新推荐文章于 2024-08-15 08:58:28 发布

我是小妖怪逍遥又自在

最新推荐文章于 2024-08-15 08:58:28 发布

阅读量5.6k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_29648689/article/details/80284370

本文展示了如何使用Echarts库在柱状图中同时显示数据的数量和对应的百分比。通过JavaScript代码实现了一个从接口获取数据，然后处理并绘制柱状图的示例。柱状图的Y轴显示类别，X轴则展示数量和百分比信息。

<script type="text/javascript">
    var numArrbf=[];
    $(function () {
        var commerJson = '${aaaaa!}';//接口
        var xArr = [];
        var numArrNum = 0;
        var allArr = JSON.parse(commerJson);
        var vehArr = getFivel('专用车',allArr);
        var myChart46 = echarts.init(document.getElementById('morth4-6'));
        var option46 = {
            grid: {
                left: '1%',
                right:'14%',
                top:0,
                bottom:0,
                containLabel: true,
            },
            xAxis: {
                type: 'value',
                show:false ,
                splitLine:{
                    show:false
                }
            },
            yAxis: {
                type: 'category',
                axisLabel:{
                    textStyle:{
                        fontSize:12
                    }
                },
                data: vehArr.deptArr
            },
            series: [
                {
                    type: 'bar',
                    barMaxWidth:30,//最大宽度
                    itemStyle:{
                        normal:{
                            color:'#3398DB'
                        }
                    },
                    stack:'nanen',
                    label: {
                        normal: {
                            show: true,
                            color:'#333',
                            position:'right',
                            formatter:function() {
                                for(var i = numArrNum in numArrbf){
                                    var relVal = "";
                                    relVal = numArrbf[numArrNum][0]+",";
                                    relVal += numArrbf[numArrNum][1]+"%";
                                    numArrNum ++;
                                    return relVal;
                                }
                            },


                        }
                    },
                    data: vehArr.vnArr

                }
            ]
        };
        myChart46.setOption(option46);
    });
    function getFivel( vehName ,  allArr) {
        // 车辆数组
        var data = [];
        for (var i in allArr) {
            var vehAll = allArr[i];
            var veh_Name = vehAll.dictName;
            if (vehName == veh_Name) {
//                            省份
                var dept = vehAll.unName;
//                            数量
                var veh_num = vehAll.enteringVeh;
                var veh_per = vehAll.vehRiseRate;

                var veh_data = [dept,veh_num,veh_per];
                data.push(veh_data);

            }
        }
        if (data.length === 0)
        {
            return false;
        }else if (data.length >= 10|| allArr.length - 1 == i) {
            var deptArr = [];
            var vnArr = [];
            var perArr=[];
            for (var i = data.length -1 ; i >= 0 ; i--){
                deptArr.push(data[i][0]);
                vnArr.push(data[i][1]);
                perArr.push(data[i][2]);
                numArrbf.push([data[i][1],data[i][2]]);
            }

            return {'deptArr':deptArr,'vnArr':vnArr,'perArr':perArr,'numArrbf':numArrbf,};
        }
    }

</script>