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

echarts3相关的各种定制化

　　　　　此时需要用到的是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'
    }]
};

echarts3相关的各种定制化

　　此时，需要用到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,瞬间被测试部的小姐姐提单了

 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