echarts 使用心得

1.设置图表的位置；

grid:{
      left:'0',
      right:'0',
      bottom:'0',
      containLabel:ture
}

2.x轴文字限制，超出...

xAxis: {
                 triggerEvent: true,
                        type: 'category',
                        data: ['这是名称非常长的商品1', '这是名称比商品1还长很多的商品2', '这同样是名称很长的商品3', '短的商品4'],
                       axisLabel: {
                           formatter: function(value) {
                             var res = value;
                                 if(res.length > 5) {
                                     res = res.substring(0, 4) + "..";
                                 }else{
                                  res = value;
                          }
                                 return res;
                             }
                        }
                     },

3.特殊样式的图表可以去echarts社区去查找实例
4.Echarts 解决饼图文字过长重叠的问题

下面再来说下我的解决方案

第一步：调整文字的显示大小，手机上文字可以更小，这里我用的是8px字号

第二步：设置最小扇区角度，minAngle（最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互）

第三步：avoidLabelOverlap（是否启用防止标签重叠策略，默认默认开启）

第四步：文字换行展示，echarts给我们提供了一个 formatter（标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行）属性。

关键代码如下：

series: [
            {
                type: 'pie',
                clickable:false,　　　　　　 //是否开启点击
                minAngle: 5,           　　 //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
                avoidLabelOverlap: true,   //是否启用防止标签重叠策略
                hoverAnimation:false,　　  //是否开启 hover 在扇区上的放大动画效果。
                silent: true,　　　　　　　　//图形是否不响应和触发鼠标事件
                radius: ['30%', '60%'],
                center: ['50%', '50%'],
                data: [],
                label:{
                    align: 'left',
                    normal:{
                        formatter(v) {//解决文字过长问题
                            let text = Math.round(v.percent)+'%' + '' + v.name
                            if(text.length <= 8)
                            {
                                return text;
                            }else if(text.length > 8 && text.length <= 16){
                                return text = `${text.slice(0,8)}\n${text.slice(8)}`
                            }else if(text.length > 16 && text.length <= 24){
                                return text = `${text.slice(0,8)}\n${text.slice(8,16)}\n${text.slice(16)}`
                            }else if(text.length > 24 && text.length <= 30){
                                return text = `${text.slice(0,8)}\n${text.slice(8,16)}\n${text.slice(16,24)}\n${text.slice(24)}`
                            }else if(text.length > 30){
                                return text = `${text.slice(0,8)}\n${text.slice(8,16)}\n${text.slice(16,24)}\n${text.slice(24,30)}\n${text.slice(30)}`
                            }
                        },
                        textStyle : {
                            fontSize : 8
                        }
                    }
                }
            }

        ],

处理后的展示效果

1042672-20180524112507484-802315122.png

5.echarts x轴文字换行显示

xAxis : [
                                {
                                    splitLine:{show:false},
                                    type : 'category',
                                    data : ['社交人际','沟通交流','心理认知','游戏玩耍','大小运动','生活自理','执行管控','知识常识'],
                                    splitArea:{show:false},
                                    axisLabel: {
                                        show: true,
                                        interval:0,
                                        formatter:function(params) {
                                            var newParamsName = "";
                                            var paramsNameNumber = params.length;
                                            var provideNumber = 2;  //一行显示几个字
                                            var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                                            if (paramsNameNumber > provideNumber) {
                                                for (var p = 0; p < rowNumber; p++) {
                                                    var tempStr = "";
                                                    var start = p * provideNumber;
                                                    var end = start + provideNumber;
                                                    if (p == rowNumber - 1) {
                                                        tempStr = params.substring(start, paramsNameNumber);
                                                    } else {
                                                        tempStr = params.substring(start, end) + "\n";
                                                    }
                                                    newParamsName += tempStr;
                                                }

                                            } else {
                                                newParamsName = params;
                                            }
                                            return newParamsName
                                        },
                                        textStyle: {
                                            color: '#6861a6' //文字颜色
                                        }
                                    }
                                },