option = {
title: {
text: 'World Population'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
position: 'top',
axisLine: {
show: true,
},
axisTick:{
show: true
},
splitLine: {
show: false
}
},
yAxis: {
type: 'category',
data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'],
inverse: true,
axisLine: {
show: false,
},
axisTick:{
show: false
},
axisLabel:{
show: true,
// align: 'center',
// backgroundColor: '#3B98FE',
formatter: function (value,index) {
if(index == 0){
return '{style' + index + '| ' + value + '}';
}
return '{style| ' + value + '}';
},
rich:{
style0: {
backgroundColor: 'red',
padding:[5,12],
// height:36
},
style: {
backgroundColor: '#3B98FE',
padding: [5, 12]
}
},
// padding: [5, 12],
color: "#fff",
borderRadius: [3, 0, 0, 3]
}
},
series: [
{
name: '2011',
type: 'bar',
barWidth: 36,
label: {
offset:[20,0],
},
data: [18203, 23489, 29034, 104970, 131744, 630230].reverse(),
itemStyle:{
borderRadius: [0, 18, 18, 0],
normal: {
color: function(params) {
// 给出颜色组
var colorList = ['#FF6977', '#FFA448', '#00C891', '#3B98FE'];
//循环调用
if(params.dataIndex<4){
return colorList[params.dataIndex]
}else{
return colorList[3]
}
},
borderRadius: [0, 18, 18, 0],
}
}
}
]
};