Echarts 之橫向柱狀圖（完成度用漢字標識）

效果圖

代碼 

<script src="../js/echarts-4.1.0/echarts.js"></script>
<script src="../js/theme/customed.js"></script>
<script type="text/javascript">
    var yAxisData = ['項目1','項目2','項目3','項目4','項目5'];
    var zdxmData = [95,30,10,50,100];
    var valdata = [100,100,100,100,100];
    var option = {
        xAxis: {
            show: false
        },
        grid: {
            top:'2%',
            left: '2%',
            right: '2%',
            bottom: '2%',
            containLabel: true
        },
        yAxis: [{
            show: true,
            data: valdata,
            inverse: true,
            axisLine: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                formatter: function(value, index) {
                    return [
                        (index + 1)
                    ].join('\n')
                },
                rich: {
                    lg: {
                        // backgroundColor: '#339911',
                        // color: '#fff',
                        borderRadius: 15,
                        // padding: 5,
                        align: 'center',
                        width: 15,
                        height: 15
                    },
                }
            },
    
    
        }, {
            show: true,
            inverse: true,
            data: yAxisData,
            axisLine: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
    
        }],
        series: [{
            name: '條',
            type: 'bar',
            yAxisIndex: 0,
            data: zdxmData,
            barWidth: 15,
            itemStyle: {
                normal: {
                    barBorderRadius: 30,
                    color: '#1089E7'
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'insideRight',
                    fontSize:'10',
                    formatter: function(params) {
                        if(params.value == 95){
                            return "待驗收";
                        }else if(params.value == 30 || params.value == 50){
                            return "建設中";
                        }else if(params.value == 10){
                            return "已立項";
                        }else if(params.value == 100){
                            return "已完成";
                        }
                    }
                }
            },
        }, {
            name: '框',
            type: 'bar',
            yAxisIndex: 1,
            barGap: '-100%',
            data: [100, 100, 100, 100, 100],
            barWidth: 15,
            itemStyle: {
                normal: {
                    color: 'none',
                    borderColor: '#00c1de',
                    borderWidth: 3,
                    barBorderRadius: 15,
                }
            }
        }, ]
    };
</script>

 工作中使用到的，總結歸納後，僅供各位大神們參考......