echarts X Y轴互换后显示问题

想要实现

clipboard.png

现在成了

clipboard.png

该如何设置?
代码是:

{

                    label:{
                        normal:{
                            show: true,
                            textStyle:{color:'#000',fontSize:"18"},
                            position: 'top'
                        },
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        //  x:0,
                        //  y:40,
                        //  x2:10,
                        //  y2: 30,
                        //  containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        axisLabel: {
                            textStyle: {
                                color: '#000',
                                fontSize:'12'
                            },
                             formatter:function(val){
                                var newval =val/10000;
                                return newval+ "万";
                             },
                        }
                    },
                    yAxis: {
                        type: 'category',
                        nameLocation:"left",
                        boundaryGap : false,
                        data:  ["Apple|iPhone 6","Apple|iPhone 6s","Apple|iPhone 7 Plus","Apple|iPhone 7",
                            "Apple|iPhone 6 Plus","Apple|iPhone 6s Plus","Apple|iPhone 5S","OPPO R9s","HUAWEI MHA-AL00","Vivo X7"
                        ].reverse(),
                        splitLine: {show: false},
                        axisLabel: {
                            textStyle: {
                                color: '#666',
                                fontSize:'12',
                                align:'left',
                                baseline:'middle'
                            }
                        }
                    },
                    series: [
                        {
                            name: '数量',
                            type: 'bar',
                            data:  [698963,
                                567124,
                                503456,
                                441705,
                                426022,
                                401662,
                                174016,
                                152560,
                                143810,
                                101218
                            ].reverse(),
                            barWidth: 6,
                            // barGap: 10,
                            // smooth: true,
                            label: {
                                normal: {
                                    show: true,
                                    position: 'right',
                                    offset: [5, -2],
                                    textStyle: {
                                        color: '#000',
                                        fontSize: 13
                                    }
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 1, 0,
                                        [
                                            {offset: 0, color: '#fff'},
                                            {offset: 0.5, color: '#5E9DD6'},
                                            {offset: 1, color: '#5E9DD6'}

                                        ]
                                    )
                                }
                            }
                        }]
                }
                
                
阅读 14k
3 个回答

文字水平对齐方式错了,应该是右对齐,默认是右对齐,把yAxis的boundaryGap : false,和 align:'left'去掉,你不要y轴刻度应该设置yAxis axisTick:false, 要用左对齐的话在axisLabel加个margin

      yAxis: {
                        type: 'category',
                        nameLocation:"left",
                        axisTick:false,
                        //boundaryGap : false,
                        data:  ["Apple|iPhone 6","Apple|iPhone 6s","Apple|iPhone 7 Plus","Apple|iPhone 7",
                            "Apple|iPhone 6 Plus","Apple|iPhone 6s Plus","Apple|iPhone 5S","OPPO R9s","HUAWEI MHA-AL00","Vivo X7"
                        ].reverse(),
                        splitLine: {show: false},
                        axisLabel: {
                             margin:150,              
                            textStyle: {
                                color: '#666',
                                fontSize:'12',
                                baseline:'middle',
                                align:'left',               
                            }
                        }
                 
                    },
                    ser

需要调整

boundaryGap: [10, 10]

的值, 试了很多其他属性发现调整到左对齐都是 x y 轴 重回了 , 只有调整

boundaryGap

才可以

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