Echarts的legend多列显示,并设置列之间距离

十点数据 2月前 ⋅ 273 阅读

有10个legend,要分左右显示,并且每五个字换行显示

前者很快就解决出来了,后者换行显示的话文字挨得很近,可以通过设置legend的right属性进行列间隔设置。

"legend":[
{
    "icon": "circle", 
    "right": "39%", 
    "top": "5%", 
    "itemGap": 15, 
    "itemWidth": 10, 
    "orient": "vertical", 
    "data": [
        "地税税务\n登记信息", "市人口规模及\n分布情况(年度)","商事主题\n基础信息", "水雨情信息","企业驰名商标和\n著名商标信息"
        ], 
        "formatter": function (params) {
                if(params.indexOf('\n') == -1){
                    return params;
                }else{
                  return '{white|'+params.split('\n')[0]+'}\n'+params.split('\n')[1];
                }
            }, 
        "textStyle": {
            "rich": {
                "white": {
                    "color": "#fff", 
                    "fontSize": 12, 
                    "padding": [  6,0,0,0]
                }
            }
        }
    }, 
    {
        "icon": "circle", 
        "right": "6%", 
        "top": "5%", 
        "itemGap": 15, 
        "itemWidth": 10, 
        "orient": "vertical", 
        "data":` [
            "特色产业(广东省\n专业镇信息)","文化设施名录","道路客运\n企业信息","高管人员信息","机动车交通违法\n监控抓拍位置信息" ], `
        "formatter": function (params) {
                if(params.indexOf('\n') == -1){
                    return params
                }else{
                    return '{white|'+params.split('\n')[0]+'}\n'+params.split('\n')[1];
                }
            }
, 
        "textStyle": {
            "rich": {
                "white": {
                    "color": "#fff", 
                    "fontSize": 12, 
                    "padding": [6, 0, 0,  0   ]
                }
            }
        }
    }
]

全部评论: 0

    我有话说: