问题:

今天遇到个小问题,我们系统前端呈现使用了百度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数字太长难以全部显示的更多相关文章

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

    问题 分析 解决办法 问题 先看一下正常的情况 再看一下显示不全的情况 所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全 ...

  2. echarts 纵坐标数字太长显示补全,以及文字倾斜显示

    如上数字太长,显示补全,以及x坐标的月份当数量大的时候也会显示补全: x可以调节纵坐标label的宽度 y2可以调节横坐标label的高度 grid: { x: 100, //默认是80px y: 6 ...

  3. echarts统计图Y轴(或X轴)文字过长问题解决

    echarts 统计图Y轴文字过长 在使用echarts时,出现数值非常大,Y轴又显示不下的情况就需要压缩Y轴数值刻度. 解决方法: yAxis: { type: 'value', axisLabel ...

  4. FusionCharts饼图中label值太长怎么解决

    FusionCharts饼图中label值太长怎么解决 1.使用hoverText属性 <?xml version="1.0" encoding="UTF-8&qu ...

  5. echarts 隐藏Y轴最大最小值label及分割线 ----障眼大发好使

    需求图 1====>label 最大最小值还好弄, yAxis{ axisLabel{ showMinLabel: false, showMaxLabel: false, }} 2====> ...

  6. Echarts设置y轴值间隔 以及设置 barWidth : 30,//柱图宽度

    需求:如图,y轴之间的距离太小,这样就太过于拥挤了,现在要修改echarts里面的属性,设置y轴值间隔让图表看上去舒服一些.     其实很多问题,真的只是因为自己没有好好的看文档,很多文档上面都写的 ...

  7. 坐标轴刻度取值算法-基于魔数数组-源于echarts的y轴刻度计算需求

    本文链接:https://blog.csdn.net/qq_26909801/article/details/96966372数值型坐标轴刻度计算算法前言算法描述上代码代码运行效果结语前言因实习的公司 ...

  8. Echarts x轴文本内容太长的几种解决方案

    Echarts 标签中文本内容太长的时候怎么办 ? - 1对文本进行倾斜 在xAxis.axisLabe中修改rotate的值 xAxis: { data: ["衬衫11111", ...

  9. echarts 双Y轴图表

    直接代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

随机推荐

  1. centos7服务的管理

    centos7上服务管理  author:headsen chen     2017-10-16  16:03:53       1,启动服务(每条都可以) systemctl start httpd ...

  2. selenium 基础(一)

    selenium安装 pip install selenium selenium操作浏览器原理 早期selenium 1.0 用的selenium RC, 后来selenum2集合了selenium1 ...

  3. 归并排序(非递归,Java实现)

    归并排序(非递归):自底向上 public class MergeSort { /** * @param arr 待排序的数组 * @param left 本次归并的左边界 * @param mid ...

  4. java安全框架shiro(一)

    第一个简单的案例 ,通过读取.ini文件的方式模拟登陆, 1.通过Factory工厂的getInstance()方法来获取SecurityManager的实例,实例化Factory需要一个ini文件的 ...

  5. 警示:AL32UTF8字符集不是ZHS16GBK字符集的超集

    今天有一个客户向我咨询:数据库由ZHS16GBK字符集修改为AL32UTF8字符集,发现中文的数据中小部分出现乱码,客户认为AL32UTF8明明可以支持更多的文字,不应该出现这样的情况才对. 从现象看 ...

  6. Android学习笔记2——shape

    Android有很多特别的xml文件,如常用的selector.style以及shape,熟练使用这些xml可以是我们的项目变得更个性化. 一.子标签(corners.gradient.padding ...

  7. 使用selenium时提示:ImportError:No module named selenium

    问题分析: 用的是mac系统,已经通过sudo pip install -U selenium安装好了selenium, 但是无论用命令行还是用sublime导入selenium都会提示错误. 于是查 ...

  8. shell随机生成身份证,姓名,电话,日期,分数,等级和insert语句

    #!/bin/bash#生成随机身份证号,性别,年龄,电话,姓名,日期,分数和对应等级,并生成insert语句#作者AiYS,2018-02-06,转载请注明http://www.cnblogs.co ...

  9. Hibernate学习笔记三 多表

    一对多|多对一 表中的表达 实体中的表达 实体代码: package com.yyb.domain; import java.util.HashSet; import java.util.Set; p ...

  10. RDD概念、特性、缓存策略与容错

    一.RDD概念与特性 1. RDD的概念 RDD(Resilient Distributed Dataset),是指弹性分布式数据集.数据集:Spark中的编程是基于RDD的,将原始数据加载到内存变成 ...