echarts文本标签显示问题和图例形状修改

一.坐标轴文本标签显示问题

1. 对于文本标签长度过长显示不全的问题，通过调节grid的top、left、right和bottom值来增大坐标轴的四周边距：

grid: {
    top: 34,
    right: 15,
    left:10,
    bottom: 30
}

2. 上述方法适用于已知文字长度，但有时坐标轴文本标签是通过向后台请求接口动态获取的，这时文字长度我们是未知的。可以在grid中添加containLabel解决：

grid: {
    top: 34,
    right: 15,
    left:10,
    bottom: 30,
    containLabel: true
}

3.有时候也会遇到文本标签长度过长，不想全部显示的情况，这是就可以对文本标签进行截取或换行显示处理：
（1）换行

var cityName = ["北京北京北京北京北京",
                "天津天津天津天津天津天津",
                "上海上海上海上海上海上海",
                "广州广州广州广州广州广州广州"],
    newCityName = [],
    newNameItem,
    nameItem;
for(var j = 0,len = cityName.length; j < len; j++){
    nameItem = cityName[j];
    newNameItem = nameItem.replace(/(.{6})/g,'$1\n');//对原字符串进行换行处理，超过6位后换行
    newCityName.push(newNameItem)
}

（2）截取

var cityName = ["北京北京北京北京北京",
                "天津天津天津天津天津天津",
                "上海上海上海上海上海上海",
                "广州广州广州广州广州广州广州"],
    newCityName = [],
    newNameItem,
    nameItem;
for(var j = 0,len = cityName.length; j < len; j++){
    nameItem = cityName[j];
    newNameItem = nameItem.slice(0,6);//对原数据进行字符串截取
    newCityName.push(newNameItem)
}

4.对于文本标签长度不是很长的情况，可以采取旋转的方式显示：

xAxis: {
    type : 'category',
    axisLabel: {
        rotate: -50,//旋转的角度从 -90 度到 90 度。正值为逆时针旋转，负值为顺时针旋转。
        color: '#999',
        textStyle:{
            fontSize:12
        }
    }

二、图例（legend）形状设置

legend: {
    icon: 'rect',//矩形
    //icon:circle 圆形
    //icon:arrow 箭头
    //更多形状可以参阅官方API https://www.echartsjs.com/option.html#legend.data.icon
    itemWidth: 20,//图例宽度设置
    itemHeight: 10,//图例高度设置
    top: 10,//离容器上侧的距离
    left：center,//图例离容器左侧的距离
    itemGap: 30//图例每项之间的间隔
}