echarts 折线图多Y轴，每一条Y轴独属于一个区域，折线之间不交集。

1、前景：在echarts中设置多个Y轴的时候，如果不想Y轴的折线有交叉，则需要考虑一下这个方案：
每一条Y轴分为一个区域，使得每一个Y轴都是一个独立的区域，举个例子：四条Y轴，那就是每条Y轴占四分一。但是要怎么实现呢？
先看图：
实现前：折线之间是有交叉的2、实现后：每条折线之间分为区域去显示，毫无交集

3、实现的方法：利用echarts 官方提供的max和min函数，max、min为echart配置option的中的函数,_this是为了解决指向问题

let yAxisList = ['电流','电压','容量','温度'];
let ySettingColorlist = ["#995055", "#55BFC0", "#639ADE", "#5EBE67"];
let _this = this;
let n=0;yAxisList.forEach((res, i) => {let datas = {type: "value",name:  res, //设置Y轴单位position:yAxisList.length == 2? n < 1? "left": "right": n < 2? "left": "right", //判断Y轴的数量scale: true,offset:yAxisList.length == 2? 0: n > 1? parseInt((n - 2) * 50): parseInt(n * 50),axisLine: {show: true,lineStyle: {color: ySettingColorlist[n],},},splitLine: {show: true,},axisTick: {show: true,},max:function(value){let yAxisLists = ['电流','电压','容量','温度'];let lengs = yAxisLists .length;let maxs = Number(value.max);let mins = Number(value.min);if(i==0){// 3为3个区域/**第一条Y轴 */let valueNew = maxs>0?((maxs - mins)*3+maxs):(maxs*3+mins);return lengs==1?null: maxs==0?mins==0?4: (maxs - mins*3): _this.getFloat(valueNew,6);}else if(i==1){/**第二条Y轴 *///第二区域站4分2，也就是最大值需要占3分，最小值需要占一份//第二区域站4分2，也就是最大值需要占3分，最小值需要占一份let valueNew = maxs>0?((maxs - mins)*2+maxs):((maxs-mins)*2+maxs);return maxs==0?mins==0?3: (maxs - mins*2): _this.getFloat(valueNew,6);}else if(i==2){/**第三条Y轴 */let newView = (Number(value.min) - (Number(value.max) - Number(value.min))*2);return  value.min == 0?value.max ==0?-2:_this.getFloat(newView,6):_this.getFloat(newView,6);}else {//第四条Y轴// let newValue  = value.min - ((value.max-value.min)*lengs*(i+1))let newView = (Number(value.min) - (Number(value.max) - Number(value.min))*3);return  value.min == 0?value.max ==0?-3:_this.getFloat(newView,6):_this.getFloat(newView,6);}},min:function(value){let yAxisLists = ['电流','电压','容量','温度'];let lengs = yAxisList.length;if(i==0){/**第一条Y轴 */return lengs==1?null: value.min == 0?0:_this.getFloat(value.min,6);}else if(i==1){/**第二条Y轴 */let newView = (Number(value.min) - (Number(value.max) - Number(value.min)));return  value.min == 0?value.max ==0 ?-1:_this.getFloat(newView,6):_this.getFloat(newView,6);}else if(i==2){/**第三条Y轴 */let newView = (Number(value.min) - (Number(value.max) - Number(value.min))*2);return  value.min == 0?value.max ==0?-2:_this.getFloat(newView,6):_this.getFloat(newView,6);}else {//第四条Y轴// let newValue  = value.min - ((value.max-value.min)*lengs*(i+1))let newView = (Number(value.min) - (Number(value.max) - Number(value.min))*3);return  value.min == 0?value.max ==0?-3:_this.getFloat(newView,6):_this.getFloat(newView,6);}},axisLabel: {interval: 0,},}option.yAxis.push(datas); //option 为echart的option配置//YMap["y" + (n + 1)] = n;// colorMap["y" + (n + 1)] = ySettingColorlist[n];n++;});

4、methods:

getFloat(num,n) {n = n ? parseInt(n) : 0;if(n <= 0) {return Math.round(num);}num = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); //四舍五入num = Number(num).toFixed(n); //补足位数return num;},

echarts 折线图多Y轴，每一条Y轴独属于一个区域，折线之间不交集。相关推荐

Python使用matplotlib函数subplot可视化多个不同颜色的折线图、使用set_major_formatter函数自定义设置y轴数值标签格式为百分比
Python使用matplotlib函数subplot可视化多个不同颜色的折线图.使用set_major_formatter函数自定义设置y轴数值标签格式为百分比目录
JAVA中柱状图和折线图组合,分组折线图、柱状图实现（多条折线图、柱状图同时显示）实现方式...
使用MPAndroidChartLibery实现分组折线图和柱状图. 一.实现步骤: 1.同样需要引入mpandroidchartlibrary-2-1-6.jar :下载地址及介绍见Androi ...
echarts折线图常见配置项分割线虚线样式显示y轴符号设置间隔
option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: { ...
pyqt5,Qchart画折线图,设定多个不同刻度的Y轴,修改自定义折线图的坐标轴,改变折线图的底色
就是这些自己遇到的需求: 如有不对,请大佬不吝赐教. Qchart设定多个不同刻度的Y轴修改自定义折线图的坐标轴改变折线图的底色,底色透明鼠标悬停事件 import datetime impor ...
分组折线图、柱状图实现（多条折线图、柱状图同时显示）实现方式
使用MPAndroidChartLibery实现分组折线图和柱状图. 一.实现步骤: 1.同样需要引入mpandroidchartlibrary-2-1-6.jar :下载地址及介绍见Android ...
python折线图多个颜色_最适合小白学的花色玩Python折线图|画个天气预报
这是菜鸟学Python的第102篇原创文章阅读本文大概需要3分钟前面写一篇关于数据可视化的入门开篇,简单的介绍了一下Matplotlib的使用(小白开始学Python最著名的绘图库),今天我们进一 ...
python生成折线图怎么对特定点做颜色_python使用matplotlib绘制简单的折线图和散点图...
生成数据数据可视化数据可视化指的是通过可视化表示来探索数据,它与数据挖掘机密相关. 安装matplotlib 请访问https://pypi.python.org/pypi/matplotlib/ ...
常用echart图表(柱状图、折线图、饼图、环形进度条、雷达图等等)基础配置和用法、resize()响应、轮播tooltip
一.最简单的使用方式引入官方echart.js即可 <script src="js/echarts.js"></script> 二.页面准备一个DOM容器 ...
pyqtgraph基础入门（二）：使用pyqtgraph绘制折线图（同一坐标轴包含多条折线）
文章目录编写作图方法源码文件现在假设已经用qtdesigner绘制了 .ui 文件,ui文件中有提升为pyqtgraph 类型的widget.同时已经拿到了 .ui 文件转化成的 .py文件, ...

echarts 折线图多Y轴，每一条Y轴独属于一个区域，折线之间不交集。

echarts 折线图多Y轴，每一条Y轴独属于一个区域，折线之间不交集。相关推荐

最新文章

热门文章