echarts Y轴数据类型不同怎么让折线图显示差距不大
如果希望在同一grid中展示不同数据类型的折线(1000或10%),那么展现出来的折线肯定显示差距很大,那么怎么让这两条折线显示效果差不多,在之前的项目中碰到了这个问题
每条折线对应的是不同的数据组,即series的数据组,对每个数据组进行排序,求出最大值,然后将这些最大值放在一个数组里,分别填充到yAixs的max中,这样就互不影响,文字比较绕,直接上代码
eg:
for(var j in this.initVal) {
legendData.push(this.initVal[j]);
var i = ;
var newSeriesData = [];
//遍历店铺汇总数据对象,对本地存储数据进行遍历,下拉框数组与本地数据匹配时
for(var k=; k<$data.length;k++) {
var $obj = this.parameter.dataList.find(obj => {
return obj.label === this.initVal[j];
});
if($obj) {
var $key = $obj.key;
//店铺汇总数据对象里是对象,遍历这个对象
for(var _$key in $data[k]) {
if(_$key === $key) {
newSeriesData.push($data[k][$key]);
i++;
}
seriesData[j] = newSeriesData;
}
}
}
var sd = JSON.parse(JSON.stringify(newSeriesData));
var max = sd.sort(function(a, b) { return b - a; })[] + "";
max = (parseInt(max.substring(, )) + ) + arrPint(max.split(".")[].length - )
yAxisData.push({
type: 'value',
max: max,
axisTick: {
show: false
},
splitLine: {
show: j == ,
lineStyle: {
color: '#CCC'
}
},
axisLabel: {
show: false
},
axisLine: {
lineStyle: {
color: '#CCC'
}
},
}) series.push({
name: this.initVal[j],
type: 'line',
yAxisIndex: j,
data: seriesData[j],
itemStyle: {
normal: {
color: colorList[j],
}
},
// showAllSymbol:true,
});
}
这里yAixs不再是对象,而是数组,里面每一个索引对应一个max
echarts Y轴数据类型不同怎么让折线图显示差距不大的更多相关文章
- echarts Y轴名称显示不全(转载)
转载来源:https://blog.csdn.net/qq8241994/article/details/90720657今天在项目的开发中遇到的一个问题,echarts Y轴左侧的文字太多了,显示不 ...
- 百度echarts使用--y轴label数字太长难以全部显示
问题: 今天遇到个小问题,我们系统前端呈现使用了百度echarts.在绘制折线图的时候,因为数字过大,导致显示出现了问题. 解决方案: 左边y轴的值默认是根据我们填充进去的值来默认分割的,因为原始值就 ...
- echarts Y轴的刻度 跟数据对应---tooltip-formatter
var xAxisData = ['2018-01', '2018-02', '2018-03', '2018-04', '2018-05', '2018-06', '2018-07', '2018- ...
- echarts相关属性设置(1)折线图篇
option = { tooltip: { trigger: 'axis', // axisPointer: { // type: 'cross', // label: { // background ...
- echarts相关属性设置(2)--折线图和柱状图的结合使用
type:bar和line的组合 option = { { tooltip: { trigger: 'axis', axisPointer: { // type: 'shadow' }, // lab ...
- 练习: bs4 简单爬取 + matplotlib 折线图显示 (关键词,职位数量、起薪)
要看一种技术在本地的流行程度,最简单的就是找招聘网站按关键词搜索. 比如今天查到的职位数量是vue 1296个,react 1204个,angular 721个.国际上比较流行的是react,本地市场 ...
- echarts y轴,显示数据,但不显示竖线
在yAxis中插入: axisLine: {show:false}, axisTick: {show:false}, yAxis : [ { show:true, axisLine: {show:fa ...
- echarts Y轴刻度保留几位小数
yAxis: [ { type: 'value', name: '雨量(mm)', nameLocation: 'start', inverse: true, axisLabel: { ...
- Echarts Y轴min显示奇葩问题(做此记录)
项目需求是根据不同情况显示最大值最小值 有9-35 12-50 9-50 三种情况 前面两种可以显示出来 但是9-50的话 最小值9显示不出来 8,7等就可以显示出来 后面想到强制从最小值 ...
随机推荐
- SVG素材整理(原)
why SVG? 1.矢量的国际图形标准,以后随着浏览器的发展,相信矢量会更多的出现 2.illustartor等多数矢量绘图软件可以导出为这种格式 so SVG现状 基本介绍:http:// ...
- 浅析C语言中assert的用法(转)
原文地址:http://www.jb51.net/article/39685.htm 以下是对C语言中assert的使用方法进行了介绍,需要的朋友可以参考下. assert宏的原型定义在<ass ...
- easyUI form sumit 中文乱码
jsp 编码方式: pageEncoding="UTF-8" tomcat 编码方式: <Connector connectionTimeout="20000&qu ...
- Http Live Streaming 实现iphone在线播放视频[转]
http://hi.baidu.com/lphack/item/83865611c5f82c8988a956df 本人新手,难免会出错,请各位指点! 最近要做一个项目,是通过iphone来播放工厂摄像 ...
- Spring学习整理-MyEclipse设置xml自动提示
操作流程如下图: 1.找到:MyEclipse中打开window–>Preferences–>MyEclipse –>Files and Editors –>XML–>X ...
- duilib入门简明教程 -- 第一个程序 Hello World(3)
小伙伴们有点迫不及待了么,来看一看Hello World吧: 新建一个空的win32项目,新建一个main.cpp文件,将以下代码复制进去: #include <windows.h> #i ...
- 变量声明和定义的关系------c++ primer
为了允许把程序分成多个逻辑部分来编写,c++语言支持分离式编译机制 为了支持分离式编译,c++语言把声明和定义区分开来.声明(declaration)使得名字为程序所知,一个文件如果想使用别处定义的名 ...
- java关键字(更新)
1.final: ①final修饰类:该类不能被继承: ②final修饰方法:该方法不能被子类重写: ③final修饰变量:一.修饰基本数据类型变量,必须初始化,且值不能被改变:二.修饰引用数据类型变 ...
- win7系统电脑显示windows副本不是正版怎么办
win7系统电脑显示windows副本,可以:在开始输入框中输入cmd——以管理员权限运行——在命令行中输入SLMGR -REARM,——重启.
- loj #2305. 「NOI2017」游戏
#2305. 「NOI2017」游戏 题目描述 小 L 计划进行 nnn 场游戏,每场游戏使用一张地图,小 L 会选择一辆车在该地图上完成游戏. 小 L 的赛车有三辆,分别用大写字母 AAA.BBB. ...