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'}
            ]
        }
    ]
};