echarts 進度條

 

 

var colors = ["#f00","#00f","#ff0","#0ff","#f0f"];
option = {
    title: {
        text: '世界人口總量',
        subtext: '數據來自網絡'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        show:false, //不顯示x軸相關信息
    },
    yAxis: [
        {
            type: 'category',
            data: ['html5', 'css', 'js', 'vue', 'node'],
            axisTick:{show:false}, //不顯示刻度線
            axisLabel:{
                color:"#000"
            },
            axisTick:{
                show:false
            },
            axisLine:{
                show:false
            },
            inverse:true
            
        },
        {
            type: 'category',
            data: [702, 350, 666, 555, 777],
            axisTick:{show:false}, //不顯示刻度線
            axisLabel:{
                color:"#000"
            },
            axisTick:{
                show:false
            },
             axisLine:{
                show:false
            },
            inverse:true
        },
        
    ],
    series: [
        {
            name: '條',
            yAxisIndex:0,
            type: 'bar',
            data: [70, 33, 60, 78, 69],
            // 修改第一條柱子的圓角
            itemStyle:{
                normal:{
                    barBorderRadius:20,
                    color:function(params){
                        //params 傳遞過來的柱子對象
                        // dataIndex 是當前柱子的索引
                        var num = colors.length;
                        return colors[params.dataIndex%num]
                    }
                },
                // color 可以修改柱子的顏色
                // color:"orange"
            },
            // 柱子之間的間距
            barCategoryGap:5,
            // 柱子之間的寬度
            barWidth:20,
            // 顯示柱子內的文字
            label:{
                show:true,
                position:"inside",
                formatter:"{c}%"    
                // {c} 會自動解析為data中的數據
            }
        },
        {
            name: '框',
             yAxisIndex:1,
            type: 'bar',
            data: [100, 100, 100, 100, 100],
            // 柱子之間的間距
            barCategoryGap:5,
             // 柱子之間的寬度
            barWidth:20,
            itemStyle:{
                color:"none", //填充色
                borderColor:"#00f",
                borderWidth:2,
                barBorderRadius:15
            }
        }
    ]
};