先上效果图:
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();