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轴标签值过长 显示
参考: https://blog.csdn.net/dandelion_drq/article/details/79270597 改变Y轴单位:https://www.cnblogs.com/cons ...
- 百度echarts使用--y轴label数字太长难以全部显示
问题: 今天遇到个小问题,我们系统前端呈现使用了百度echarts.在绘制折线图的时候,因为数字过大,导致显示出现了问题. 解决方案: 左边y轴的值默认是根据我们填充进去的值来默认分割的,因为原始值就 ...
- layui的select下拉框太长被遮挡了的解决办法
layui的select下拉框太长采用滚动条的形式出现,可以给select的dl加一个最大高度,具体的效果如下图 .layui-form-select dl { max-height:160px; }
- d3.js 教程 模仿echarts折线图
今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 c ...
- 实现Echarts折线图的虚实转换
需求:医院的体温单,在统计体温时,对于正常情况下统计的体温数据,需要显示实线:对于进行物理降温后统计的体温数据,需要显示虚线. 现有的体温单是运用 Echarts 折线图,统一用实线显示.因此在这基础 ...
- Highcharts属性与Y轴数据值刻度显示Y轴最小最大值
Highcharts 官网:https://www.hcharts.cn/demo/highcharts Highcharts API文档:https://api.hcharts.cn/highcha ...
- ECharts折线图堆叠设置为不堆叠的方法
下图是ECharts折线图堆叠的官方源码,设置折线图不堆叠只需要将每一个stack的值设置为不一样的名称或者将stack属性删除即可. option = { title: { text: '折线图堆叠 ...
- echarts折线图动态改变数据时的一个bug
echarts折线图中当增加dataZoom,修改start大于0的时候,会出现折线混乱,变成竖直的线,绘制有问题. 解决方法,在dataZoom中增加filterMode: 'empty' http ...
- echarts折线图,数据切换时(最近七天)绘图不合理现象
echarts折线图,当进行数据切换时存在绘制不合理的问题,数据没错,但绘制不对. 两个0之间的连线应该是平滑直线,如图: 正确的显示: 解决: 在myCharts.setOption(option) ...
随机推荐
- UWP:使用Composition实现类似安卓的水波纹Ripple效果
先放效果图: 首先,建立一个RippleHelper.cs文件,然后建立以下附加属性: IsFillEnable:是否扩大到整个控件 RippleDuration:持续时间 RippleRadius: ...
- android使用JSON数据和服务器进行交互
//点击按钮发送反馈信息给服务端,成功则进入优惠券界面 Button upload = (Button) findViewById(R.id.upload); final String finalLa ...
- Numpy库的下载及安装(吐血总结)
Python很火,我也下了个来耍耍一阵子.可是渐渐地,我已经不满足于它的基本库了,我把目光转到了Numpy~~~~~ 然而想法总是比现实容易,因为我之前下的是Python3.3.x,所有没有自带pip ...
- if语句2017-03-17
1.If语句: if(判断条件){ 判断为true的时候执行的语句 } else{ 判断为false的时候执行的语句 } 2.If else语句: if(判断条件){ 判断为true的时 ...
- 忘记root密码---单用户模式进入及操作
修改root密码----------------单用户模式操作 个人原创博客,转载请注明,否则追究法律责任 1,开机后,迅速按下任意键 2,选择第二个:内核,按e 3,在quient后面按空格 1 或 ...
- 浅析C#之委托、Action、Func
一.委托 1.1 委托的定义 delegate(委托)是一种可用于封装命名方法或匿名方法的引用类型, 委托类似于 C++ 中的函数指针: .Net通过委托来提供回调函数机制. 声明一个委托类型 int ...
- python 一篇就能理解函数基础
一,函数是什么? 函数一词来源于数学,但编程中的「函数」概念,与数学中的函数是有很大不同的,具体区别,我们后面会讲,编程中的函数在英文中也有很多不同的叫法.在BASIC中叫做subroutine(子过 ...
- return false与return true的区别
<a href="http://www.baidu.com" onclick="alert(11);return true;alert(22)">链 ...
- poj-1012-约瑟夫问题
Description The Joseph's problem is notoriously known. For those who are not familiar with the origi ...
- python处理点云数据并生成三维点云模型
1.python代码: 1 import numpy as np 2 import matplotlib.pyplot as plt 3 from mpl_toolkits.mplot3d impor ...