1. yAxis: function(){
  2. var yAxis=[];
  3. for(var i=0;i<legend1.length;i++){
  4. var item={
  5. name:legend1[i],
  6. type:'value'
  7. };
  8. yAxis.push(item);
  9. }
  10.  
  11. return yAxis;
  12. }()

这里可以获取后台中的json数据,根据后台封装的y轴的个数来确定图表中到底使用几个坐标轴进行显示。

series中的数据也是根据后台传过来的json数据进行填充的,在series中使用yAxisIndex: i来确定每一条曲线使用哪个坐标轴。

  1. series:function(){
  2. var series=[];
  3. for(var i=0;i<legend1.length;i++){
  4. var item={
  5. data:seriesList[i],
  6. symbol: 'emptydiamond',
  7. name:legend1[i],
  8. barMaxWidth:30,
  9. yAxisIndex: i, //显示不同的坐标轴
  10. type:type
  11. };
  12. series.push(item);
  13. }
  14.  
  15. return series;
  16. }()

其中yAxisIndex,默认为0,在单个图表实例中存在多个y轴的时候使用,所以,我们可以通过设置这个,实现具体的数据使用具体的y轴展示。

具体的效果为:

Echart实现多个y轴,坐标轴的个数及名称由后台传过来的json数据决定。的更多相关文章

  1. chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法[bubuko.com]

    chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文:http://bubuko.com/infodetail-328671.html 默认情况下如下图 Y轴并不是从0开始 ...

  2. Echart 改变X轴、Y轴、折线的颜色和数值

    在操作E-chart时需要根据需求改变颜色和属性 图1: option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu' ...

  3. echart 时间轴、以及y轴值过大但是变化不大显示感觉不出变化的问题+弹出框拖动div事件

    1.时间轴 echart 提供了一种图表,如果x轴是一个时间范围,并且是连续的,如果用传统的数据驱动会很慢,所以用时间轴的方式 function initCurve(_data){ var resul ...

  4. Echart自定义y轴刻度信息2

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. Winform中设置ZedGraph多条Y轴时坐标轴左右显示设置

    场景 Winform中实现ZedGraph的多条Y轴(附源码下载): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1001322 ...

  6. EChart 标题 title 样式,x轴、y轴坐标显示,调整图表位置等

    示例里工作一般情况是够用了,更复杂的可以查询教程: title 官方解说:http://echarts.baidu.com/option.html#title 坐标相关: X轴:http://echa ...

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

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

  8. echart图表中y轴小数位数过长展示效果不佳

    业务中后端返回的精密数据,小数过长,导致所有数据差距不大,在图表中显示重合为一条直线 解决方法设置echart的min属性 min: "dataMin", 但是设置了以后又出现了问 ...

  9. echart如何去掉X 、Y轴的网格线

    1.如何去掉X.Y轴的网格线,关键是splitLine{show:false} xAxis:[{ type:'value', splitNumber:2, scale:true, splitLine: ...

随机推荐

  1. Zabbix点滴记录

    转自 眄眄的闺蜜 简单检查中的icmppingloss[<target>,<packets>,<interval>,<size>,<timeout ...

  2. 新版openvpn for pc使用旧证书问题的处理

    在client.ovpn中增加一句: tls-cipher "DEFAULT:@SECLEVEL=0"

  3. php 查看当前页中的post及get数据

    file_put_contents("log1209.html",date('Y-m-d H:i:s ')."-----<br>",FILE_APP ...

  4. Android 深入浅出 - Android系统启动过程

    Activity的类继承关系及跟踪Activity的启动 Android系统启动过程 https://study.163.com/course/courseLearn.htm?courseId=213 ...

  5. python技巧 显示对象的所有属性

    python技巧 显示对象的所有属性for attr in dir(ad):... print attr+":"+str(getattr(ad,attr))

  6. JAVA回文

    package huiwen; import java.util.Scanner; public class Huiwen { public static void main(String[] arg ...

  7. JVM G1GC参数配置

    https://www.oracle.com/technetwork/articles/java/g1gc-1984535.html         主要这两个参数需要设置下,ParallelGCTh ...

  8. 2018面向对象程序设计(Java)第15周学习指导及要求

    2018面向对象程序设计(Java)第15周学习指导及要求 (2018.12.6-2018.12.9)   学习目标 (1) 掌握Java应用程序打包操作: (2) 了解应用程序存储配置信息的两种方法 ...

  9. apt-get出现的问题

    报的错 E: 无法获得锁 /var/cache/apt/archives/lock – open (11 资源临时不可用) E: 无法锁定下载目录 解决方法一: #:ps -aux (列出进程,形式如 ...

  10. 动态代理 JDK动态代理 CGLIB代理

    代理模式:代理类和被代理类实现共同的接口(或继承),代理类中存有指向被代理类的索引,实际执行时通过调用代理类的方法.实际执行的是被代理类的方法. 而AOP,是通过动态代理实现的. 一.简单来说: JD ...