百度echarts使用--y轴label数字太长难以全部显示
问题:
今天遇到个小问题,我们系统前端呈现使用了百度echarts。在绘制折线图的时候,因为数字过大,导致显示出现了问题。

解决方案:
左边y轴的值默认是根据我们填充进去的值来默认分割的,因为原始值就很大,所以导致显示不下,那么只要我们将显示的值按比例缩小,应该就可以了。
原始值很大:

var map = data.map;
for (var key in map){
var stockCode = key;
option.legend.data.push(stockCode);
var indexData = map[key].value2;
for (var i = 0; i < indexData.length; i++){
if (indexId == '143'){
indexData[i] = indexData[i]/10000;//将原值缩小一万倍
}
}
}
修改单位:
var indexName = data.indexInfo.name;
if (indexId == '143') {
indexName = indexName + '(万)';
}
修改后,显示效果如下:

百度echarts使用--y轴label数字太长难以全部显示的更多相关文章
- Echarts 折线图y轴标签值太长时显示不全的解决办法
问题 分析 解决办法 问题 先看一下正常的情况 再看一下显示不全的情况 所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全 ...
- echarts 纵坐标数字太长显示补全,以及文字倾斜显示
如上数字太长,显示补全,以及x坐标的月份当数量大的时候也会显示补全: x可以调节纵坐标label的宽度 y2可以调节横坐标label的高度 grid: { x: 100, //默认是80px y: 6 ...
- echarts统计图Y轴(或X轴)文字过长问题解决
echarts 统计图Y轴文字过长 在使用echarts时,出现数值非常大,Y轴又显示不下的情况就需要压缩Y轴数值刻度. 解决方法: yAxis: { type: 'value', axisLabel ...
- FusionCharts饼图中label值太长怎么解决
FusionCharts饼图中label值太长怎么解决 1.使用hoverText属性 <?xml version="1.0" encoding="UTF-8&qu ...
- echarts 隐藏Y轴最大最小值label及分割线 ----障眼大发好使
需求图 1====>label 最大最小值还好弄, yAxis{ axisLabel{ showMinLabel: false, showMaxLabel: false, }} 2====> ...
- Echarts设置y轴值间隔 以及设置 barWidth : 30,//柱图宽度
需求:如图,y轴之间的距离太小,这样就太过于拥挤了,现在要修改echarts里面的属性,设置y轴值间隔让图表看上去舒服一些. 其实很多问题,真的只是因为自己没有好好的看文档,很多文档上面都写的 ...
- 坐标轴刻度取值算法-基于魔数数组-源于echarts的y轴刻度计算需求
本文链接:https://blog.csdn.net/qq_26909801/article/details/96966372数值型坐标轴刻度计算算法前言算法描述上代码代码运行效果结语前言因实习的公司 ...
- Echarts x轴文本内容太长的几种解决方案
Echarts 标签中文本内容太长的时候怎么办 ? - 1对文本进行倾斜 在xAxis.axisLabe中修改rotate的值 xAxis: { data: ["衬衫11111", ...
- echarts 双Y轴图表
直接代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
随机推荐
- CentOS7安装最新版git教程
下载编译工具 yum -y groupinstall "Development Tools" 下载依赖包 yum -y install zlib-devel perl-ExtUti ...
- The summary of Interview
面试汇总 运维工程师日常工作内容 自我介绍对公司的了解 系统管理员的职责 进行系统资源管理.设备管理.系统性能管理.安全管理和系统性能监测: 管理的对象 服务器.用户.服务器的进程及系统的各种资源等. ...
- http协议中302和303的区别
http1.0协议中只有302码,没有303状态码:http1.1,在默认情况下,很多服务端基础程序,为了兼容http1.0,在遇到本应响应303时,也给客户端响应了302. 碰到的问题: 场景: 在 ...
- CAS 之 Https And Database Authentication(三)
CAS 之 Https And Database Authentication(三) 标签(空格分隔): CAS sso-examples-guides源码 Intro(介绍) 由上节可知Apereo ...
- C#中的String类
一.String类的方法 1. Trim():清除字符串两端的空格 2. ToLower():将字符串转换为小写 3. Equals():比较两个字符串的值,bool 4. IndexOf(value ...
- Leetcode 35——Search Insert Position
Given a sorted array and a target value, return the index if the target is found. If not, return the ...
- $translate 的用法
translate 的用法 1.在html页面:文本的翻译 <h1 translate>hello world</h1> <h1 translate = 'hello w ...
- alpha冲刺第七天
一.合照 二.项目燃尽图 三.项目进展 问答界面问答内容呈现 设置里的帐号设置呈现 能爬取教务处网站的内容保存到本地数据库 四.明日规划 继续完善各个内容的界面呈现 查找关于如何自动更新爬取内容 搜索 ...
- 20155214&20155216 实验一 开发化境的熟悉
20155214&20155216 实验一 开发化境的熟悉 实验内容: 实验一 开发化境的熟悉-1-交叉编译环境-(使用实验室台式机) 1.建立实验目录"mkdir linux_组员 ...
- Beta冲刺第七天
一.昨天的困难 没有困难. 二.今天进度 1.林洋洋:MD图片上传,修复权限问题,修复本地存储判空问题,修复协作申请没有过滤问题. 2.黄腾达:添加文件链接和邀请链接复制功能,协作树界面优化. 3.张 ...