常用的echarts總結(未完待續。。。)

先上效果圖:
1.場景（排行榜）：

var img = {
 "0": "imgUrl0",
 "1": "imgUrl1",
 "2": "imgUrl2",
 "3": "imgUrl3",
 "4": "imgUrl4",
}
var array1 = ["花   園","衛生間","樹   木","紅綠燈","停車場","下水道","供   熱","供   電","供   水"];
var array = array1.reverse();
option = {
        backgroundColor:"rgba(2,13,34,1)",
        tooltip: {
            show:true,
            trigger: 'axis',
            axisPointer: {
                type: 'line'
            }
        },
        grid: {
            top: '2%',
            bottom: '1%',
            left:'20%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'value',
                axisLabel: {
                    show: false,
                    interval: 1,
                    textStyle: {
                        color: '#fff',
                        fontSize: 12
                    }
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                }

            }
        ],
    yAxis:{
            type: 'category',
            data: ['0','1','2','3','4','5','6','7','8'],
            axisLabel: {
                padding: [3, 4, 5, 6],
                color:"rgba(255,255,255,1)",
                formatter: function (value) {
                        return '{' + value + '| }{value|'+array[value]+'}';
                },
                rich: {
                    value: {
                        align: 'center',
                        padding:[0,0,0,-5],
                        fontSize:14
                    },
                    0: {
                        height: 60,
                        align: 'center',
                        
                    },
                    1: {
                        height: 60,
                        align: 'center',
                        backgroundColor: {
                            image: img['1']
                        }
                    },
                    2: {
                        height: 60,
                        align: 'center',
                        backgroundColor: {
                            image: img['2']
                        }
                    },
                    3: {
                        height: 60,
                        align: 'center',
                        backgroundColor: {
                            image: img['3']
                        }
                    },
                    4: {
                        height: 60,
                        align: 'center',
                        backgroundColor: {
                            image: img['4']
                        }
                    },
                    5: {
                        height: 60,
                        align: 'center',
                        backgroundColor: {
                            image: img['5']
                        }
                    },
                    6: {
                        height: 60,
                        align: 'center',
                        backgroundColor: {
                            image: img['6']
                        }
                    },
                    7: {
                        height: 60,
                        align: 'center',
                        backgroundColor: {
                            image: img['7']
                        }
                    },
                    8: {
                        height: 60,
                        align: 'center',
                        backgroundColor: {
                            image: img['8']
                        }
                    }
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
               show: false
            },
            zlevel: 99
        },
    series: [{
        type: 'bar',
        barWidth: '20%',
        barCategoryGap: '60%',
        itemStyle: {
            normal: {
                barBorderRadius:[10, 10, 10, 10],
                color: new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                            {offset: 0, color: '#048BFE'},
                            {offset: 1, color: '#00EEF1'}
                        ]
                ),
                label: {
                    show: true,
                    position: 'right',
                    textStyle: {
                        color: '#fff',
                        fontSize: '14'
                    }
                }
            }
        },
        data: [345,85,74,63,63,61,56,35,23]
    }]
};
option.series[0].data.reverse();