如果希望在同一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轴数据类型不同怎么让折线图显示差距不大的更多相关文章

  1. echarts Y轴名称显示不全(转载)

    转载来源:https://blog.csdn.net/qq8241994/article/details/90720657今天在项目的开发中遇到的一个问题,echarts Y轴左侧的文字太多了,显示不 ...

  2. 百度echarts使用--y轴label数字太长难以全部显示

    问题: 今天遇到个小问题,我们系统前端呈现使用了百度echarts.在绘制折线图的时候,因为数字过大,导致显示出现了问题. 解决方案: 左边y轴的值默认是根据我们填充进去的值来默认分割的,因为原始值就 ...

  3. echarts Y轴的刻度 跟数据对应---tooltip-formatter

    var xAxisData = ['2018-01', '2018-02', '2018-03', '2018-04', '2018-05', '2018-06', '2018-07', '2018- ...

  4. echarts相关属性设置(1)折线图篇

    option = { tooltip: { trigger: 'axis', // axisPointer: { // type: 'cross', // label: { // background ...

  5. echarts相关属性设置(2)--折线图和柱状图的结合使用

    type:bar和line的组合 option = { { tooltip: { trigger: 'axis', axisPointer: { // type: 'shadow' }, // lab ...

  6. 练习: bs4 简单爬取 + matplotlib 折线图显示 (关键词,职位数量、起薪)

    要看一种技术在本地的流行程度,最简单的就是找招聘网站按关键词搜索. 比如今天查到的职位数量是vue 1296个,react 1204个,angular 721个.国际上比较流行的是react,本地市场 ...

  7. echarts y轴,显示数据,但不显示竖线

    在yAxis中插入: axisLine: {show:false}, axisTick: {show:false}, yAxis : [ { show:true, axisLine: {show:fa ...

  8. echarts Y轴刻度保留几位小数

    yAxis: [ { type: 'value', name: '雨量(mm)', nameLocation: 'start', inverse: true, axisLabel: {         ...

  9. Echarts Y轴min显示奇葩问题(做此记录)

    项目需求是根据不同情况显示最大值最小值   有9-35  12-50 9-50 三种情况 前面两种可以显示出来  但是9-50的话  最小值9显示不出来  8,7等就可以显示出来 后面想到强制从最小值 ...

随机推荐

  1. Redis主从服务部署

    Redis__WindowsServer主从服务部署及调用实例       一.先谈谈单个Redis服务的安装         使用的redis是2.8.17版本,从官网下载解压缩后文件内容为:   ...

  2. Go 的垃圾回收机制在实践中有哪些需要注意的地方(转)

    在网上看到一篇非常好的文章http://www.zhihu.com/question/21615032,转载如下: go的gc还不完善但也不算不靠谱,关键看怎么用,尽量不要创建大量对象,也尽量不要频繁 ...

  3. 修改vscode caipeiyu.writeCnblog ,简化博客发布

    修改vscode caipeiyu.writeCnblog ,简化博客发布 1. 安装caipeiyu.writeCnblog vscode的博客园文章发布插件WriteCnblog : https: ...

  4. fwrite()

    注:fwrite(),fread -可对数据块读写,且数据为二进制,文本下查看为乱码,文件的打开方式为 “b*” 实例: 写入二进制数据 for (int i = 0; i < SN; i++) ...

  5. 修改Tomcat主目录

    在默认安装后,tomcat的主目录是webapps/root目录,如果我们想改变tomcat的主目录的话可以这样做: 1 %TOMCAT_HOME%/webapps/下直接创建,这种方法有一个缺点,就 ...

  6. Jenkins忘记密码

    当Jenkins密码忘记时,可以去Jenkins的安装目录下的users\用户名_xxxxx\config.conf文件下找下找到<passwordHash></passwordHa ...

  7. Codeforces Round #546 (Div. 2)D(贪心,思维,SET,VECTOR,模拟)

    #include<bits/stdc++.h>using namespace std;int a[300007],b[500007],c[500007];set<int>st[ ...

  8. 5w5:第五周程序填空题1

    描述 写一个MyString 类,使得下面程序的输出结果是: 1. abcd-efgh-abcd- 2. abcd- 3. 4. abcd-efgh- 5. efgh- 6. c 7. abcd- 8 ...

  9. node.js安装以及git 的使用说明

     第一步:安装node.js: Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.   Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高 ...

  10. 【bzoj4103】[Thu Summer Camp 2015]异或运算 可持久化trie树

    Description 给定长度为n的数列X={x1,x2,...,xn}和长度为m的数列Y={y1,y2,...,ym},令矩阵A中第i行第j列的值Aij=xi xor yj,每次询问给定矩形区域i ...