Echart实现多个y轴,坐标轴的个数及名称由后台传过来的json数据决定。
yAxis: function(){
var yAxis=[];
for(var i=0;i<legend1.length;i++){
var item={
name:legend1[i],
type:'value'
};
yAxis.push(item);
}
return yAxis;
}()
这里可以获取后台中的json数据,根据后台封装的y轴的个数来确定图表中到底使用几个坐标轴进行显示。
series中的数据也是根据后台传过来的json数据进行填充的,在series中使用yAxisIndex: i来确定每一条曲线使用哪个坐标轴。
series:function(){
var series=[];
for(var i=0;i<legend1.length;i++){
var item={
data:seriesList[i],
symbol: 'emptydiamond',
name:legend1[i],
barMaxWidth:30,
yAxisIndex: i, //显示不同的坐标轴
type:type
};
series.push(item);
}
return series;
}()
其中yAxisIndex,默认为0,在单个图表实例中存在多个y轴的时候使用,所以,我们可以通过设置这个,实现具体的数据使用具体的y轴展示。
具体的效果为:

Echart实现多个y轴,坐标轴的个数及名称由后台传过来的json数据决定。的更多相关文章
- chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法[bubuko.com]
chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文:http://bubuko.com/infodetail-328671.html 默认情况下如下图 Y轴并不是从0开始 ...
- Echart 改变X轴、Y轴、折线的颜色和数值
在操作E-chart时需要根据需求改变颜色和属性 图1: option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu' ...
- echart 时间轴、以及y轴值过大但是变化不大显示感觉不出变化的问题+弹出框拖动div事件
1.时间轴 echart 提供了一种图表,如果x轴是一个时间范围,并且是连续的,如果用传统的数据驱动会很慢,所以用时间轴的方式 function initCurve(_data){ var resul ...
- Echart自定义y轴刻度信息2
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Winform中设置ZedGraph多条Y轴时坐标轴左右显示设置
场景 Winform中实现ZedGraph的多条Y轴(附源码下载): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1001322 ...
- EChart 标题 title 样式,x轴、y轴坐标显示,调整图表位置等
示例里工作一般情况是够用了,更复杂的可以查询教程: title 官方解说:http://echarts.baidu.com/option.html#title 坐标相关: X轴:http://echa ...
- 坐标轴刻度取值算法-基于魔数数组-源于echarts的y轴刻度计算需求
本文链接:https://blog.csdn.net/qq_26909801/article/details/96966372数值型坐标轴刻度计算算法前言算法描述上代码代码运行效果结语前言因实习的公司 ...
- echart图表中y轴小数位数过长展示效果不佳
业务中后端返回的精密数据,小数过长,导致所有数据差距不大,在图表中显示重合为一条直线 解决方法设置echart的min属性 min: "dataMin", 但是设置了以后又出现了问 ...
- echart如何去掉X 、Y轴的网格线
1.如何去掉X.Y轴的网格线,关键是splitLine{show:false} xAxis:[{ type:'value', splitNumber:2, scale:true, splitLine: ...
随机推荐
- ReactiveX 学习笔记(9)工具类操作符
Observable Utility Operators 本文的主题为处理 Observable 的实用工具类操作符. 这里的 Observable 实质上是可观察的数据流. RxJava操作符(六) ...
- 简单几步手工扩容LVM(笔记)
参考文档:https://www.cnblogs.com/einyboy/archive/2012/05/31/2528661.html 1.查看磁盘是否被系统认出: fdisk -l 如显示加的磁盘 ...
- [CI]CodeIgniter视图 & 模型 & 控制器
---------------------------------------------------------------------------------------------------- ...
- 8.mysql-基础.md
目录 数据库管理 查看当前软件中的数据库 工具 创建数据库 删除数据 查看字符集 修改数据库 表管理 进入数据库 查看表 创建表 查看表结构 删除表 修改表 添加字段 删除字段 修改字段名称 修改字段 ...
- HTML+CSS基础课程三
1.文字排版--字体 我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性.下面我们来看一个例子,下面代码实现:为网页中的文字设置字体为宋体. body{font-family:&quo ...
- 小程序:pages/index/index/出现脚本错误或未正确调用Page()
第一次尝试玩小程序,配置好以后报错.pages/index/index/出现脚本错误或未正确调用Page() 才发现解决的方式是:新建的文件默认是没有page()的,所以你需要在.js文件中加上Pag ...
- spring boot 代理(not eligible for auto-proxying)
spring 事务机制网上的案例很多,关于事务 不能回滚也有很多的类型,不同的问题有不同的处理方案,本篇博客主要介绍两种事务不能回滚的问题解决方案: 问题一: 在同一个对象中有两个方法,分别未方 ...
- appium的内存泄露问题
appium的一个内存泄露的问题 标签(空格分隔): appium 我们在做移动端的测试后时候,经常会用到appium 但是有时候我们跑一个小时候/2个小时候时候,会遇到appium报错的信息: ap ...
- day25 面向对象之多态和鸭子类型
1.封装方法 如何封装:给方法名称前面加上双下划线 # ATM 的取款功能 # 1.插入银行卡 2.输入密码 3.选择取款金额 4.取款 class ATM: def __insert_card(se ...
- 【C++】子类访问父类typedef的问题
class A { public: typedef int* pointer; }; class B :public A { public: pointer b; }; 这段代码运行没有问题,子类继承 ...