饼图的legend可以改变排列方式吗

clipboard.png

clipboard.png

希望与现实总是相差辣么大。。请问这里可以怎么调整吗?
谢谢解惑

我做出来的效果图

clipboard.png

代码


var phoneModel = echarts.init(document.getElementById('phone-model'));var option = {

title: {
    text: '手机终端',
    textStyle: {
        color: '#23B7E4'
    }
},
tooltip: {
    show: false
},
legend: {
    x : '70%',
    y : '25%',
    orient: 'vertical',
    align: 'right',
    data:['IPHONE','华为','索尼','三星','VIVO','OPPO','小米','魅族','中兴','金立','联想','努比亚','乐视','一加','酷派','HTC', '诺基亚','美图','格力','坚果']
},
calculable : true,
series : [
    {
        name:'半径模式',
        type:'pie',
        radius : [20, 110],
        center : ['25%', '50%'],
        roseType : 'radius',
        avoidLabelOverlap: false,
        label: {
            normal: {
                show: false
            }
        },
        labelLine: {
            normal: {
                show: false
            }
        },
        data:[
            {value:10, name:'IPHONE'},
            {value:5, name:'华为'},
            {value:15, name:'索尼'},
            {value:25, name:'三星'},
            {value:20, name:'VIVO'},
            {value:35, name:'OPPO'},
            {value:30, name:'小米'},
            {value:25, name:'魅族'},
            {value:20, name:'中兴'},
            {value:35, name:'金立'},
            {value:30, name:'联想'},
            {value:25, name:'努比亚'},
            {value:20, name:'乐视'},
            {value:35, name:'一加'},
            {value:30, name:'酷派'},
            {value:25, name:'HTC'},
            {value:20, name:'诺基亚'},
            {value:35, name:'美图'},
            {value:30, name:'格力'},
            {value:40, name:'坚果'}
        ]
    }
]
};phoneModel.setOption(option);
阅读 16.3k
2 个回答

legend 里有宽高 他默认自适应 你根据数据个数设置legend宽高

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