option = {
        title : {
            text: '我的商機TOP(10)',
            textStyle:{
            fontWeight:'bold',
           color: '#22252A',
           fontSize:12,
           fontFamily:'PingFangSC-Medium',
           lineHeight:12
            }
        },
        grid:
        {
          left:50,
          top:50,
          right:0,
          width:'87%',
          height:320,
        },
        tooltip : {
            trigger: 'item',
            backgroundColor:'transparent',
                 borderColor:'#BFC2C5',
                 borderWidth:0,
                 textStyle:{
                color: '#22252A',
                 }
        },
        //全域性字型樣式
             textStyle:{
            fontFamily: 'PingFangSC-Medium',
            fontSize: 12,
            color: '#858E96',
            lineHeight: 12
             },
        xAxis : [
            {
                type : 'value',
//                scale:true,
                interval:600,
                min:0,
                max:3000,
              //座標軸刻度設定
            axisLabel:{
            margin:10,
            //格式化x軸數值
            formatter:function(value){
            return value;
            }
            },
                axisLine:{
            lineStyle:{
            color:'#EAECEF',
            }
            },
            //x座標軸下刻度
            axisTick:{
            length:8,
                    lineStyle:{
                        color:'#EAECEF'
                    } 
                 },
            //x座標下資料點的位置設定
            splitLine:{  
                             lineStyle:{
                            color:['#EAECEF'],
                             } 
                        }, 
            }
        ],
        yAxis : [
            {
                type : 'category',
                        //座標軸刻度設定
            axisLabel:{
            margin:15
            },
            //軸線設定
            axisLine:{
            lineStyle:{
            color:'#EAECEF'
            }
            },
            //x座標軸下刻度
            axisTick:{
            length:8,
                    lineStyle:{
                        color:'#EAECEF'
                    } 
                 },
            //y座標下資料點的位置設定
            //網格線
            splitLine:{  
            show:true,
                             lineStyle:{
                            color:['#EAECEF'],
                             } 
                        }, 
                data : ['10','9','8','7','6','5','4','3','2','1']
            }
        ],
        series : [
            {
                type:'bar',
                itemStyle: {   
                    //通常情況下：
                    normal:{  
    　　　　　　　　　　　　//每個柱子的顏色即為colorList數組裡的每一項，如果柱子數目多於colorList的長度，則柱子顏色迴圈使用該陣列
                        color: function (params){
                            var colorList = ['#324463','#7CBDDF','#5B93D3','#208BC2','#7CBDDF','#324463','#5B93D3','#7CBDDF','#5B93D3','#324463'];
                            return colorList[params.dataIndex];
                        }
                    },
                },
                data:data,
                tooltip:{
                position:function(p,dom,rect,size){   //其中p為當前滑鼠的位置
                return [size.width+50, size.y-5];
                    },
                formatter : function (prams){
                        return tipFormatter(prams);
                    },
                padding:0,
                 textStyle:{
                fontWeight:'bold',
                fontFamily: 'PingFangSC-Medium',
                fontSize: 12,
                color: '#22252A',
                lineHeight: 12
                }
                }
            },
        ]

    };

如果想實現這樣的效果，請修改對應的配置項，我的資料是從後臺動態獲取的