echarts3相關的各類定製化

時間 2019-11-19

標籤 echarts3 echarts 相關各類定製简体版

原文原文鏈接

　　在我剛把項目中的echarts從2.x版本升級到echarts3.x，折騰老久，終於交付了項目的時候，echarts4又出來了，先無論，仍是把我echarts3.x遇到的和formatter相關的問題總結一下。css

　　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加個單位。app

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

　　2.第二種狀況是折線圖或柱狀圖的橫座標：①橫座標過長能夠設置成截取前幾個字符再加上...的形式，若是不是超級長，能夠設置成幾個字符換一行；②當瀏覽器縮放時不能放下全部的橫座標時。如圖所示。此時option配置以下：echarts

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修改部分以下：ide

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,瞬間被測試部的小姐姐提單了函數

 1 option = {
 2     tooltip: {
 3         trigger: 'axis',
 4         axisPointer: {
 5             type: 'shadow'
 6         },
 7 
 8         show: true,
 9         borderColor: '#ccc',
10         borderWidth: 1
11     },
12     xAxis: {
13         type: 'category',
14         
15         axisLabel: {
16             show: true,
17             //interval: 0
18             formatter:function(val){
19                         var re = '';
20                         var length = val.length;
21                         var bytes = 0;
22                         for (var i = 0; i < length; i++) {
23                             var code = val.charCodeAt(i);
24                             bytes += code < 256 ? 1 : 2;
25                             if (bytes > 16) {
26                                 re += '...';
27                                 break;
28                             } else {
29                                 re += val[i];
30                             }
31                         }
32                         return re;
33                     }
34         },
35         data: ['超級長的橫座標超級長的橫座標超級長的橫座標超級長的橫座標', '超級長的橫座標超級長的橫座標超級長的橫座標超級長的橫座標2', '超級長的橫座標超級長的橫座標超級長的橫座標超級長的橫座標3', '超級長的橫座標超級長的橫座標超級長的橫座標超級長的橫座標4', '超級長的橫座標超級長的橫座標超級長的橫座標超級長的橫座標5', '超級長的橫座標超級長的橫座標超級長的橫座標超級長的橫座標6', '超級長的橫座標超級長的橫座標超級長的橫座標超級長的橫座標7']
36     },
37     yAxis: {
38         axisLine: {
39             show: false
40         },
41         axisTick: {
42             show: false
43         },
44         // axisLabel: {
45         //     formatter: '{value} kg'
46         // },
47         minInterval: 1,
48         max: Math.max.apply(null,value)<=5?5:null
49             },
50     series: [{
51         data: [0, 0, 0, 0, 0, 0, 0],
52         type: 'line'
53     }]
54 };

View Code

　　此時使用到tooltip的position屬性，定位到角落裏，不設置也行，跟隨鼠標移動tooltip，在formatter函數裏設置換行，啊哈哈，小圓點是寶寶用css作的，巨醜，忍受一下哈，配置參數以下：測試

 1 tooltip: {
 2         trigger: 'axis',
 3         axisPointer: {
 4         },
 5         borderWidth: 1,
 6         borderColor: '#ccc',
 7         padding: 10,
 8         textStyle: {
 9             color: '#fff'
10         },
11         position: function (pos, params, el, elRect, size) {
12             var obj = {top: 10};
13             obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
14             return obj;
15         },
16         extraCssText: 'width: 170px',
17         formatter: function(param){
18             param = param[0];
19             var re = '';
20             var length = param.name.length;
21             var bytes = 0;
22             for (var i = 0; i < length; i++) {
23                 var code = param.name.charCodeAt(i);
24                 bytes += code < 256 ? 1 : 2;
25                 if (bytes && bytes % 20 === 0) {
26                     re += '<br />';
27                 } else {
28                     re += param.name[i];
29                 }
30             }
31             return [
32                 re + '<br/>',
33                 '<span style="width:10px;height:10px;border-radius:5px;background-color: #158cba;display:inline-block;margin-right:5px;"></span>' + param.data + '<br/>'
34             ].join('');
35         }
36     },

View Code

　　4.第四種狀況是用在餅圖中，legend裏設置圖例的顯示和ltooltip，以及series裏label的formatter，偉岸的UI給我設計了南丁格爾玫瑰圖來顯示數據TOP10，對，設計稿裏巨漂亮，但那也是在完美的數據狀況下啊！！測試部的小姐姐們都是從零開始建數據的哇，致使各類奇葩的圖表出來。暴走的寶寶配置了以下的南丁格爾玫瑰圖數據：spa

 1 option = {
 2     tooltip : {
 3         trigger: 'item',
 4         formatter: "{a} <br/>{b} : {c} ({d}%)"
 5     },
 6     legend: {
 7         orient: 'vertical',
 8         left:'0',
 9         itemGap:5,
10         icon: 'circle',
11         data:['rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1','rose2rose2rose2rose2rose2rose2','rose3rose3rose3rose3rose3','rose4rose4rose4rose4rose4','rose5','rose6','rose7','rose8']
12     },
13     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)'],
14     calculable : true,
15     series : [
16         {
17             name:'面積模式',
18             type:'pie',
19             radius : [0, 110],
20             center : ['50%', '50%'],
21             roseType : 'area',
22             label: {
23                 normal: {
24                     show: false,
25                     // formatter:function(params){
26                     //     return params.name.length > 5 ? params.name.slice(0,5) + '...' : params.name;
27                     // }
28                 },
29                 emphasis: {
30                     show: true
31                 }
32             },
33             data:[
34                 {value:5, name:'rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1'},
35                 {value:10, name:'rose2rose2rose2rose2rose2rose2'},
36                 {value:15, name:'rose3rose3rose3rose3rose3'},
37                 {value:20, name:'rose4rose4rose4rose4rose4'},
38                 {value:25, name:'rose5'},
39                 {value:30, name:'rose6'},
40                 {value:35, name:'rose7'},
41                 {value:40, name:'rose8'}
42             ]
43         }
44     ]
45 };

View Code

大同小異的formatter，可是，emmmm,記得legend也是有tooltip和formatter的。至此，寶寶的定製化結束啦，不知道爲啥，一點都不想再作這個了，orz....設計

 1 var dataOne = ['rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1','rose2rose2rose2rose2rose2rose2','rose3rose3rose3rose3rose3','rose4rose4rose4rose4rose4','rose5','rose6','rose7','rose8'];
 2 var dataTwo = [5,10,15,20,25,30,35,40];
 3 option = {
 4     tooltip: {
 5                 trigger: 'item',
 6                 //formatter: "{a} <br/>{b} : {c} ({d}%)"
 7                 formatter: function(params){
 8                     //console.log(name);
 9                     var re = '';
10                     var length = params.name.length;
11                     for (var i = 0, j = 1; i < length; i++,j++) {
12                         if (j && j % 20 === 0) {
13                             re += '<br />';
14                         } else {
15                             re += params.name[i];
16                         }
17                     }
18                     if (params.data.show) {
19                         return "無";
20                     }
21                     return params.seriesName+'<br/>'+'圖例：<br/>'+re+'<br/>'+'數量：<br/>'+params.value;
22                 }
23             },
24     legend: {
25         orient: 'vertical',
26         left:'0',
27         itemGap:5,
28         icon: 'circle',
29         
30         data:['rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1','rose2rose2rose2rose2rose2rose2','rose3rose3rose3rose3rose3','rose4rose4rose4rose4rose4','rose5','rose6','rose7','rose8'],
31     
32         tooltip: {
33             show: true,
34             formatter: function (params) {
35                 var re = '';
36                 var length = params.name.length;
37                 var bytes = 0;
38                 for (var i = 0; i < length; i++) {
39                     var code = params.name.charCodeAt(i);
40                     bytes += code < 256 ? 1 : 2;
41                     if (bytes && bytes % 20 === 0) {
42                         re += '<br />';
43                     } else {
44                         re += params.name[i];
45                     }
46                 }
47                 return re;
48             },
49         },
50         formatter: function(name) {
51             var index = 0;
52             dataOne.forEach(function(value,i){
53                 if(value == name){
54                     index = i;
55                     name = name.length > 8 ? name.slice(0,8) + '...' : name;
56                 }
57             });
58             return name + " - " + dataTwo[index];
59         }
60     },
61     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)'],
62     calculable : true,
63     series : [
64         {
65             name:'面積模式',
66             type:'pie',
67             radius : [0, 110],
68             center : ['50%', '50%'],
69             roseType : 'area',
70             label: {
71                 normal: {
72                     show: false,
73                     formatter:function(params){
74                         return params.name.length > 5 ? params.name.slice(0,5) + '...' : params.name;
75                     }
76                 },
77                 emphasis: {
78                     show: true
79                 }
80             },
81             data:[
82                 {value:5, name:'rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1'},
83                 {value:10, name:'rose2rose2rose2rose2rose2rose2'},
84                 {value:15, name:'rose3rose3rose3rose3rose3'},
85                 {value:20, name:'rose4rose4rose4rose4rose4'},
86                 {value:25, name:'rose5'},
87                 {value:30, name:'rose6'},
88                 {value:35, name:'rose7'},
89                 {value:40, name:'rose8'}
90             ]
91         }
92     ]
93 };

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。