echars的那些坑

在echars学习小记中，我们了解了如何快速有效地入门echars。今天，我们就来聊一下echars中的那些个“坑”，以及如何跳出这些“坑”。

以下聊到的这些坑主要来自于我的经验，所以这篇文章将会不断更新。也欢迎各位分享一下你们的经验，我会及时补充到文章里来。

坑一：配置项 min 和 minInterval 不能同时生效？

场景：你当前的数据很小，小于4；你想将X轴（Y轴同样）的数据设置为非负整数（0和正整数）。你设置了minInterval=1,发现有X轴出现了负数，如下。

option = {
    tooltip : {
        trigger: 'axis',
        axisPointer : {
            type : 'shadow'
        }
    },
    legend: {
        data: ['直接访问', '邮件营销']
    },
    xAxis:  {
        type: 'value',
         minInterval: 1,
         min:1
    },
    yAxis: {
        type: 'category',
        data: ['周一','周二','周三']
    },
    series: [

        {
            name: '直接访问',
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'insideLeft'
                }
            },
            data: [0, 0, 3]
        },
        {
            name: '邮件营销',
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'insideLeft'
                }
            },
            data: [0, 1, 0]
        },
    ]
};

于是，你又设置了 min=0,发现X轴又出现了小数，如下：

option = {
    tooltip : {
        trigger: 'axis',
        axisPointer : {
            type : 'shadow'
        }
    },
    legend: {
        data: ['直接访问', '邮件营销']
    },
    xAxis:  {
         type: 'value',
         minInterval: 1,
         min:0,
    },
    yAxis: {
        type: 'category',
        data: ['周一','周二','周三']
    },
    series: [

        {
            name: '直接访问',
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'insideLeft'
                }
            },
            data: [0, 0, 3]
        },
        {
            name: '邮件营销',
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'insideLeft'
                }
            },
            data: [0, 1, 0]
        },
    ]
};

发现X轴又出现了小数，苦恼，该如何双全呢？这个问题也被官方标记为bug， 详情 。不过别急，办法还是有滴。
解决办法：给X轴同时再设置一个稍大一点的max, 就ok了：

 xAxis:  {
     type: 'value',
     minInterval: 1,
     min:0,
     max:5
}

问题又来了：随着时间的推移，你的数据会越来越大，这意味着你想要的只是当数据很小时，才设置最大值max；当数据很大时，让它自适应。我的解决办法是，默认不设置max，如果某option中的数据都小于5,就用js给 xAxis动态添加配置项 max:8。
有人可能会说：直接给X轴设一个max:’dataMax’不就ok了吗？还用这么麻烦？
但是，当option中的最大值都小于4时，下面这种设置依然会导致X轴出现小数的情况。

xAxis:  {
        type: 'value',
         minInterval: 1,
         min:0,
         max:'dataMax'
    },

注解：minInterval是X轴或Y轴最小单位长度；min是X轴或Y轴最小值；max是X轴或Y轴最大值。

坑二：数据为0时会遮住Y轴文字？

场景：假设你的数据有很多0,就有可能出现上述情况，白色的0将Y轴的文字盖住了一部分，导致文字不清晰。
数据：

option = {
    tooltip : {
        trigger: 'axis',
        axisPointer : {
            type : 'shadow'
        }
    },
    legend: {
        data: ['直接访问', '邮件营销']
    },
    xAxis:  {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['周一','周二','周三']
    },
    series: [

        {
            name: '直接访问',
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'insideRight'
                }
            },
            data: [0, 0, 0]
        },
        {
            name: '邮件营销',
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'insideRight'
                }
            },
            data: [0, 1, 0]
        },
   ]
};

注：这是一个堆积图的option，你可以整个复制到echars样例中，看效果。

解决办法：将series中label的postion参数值设为“insideLeft”。每个label都要变。即为：

label: {
    normal: {
        show: true,
        position: 'insideLeft'
    }
},

注解：label是图形上的文本标签，用于显示数据信息，比如值或名称。position是标签的位置，可以是绝对的像素值如[10, 10]，也可以是相对的百分比[10%, 10%]，或是一些默认值，如’insideLeft’。

本文原创 https://duckhere.blogspot.com/ ，转载请注明出处。