Echarts 折线图y轴标签值太长时显示不全的解决办…

2018-06-24 01:30:25来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

  • 问题
  • 分析
  • 解决办法

 


问题

先看一下正常的情况
这里写图片描述


再看一下显示不全的情况
这里写图片描述
所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全的情况。


分析

先贴一下页面代码

HTML

<div class="row-wrapper">
    <div class="div-flex" style="text-align:center">
        <div class="chart-tab selected" id="chart-tab0">最近30天</div>
        <div class="chart-tab" id="chart-tab1">最近15周</div>
        <div class="chart-tab" id="chart-tab2" style="border-right: 1px #dcdcdc solid;">最近12个月</div>
    </div>
    <div id="chart-line"></div>
</div>

CSS

.row-wrapper {
    padding: 10px 15px;
    border-top: 8px #eee solid;
    font-size: 15px;
    color: #737373;
}

.chart-tab {
    flex: 1;
    border-top: 1px #dcdcdc solid;
    border-left: 1px #dcdcdc solid;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.div-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}

#chart-line {
    height: 26rem;
    padding-left: 14px;
    padding-top: 10px;
    border: 1px #dcdcdc solid;
}

.selected {
    background-color: #EAEAEA;
}

JS(这里只贴跟折线图有关的部分)

var lineChart = echarts.init(document.getElementById('chart-line'));

// 折线图配置
option = {
    tooltip: {
        trigger: 'axis',
        hideDelay: '300'
    },
    xAxis: {
        show: false,
        type: 'category',
        data: [1, 2, 3, 4, 5, 6, 7],
        axisTick: {
            inside: true,
            alignWithLabel: true
        }
    },
    yAxis: {
        type: 'value',
        name: '营业额(元)',
        axisTick: {
            inside: true
        },
        scale: true
    },
    series: [{
        name: '营业额',
        type: 'line',
        data: [1100000, 2000000, 450000, 1370000, 1200000, 4030000, 2350000], // 因为是要分析的是前端问题,这里我就直接写一组很大的数据了,不管跟后台交互部分
        lineStyle: {
            normal: {
                color: '#82c26b'
            }
        },
        itemStyle: {
            normal: {
                color: '#82c26b'
            }
        }
    }]
};

lineChart.setOption(option);

然后页面运行的时候生成的html是这样的
这里写图片描述

可以看到 id=chart-line 的 div 是我定义的,而它里面多了两个元素,一个 div 和一个 canvas。这两个就是 Echarts 运行之后添加上去的,其中 canvas 就是图表本身,外层的 div 是一个装它的容器。
于是我尝试一下修改这几个元素的 width、margin、padding,发现……没用。
这里写图片描述

看下图
这里写图片描述
修改了marginpadding 的之后在 chrome的debug模式下看 canvas 是这样的,能看到其实y轴文字部分还是在content(蓝色部分)里面的,所以就能明白为什么修改 canvasmargin、padding 不会起作用了。
于是能得出结论,这是 canvas 绘图的时候就定了的,所以要通过修改传给 echarts 的参数来修改。

好吧,那咱们就去官网看API咯……


解决办法

官网在此:http://echarts.baidu.com/

我们要看的是配置项的部分:http://echarts.baidu.com/option.html#title

可以改的地方有下面几个:

  1. yAxis.axisLabel.margin:刻度标签与轴线之间的距离。默认值是8,可以改小一点。不过本来的值已经很小了,这个没多大作用。
  2. yAxis.axisLabel.formatter:刻度标签的内容格式器,支持字符串模板和回调函数两种形式。比如可以设置太长了换行之类的。
  3. grid.left:grid 组件离容器左侧的距离。默认值是10%。

最后的代码如下。这里就只列出修改了的部分了,比原来添加了 grid.leftyAxis.axisLabel

option = {
    ...
    yAxis: {
        type: 'value',
        name: '营业额(元)',
        axisTick: {
            inside: true
        },
        scale: true,
        axisLabel: {
            margin: 2,
            formatter: function (value, index) {
                if (value >= 10000 && value < 10000000) {
                    value = value / 10000 + "万";
                } else if (value >= 10000000) {
                    value = value / 10000000 + "千万";
                }
                return value;
            }
        },
    },
    grid: {
        left: 35
    },
    ...
};

最终效果还行。。
这里写图片描述


PS:最后忍不住要吐槽,这几个配置项找了我老半天啊囧

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:react生命周期方法

下一篇:js判断IE浏览器及版本