echarts3相关的各种定制化

　　在我刚把项目中的echarts从2.x版本升级到echarts3.x，折腾老久，终于交付了项目的时候，echarts4又出来了，先不管，还是把我echarts3.x遇到的和formatter相关的问题总结一下。

　　1. 第一种情况是折线图或者柱状图的纵坐标：当纵坐标都是0的时候，此时echarts默认的纵坐标是从0到1等分，但是实际场景中可能我们的纵坐标永远是整数，这时候就有点不妥了，如图所示。此时的option为：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [0, 0, 0, 0, 0, 0, 0],
        type: 'line'
    }]
};

                                                    

　　　　　此时需要用到的是echarts的minInterval和max属性，设置纵坐标的间隔为单位长度1，且最大值为5，当然也要兼容值不是全为0的情况。具体配置如下。若要只是如右上图所示，加个单位的话，emmm，formatter加个单位。

yAxis: {
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                // axisLabel: {
                //     formatter: '{value} kg'
                // },
                minInterval: 1,
                max: Math.max.apply(null,value)<=5?5:null
            },

　　2.第二种情况是折线图或柱状图的横坐标：①横坐标过长可以设置成截取前几个字符再加上...的形式，如果不是超级长，可以设置成几个字符换一行；②当浏览器缩放时不能放下所有的横坐标时。如图所示。此时option配置如下：

option = {
    xAxis: {
        type: 'category',
        axisLabel: {
            margin: 2,
            show: true,
            interval: 0
        },
        data: ['超级长的横坐标超级长的横坐标超级长的横坐标超级长的横坐标', '超级长的横坐标超级长的横坐标超级长的横坐标超级长的横坐标2', '超级长的横坐标超级长的横坐标超级长的横坐标超级长的横坐标3', '超级长的横坐标超级长的横坐标超级长的横坐标超级长的横坐标4', '超级长的横坐标超级长的横坐标超级长的横坐标超级长的横坐标5', '超级长的横坐标超级长的横坐标超级长的横坐标超级长的横坐标6', '超级长的横坐标超级长的横坐标超级长的横坐标超级长的横坐标7']
    },
    yAxis: {
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        // axisLabel: {
        //     formatter: '{value} kg'
        // },
        minInterval: 1,
        max: Math.max.apply(null,value)<=5?5:null
            },
    series: [{
        data: [0, 0, 0, 0, 0, 0, 0],
        type: 'line'
    }]
};

 

　　此时，需要用到xAxis的axisLabel的formatter,其实后面的几种情况都大同小异，找到对应的要格式化的文本，然后使用formatter，然后是处理字节还是处理字符长度按需选择嘛，效果如右上图，option修改部分如下：

axisLabel: {
            show: true,
            //interval: 0
            formatter:function(val){
                        var re = '';
                        var length = val.length;
                        var bytes = 0;
                        for (var i = 0; i < length; i++) {
                            var code = val.charCodeAt(i);
                            bytes += code < 256 ? 1 : 2;
                            if (bytes > 16) {
                                re += '...';
                                break;
                            } else {
                                re += val[i];
                            }
                        }
                        return re;
                    }
        },

　　3.当折线图和柱状图的横纵坐标都合格的情况下，比如横坐标很略以后，如果还是想看完整的横坐标内容怎么办？这时候就使用到tooltip了，此处先讨论全局的tooltip，如图所示，超出画布的tooltip,瞬间被测试部的小姐姐提单了

 option = {
     tooltip: {
         trigger: 'axis',
         axisPointer: {
             type: 'shadow'
         },

         show: true,
         borderColor: '#ccc',
         borderWidth: 1
     },
     xAxis: {
         type: 'category',

         axisLabel: {
             show: true,
             //interval: 0
             formatter:function(val){
                         var re = '';
                         var length = val.length;
                         var bytes = 0;
                         for (var i = 0; i < length; i++) {
                             var code = val.charCodeAt(i);
                             bytes += code < 256 ? 1 : 2;
                             if (bytes > 16) {
                                 re += '...';
                                 break;
                             } else {
                                 re += val[i];
                             }
                         }
                         return re;
                     }
         },
         data: ['超级长的横坐标超级长的横坐标超级长的横坐标超级长的横坐标', '超级长的横坐标超级长的横坐标超级长的横坐标超级长的横坐标2', '超级长的横坐标超级长的横坐标超级长的横坐标超级长的横坐标3', '超级长的横坐标超级长的横坐标超级长的横坐标超级长的横坐标4', '超级长的横坐标超级长的横坐标超级长的横坐标超级长的横坐标5', '超级长的横坐标超级长的横坐标超级长的横坐标超级长的横坐标6', '超级长的横坐标超级长的横坐标超级长的横坐标超级长的横坐标7']
     },
     yAxis: {
         axisLine: {
             show: false
         },
         axisTick: {
             show: false
         },
         // axisLabel: {
         //     formatter: '{value} kg'
         // },
         minInterval: 1,
         max: Math.max.apply(null,value)<=5?5:null
             },
     series: [{
         data: [0, 0, 0, 0, 0, 0, 0],
         type: 'line'
     }]
 };

 

　　此时使用到tooltip的position属性，定位到角落里，不设置也行，跟随鼠标移动tooltip，在formatter函数里设置换行，啊哈哈，小圆点是宝宝用css做的，巨丑，忍受一下哈，配置参数如下：

 tooltip: {
         trigger: 'axis',
         axisPointer: {
         },
         borderWidth: 1,
         borderColor: '#ccc',
         padding: 10,
         textStyle: {
             color: '#fff'
         },
         position: function (pos, params, el, elRect, size) {
             var obj = {top: 10};
             obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
             return obj;
         },
         extraCssText: 'width: 170px',
         formatter: function(param){
             param = param[0];
             var re = '';
             var length = param.name.length;
             var bytes = 0;
             for (var i = 0; i < length; i++) {
                 var code = param.name.charCodeAt(i);
                 bytes += code < 256 ? 1 : 2;
                 if (bytes && bytes % 20 === 0) {
                     re += '<br />';
                 } else {
                     re += param.name[i];
                 }
             }
             return [
                 re + '<br/>',
                 '<span style="width:10px;height:10px;border-radius:5px;background-color: #158cba;display:inline-block;margin-right:5px;"></span>' + param.data + '<br/>'
             ].join('');
         }
     },

　　4.第四种情况是用在饼图中，legend里设置图例的显示和ltooltip，以及series里label的formatter，伟岸的UI给我设计了南丁格尔玫瑰图来显示数据TOP10，对，设计稿里巨漂亮，但那也是在完美的数据情况下啊！！测试部的小姐姐们都是从零开始建数据的哇，导致各种奇葩的图表出来。暴走的宝宝配置了如下的南丁格尔玫瑰图数据：

 option = {
     tooltip : {
         trigger: 'item',
         formatter: "{a} <br/>{b} : {c} ({d}%)"
     },
     legend: {
         orient: 'vertical',
         left:'0',
         itemGap:5,
         icon: 'circle',
         data:['rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1','rose2rose2rose2rose2rose2rose2','rose3rose3rose3rose3rose3','rose4rose4rose4rose4rose4','rose5','rose6','rose7','rose8']
     },
     color: ['rgba(13,136,252,1)', 'rgba(13,136,252,.9)', 'rgba(13,136,252,.8)', 'rgba(13,136,252,.7)', 'rgba(13,136,252,.6)', 'rgba(13,136,252,.5)', 'rgba(13,136,252,.4)', 'rgba(13,136,252,.3)', 'rgba(13,136,252,.2)', 'rgba(13,136,252,.1)'],
     calculable : true,
     series : [
         {
             name:'面积模式',
             type:'pie',
             radius : [0, 110],
             center : ['50%', '50%'],
             roseType : 'area',
             label: {
                 normal: {
                     show: false,
                     // formatter:function(params){
                     //     return params.name.length > 5 ? params.name.slice(0,5) + '...' : params.name;
                     // }
                 },
                 emphasis: {
                     show: true
                 }
             },
             data:[
                 {value:5, name:'rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1'},
                 {value:10, name:'rose2rose2rose2rose2rose2rose2'},
                 {value:15, name:'rose3rose3rose3rose3rose3'},
                 {value:20, name:'rose4rose4rose4rose4rose4'},
                 {value:25, name:'rose5'},
                 {value:30, name:'rose6'},
                 {value:35, name:'rose7'},
                 {value:40, name:'rose8'}
             ]
         }
     ]
 };

        

大同小异的formatter，但是，emmmm,记得legend也是 有tooltip和formatter的。至此，宝宝的定制化结束啦，不知道为啥，一点都不想再做这个了，orz....

 var dataOne = ['rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1','rose2rose2rose2rose2rose2rose2','rose3rose3rose3rose3rose3','rose4rose4rose4rose4rose4','rose5','rose6','rose7','rose8'];
 var dataTwo = [5,10,15,20,25,30,35,40];
 option = {
     tooltip: {
                 trigger: 'item',
                 //formatter: "{a} <br/>{b} : {c} ({d}%)"
                 formatter: function(params){
                     //console.log(name);
                     var re = '';
                     var length = params.name.length;
                     for (var i = 0, j = 1; i < length; i++,j++) {
                         if (j && j % 20 === 0) {
                             re += '<br />';
                         } else {
                             re += params.name[i];
                         }
                     }
                     if (params.data.show) {
                         return "无";
                     }
                     return params.seriesName+'<br/>'+'图例：<br/>'+re+'<br/>'+'数量：<br/>'+params.value;
                 }
             },
     legend: {
         orient: 'vertical',
         left:'0',
         itemGap:5,
         icon: 'circle',

         data:['rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1','rose2rose2rose2rose2rose2rose2','rose3rose3rose3rose3rose3','rose4rose4rose4rose4rose4','rose5','rose6','rose7','rose8'],

         tooltip: {
             show: true,
             formatter: function (params) {
                 var re = '';
                 var length = params.name.length;
                 var bytes = 0;
                 for (var i = 0; i < length; i++) {
                     var code = params.name.charCodeAt(i);
                     bytes += code < 256 ? 1 : 2;
                     if (bytes && bytes % 20 === 0) {
                         re += '<br />';
                     } else {
                         re += params.name[i];
                     }
                 }
                 return re;
             },
         },
         formatter: function(name) {
             var index = 0;
             dataOne.forEach(function(value,i){
                 if(value == name){
                     index = i;
                     name = name.length > 8 ? name.slice(0,8) + '...' : name;
                 }
             });
             return name + " - " + dataTwo[index];
         }
     },
     color: ['rgba(13,136,252,1)', 'rgba(13,136,252,.9)', 'rgba(13,136,252,.8)', 'rgba(13,136,252,.7)', 'rgba(13,136,252,.6)', 'rgba(13,136,252,.5)', 'rgba(13,136,252,.4)', 'rgba(13,136,252,.3)', 'rgba(13,136,252,.2)', 'rgba(13,136,252,.1)'],
     calculable : true,
     series : [
         {
             name:'面积模式',
             type:'pie',
             radius : [0, 110],
             center : ['50%', '50%'],
             roseType : 'area',
             label: {
                 normal: {
                     show: false,
                     formatter:function(params){
                         return params.name.length > 5 ? params.name.slice(0,5) + '...' : params.name;
                     }
                 },
                 emphasis: {
                     show: true
                 }
             },
             data:[
                 {value:5, name:'rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1'},
                 {value:10, name:'rose2rose2rose2rose2rose2rose2'},
                 {value:15, name:'rose3rose3rose3rose3rose3'},
                 {value:20, name:'rose4rose4rose4rose4rose4'},
                 {value:25, name:'rose5'},
                 {value:30, name:'rose6'},
                 {value:35, name:'rose7'},
                 {value:40, name:'rose8'}
             ]
         }
     ]
 };