使用echarts画百分比排名柱状图

使用echarts画排名信息，可以保证在固定大小的容器中完美展现，不会出现文字和图画越界问题。

效果图：

image.png

    /**
     * 画占比图
     * @param {String} container 容器
     * @param {JSON} yData Y轴数据
     * @param {JSON} ratio 占比数据
     * @param {JSON} surplus 剩余数据
     */
    function drawPercentage(container, yData, ratio, surplus) {
        var myChart = echarts.init(document.getElementById(container));
        var option = {
            grid: {
                left: '8%',
                right: '8%',
                bottom: '4%',
                top: 10,
                containLabel: true
            },
            xAxis: {
                show: false
            },
            yAxis: {
                type: 'category',
                inverse: true,
                //城市名称
                data: yData,
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    color: function (value, index) {
                        if(index == 0) {
                            return 'red';
                        }
                        if(index == 1) {
                            return '#ff8447';
                        }
                        if(index == 2) {
                            return '#ffcc00';
                        }
                        return 'rgb(18,205,12)'
                    },
                    fontSize: 15,
                    fontWeight: 'bold'
                },
            },
            series: [
                {
                    type: 'bar',
                    stack: 'chart',
                    z: 3,
                    barWidth: '20',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(1,
                                0, 0, 1, [{
                                    offset: 0,
                                    color: '#2A6BCD'
                                }, {
                                    offset: 1,
                                    color: '#34F6F8'
                                }])
                        }
                    },
                    label: {
                        normal: {
                            position: 'right',
                            show: true,
                            color: 'white',
                            formatter: '{c}%'
                        }
                    },
                    data: ratio
                },
                {
                    type: 'bar',
                    stack: 'chart',
                    barWidth: '20',
                    itemStyle: {
                        normal: {
                            color: '#0D2253'
                        }
                    },
                    data: surplus
                }]
        }
        myChart.setOption(option);
    }

调用方式：

    var yData = ["河北", "北京", "天津", "河南", "山东", "内蒙", "宁夏", "陕西", "四川", "湖南"];
    //百分比数据
    var ratio = [45, 12, 10, 7, 6, 5, 5, 4, 3, 2];
    //100%-ratio
    var surplus = [55, 88, 90, 93, 94, 95, 95, 96, 97, 98];
    drawPercentage('regionDetail', yData, ratio, surplus);

关于柱状图的颜色过度和颜色配置，可以在series中调整。
关于排名文字信息样式可以在yAxis中的axisLabel里面设置，而且可以根据排名设置字体不同的颜色。