值应该是从大到小排列的,我想让颜色与值一一对应 (1-3名 各对应一个颜色,4-10对应同一种颜色),
但实际上好像是反正来着,是从小到大排列的。
color: function (params) {
var colorList = ['#faad39', '#66d99c', '#2f9bf1', '#64b8f9'];
return colorList[params.dataIndex];
},
var initSqrkChart = function () {
var sqrkChart = echarts.init(document.getElementById("sq-ranking"));
var sqrkOption = {
grid: {
left: '30%',
bottom: '5%',
top: '5%',
right: '10%',
},
calculable: true,
xAxis: [{
type: 'value',
show: false,
boundaryGap: [0, 0.01]
}],
yAxis: [{
type: 'category',
data: ['杭州', '呼和浩特', '北京', '深圳', '湖南', '海南', '江西', '内蒙古', '徐州', '朔州'],
axisLabel: {
textStyle: {
color: '#9da5b5', //坐标值得具体的颜色
}
},
axisLine: {
show: false
},
axisTick: {
show: false
}
}],
series: [{
type: 'bar',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
center: ['52%', '60%'],
barWidth: 16,
itemStyle: {
normal: {
color: function (params) {
console.log(params);
var colorList = ['#faad39', '#66d99c', '#2f9bf1', '#64b8f9'];
return colorList[params.dataIndex];
},
// 初始化 柱形图圆角
barBorderRadius: [4, 4, 4, 4]
}
},
data: [{
value: 100,
name: '杭州'
}, {
value: 90,
name: '呼和浩特'
},
{
value: 80,
name: '北京'
},
{
value: 70,
name: '深圳'
},
{
value: 60,
name: '湖南'
},
{
value: 50,
name: '海南'
},
{
value: 30,
name: '江西'
}, {
value: 20,
name: '内蒙古'
},
{
value: 10,
name: '徐州'
},
{
value: 5,
name: '朔州'
},
]
}]
};
if (sqrkOption && typeof sqrkOption === "object") {
sqrkChart.setOption(sqrkOption, true);
}
}
yAxis加一项配置inverse: true反序排列就行了