百度echarts 排序问题

图片描述

值应该是从大到小排列的,我想让颜色与值一一对应 (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);
    }
}
阅读 14k
3 个回答

yAxis加一项配置inverse: true反序排列就行了

没问题呀,最下面的是第一个呀,你不会认为朔州是第一个吧,data最前面的是最下面的

我多问一下,如果想要值从大到小的降序排序,应该设置哪个属性?yAxis加inverse: true不起作用哎

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题