echarts橫向柱狀圖一端圓形配置

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
      color: ['#959595'],
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
        show:false
    },
    yAxis: {
        type: 'category',
        data: ['人員A', '人員B', '人員C', '人員D', '人員E', '人員F', '人員G', '人員H', '人員I', '人員J'],
         axisLine:{
             show:false   //座標軸
             
         },     
        axisTick:[{    //座標軸小標記
            show:false
        }],
        
        inverse: true, //正序
        axisLabel:{
            textStyle:{
                 fontSize:'14'
            }
         }
    },
    series: [{
        name: '2011年',
        type: 'bar',
        barWidth : 30,
        label: {
            normal: {
                show: true,
                textStyle: {
                    color: '#959595',
                    fontSize: 14
                },
                position: 'right'
            }
        },
        itemStyle: {
            normal: {
                barBorderRadius:[0, 25, 25, 0],
                color: function(param) {
                    let colorList = [ "#c493ee", "#ff69b4" ]; 
                    let x = '';
                     param.dataIndex%2 ==0 ? x=1 : x=2;
                    if(x == '1') {
                       return colorList[0];
                    } else {
                        return colorList[1]
                    }
                    
                }
            }
        
        },
        data: [482, 490, 510, 518, 536, 557,612,650,630,750]
    }]
};
 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章