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

问题
分析
解决办法

问题

先看一下正常的情况

再看一下显示不全的情况

所有的数据都是从后台取的，也就是说动态变化的，一开始的时候数据量不大不会出现问题，后面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，发现……没用。

看下图

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

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

解决办法

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

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

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

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

最后的代码如下。这里就只列出修改了的部分了，比原来添加了 grid.left 和 yAxis.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：最后忍不住要吐槽，这几个配置项找了我老半天啊囧

Echarts 折线图y轴标签值太长时显示不全的解决办法相关推荐

echarts折线图不显示y轴值_Echarts 折线图y轴标签值太长时显示不全的解决办法
问题先看一下正常的情况再看一下显示不全的情况所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全的情况. 分析先贴一 ...
Echarts中折线图Y轴数据值太长显示不全-解决办法
正常状态不全的情况所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全的情况代码 <div id="c ...
echarts折线图y轴根据数值自动_Python matplotlib 绘制双Y轴曲线图的示例代码
双X轴的可以理解为共享y轴 ax1=ax.twiny() ax1=plt.twiny() 双Y轴的可以理解为共享x轴 ax1=ax.twinx() ax1=plt.twinx() 自动生成一个例子 ...
echarts折线图y轴根据数值自动_R语言基础绘图教程——第3章：折线图和带状图...
教程代码和文件,关注本公众号,后台回复:R语言基础绘图代码 R基础教程可先阅读:R语言编程基础第一篇:语法基础利用plot()绘制在上一章中我们讲过plot()绘图的基本结构,主要通过type参数 ...
echarts折线图点击x值动态高亮且显示tooltip
预期效果:提示框显示时,相应的x坐标月份高亮(蓝色),同时提示框显示. 实现流程: 1.设置一个变量axisValue用于接收选中x值,当横轴值等于选中的axisValue时,设置蓝色 axisLab ...
Echarts实现折线图Y轴不等距百分比（最终解决方案）
Echarts实现折线图Y轴不等距百分比(最终解决方案-上集) 出现背景解决思路总结附加出现背景最近公司有一个需求,主要是想展示近7日产品的一个良品率(百分率制).但是呢,基本上每天这个 ...
echarts折线图x轴不从0开始
1.问题描述使用折线图展示相关数量时,发现在x轴上,折线不是从0开始的,结束的时候也不是在x最后 .如下图所示: 2.解决问题在echarts图表x轴配置信息中有一个属性来控制是不是从0开始的. ...
echarts折线图曲线，每个值上面添加小圆点或者小圆圈
在折线图中,我们可能会在每个数值上面加小圆点或者小圆圈,只需要在series中加symbol即可,以下是两种效果,当symbol值为none的时候,则没有小圆点或者小圆圈,当值为false或者' '时 ...
echarts 折线图 x轴为时间轴
因为最近项目做监控图,需要折线图的x轴是时间轴,之前不了解,解决以后来写个总结吧. echart 中的折线图,x轴的类型,官方文档为: 其他类型,官网有例子,这里我只写一下time类型的结果: 源代 ...

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

问题

分析

解决办法

Echarts 折线图y轴标签值太长时显示不全的解决办法相关推荐

最新文章

热门文章