echarts折线图不显示y轴值_Echarts 折线图y轴标签值太长时显示不全的解决办法
问题
先看一下正常的情况
再看一下显示不全的情况
所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全的情况。
分析
先贴一下页面代码
HTML
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咯……
解决办法
可以改的地方有下面几个:
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轴的值越来越大的时候就出现了这个显示不全 ...
- PHP导出Excel文件时导出列的数字长度太长时显示不完整或者乱码显示
要导出的文件中包含一列标识符(tag),长度一般都是十几位的字符和数字,例如:170512203334226000000,abcd_abcd_11223344 这样的组合,为了让导出文件的那一列完整的 ...
- Latex图的caption太长,导致信息丢失该怎么办,Latex 图注太长 无法显示
Latex图的caption太长,导致信息丢失该怎么办,Latex 图注太长 无法显示 Latex 图注太长 无法显示 https://blog.csdn.net/weixin_30784501/ar ...
- Chrome内核浏览器显示【您的时钟快了,您计算机的日期和时间不正确】解决办法
Chrome内核浏览器显示[您的时钟快了,您计算机的日期和时间不正确]解决办法 出现问题 问题原因 解决办法 综上 [您的时钟快了,您计算机的日期和时间不正确]解决办法 出现问题 这几天我使用[联想浏 ...
- “此环境变量太大, 此对话框允许将值设置为最长2047个字符”的解决办法
"此环境变量太大, 此对话框允许将值设置为最长2047个字符"的解决办法 新建系统变量: 写入变量名和变量值(变量路径) 选中path,点击编辑 把以前的 变量值(变量路径),用 ...
- 登录onedrive显示无法连接服务器,Win10打不开OneDrive提示“连接到OneDrive时出现问题”怎么解决?...
Win10打不开OneDrive提示"连接到OneDrive时出现问题"怎么解决?很多伙伴在操作Win10系统的时候,都会遇到OneDrive打不开的情况,OneDrive会显示灰 ...
- c# 导出excel 数字太长而显示为科学计数法的解决方法
c# 导出excel 数字太长而显示为科学计数法的解决方法 <td style=\"vnd.ms-excel.numberformat:@\"> {0}</td& ...
- excel2019数字太长无法显示解决办法
描述:excel2019数字太长无法显示解决办法 步骤: 选中数据 选择设置单元格 选择数值,小数位0即可
- 经验:MathType公式在Word中显示不全的解决办法
经验:MathType公式在Word中显示不全的解决办法 更新历史 20190903: 首次发布 注:本文对应的MathType的版本为:7.4.2.480,Microsoft Word的版本为:20 ...
最新文章
- android平板值得买吗,2021年一月更新1000-2000价位最全平板选购指南
- python 查看 nvida 驱动、 cuda、pytorch、tensorflow的版本
- RTP(Robi改造计划)--- 觉得还是搞风火轮(leg-wheel)好
- ecs服务器配置git_基于ECS和NAS搭建个人网盘
- dubbo k8s 服务发现_服务化改造实践(二)| Dubbo + Kubernetes-阿里云开发者社区
- linux cat 脚本,Linux Shell 脚本攻略 读书笔记 -- 201.cat的几种用法
- vue组件间的5种传值方式
- eventproxy
- C# 在DbContext内通过DbSet名称来访问DbSet
- (96)Verilog HDL:点灯设计
- 教师节PSD分层海报设计模板 | 最好的海报,送给最好的老师们
- 【2019上海网络赛:K】Peekaboo(勾股数知c求a和b--数论)
- Redis集群:./redis-trib.rb:24:in `require': no such file to load -- rubygems
- 联想智能云教室_被低估的联想能复制微软之路吗? | 公司观察
- 泪目!java面试八股文是哪些
- 【好文分享】提升早晨工作效率的小tips
- 虚幻引擎4中的实时GI技术
- Opencv 实现 运动模糊的添加(motion blur)与消除(demotion blur)
- RSA 非对称加密算法简述
- 今天是一位朋友的生日,送给她最美丽的祝福.
热门文章
- VTK系列2_椎体的显示及旋转控制
- MVVM架构的优缺点
- crontab定时任务配置(crontab定时任务配置到秒)
- ds5 debug arm64 模拟器
- ubuntu中视频播放器、音乐播放器安装
- java fb app download_fb download app
- 计算机研究生生课题物信息学,华中农业大学信息学院研究生导师简介-李国亮...
- 2021阿里巴巴研发效能峰会干货集(PPT+视频+白皮书+案例)
- Go: sieve高效生成素数(附完整源码)
- sudo和apt是什么的缩写