echarts双Y轴时,如何让两边刻度保持一致

2023-12-31 16:18

本文主要是介绍echarts双Y轴时,如何让两边刻度保持一致,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

参考地址:https://blog.csdn.net/qq_40845885/article/details/82108525

问题:双Y轴,刻度不一样,会出现两边的Y轴线不在同一刻度上,类似下图

在这里插入图片描述

解决思路:求数据的最大最小值,计算出合适的刻度值,两边保持一致

1、计算最大最小值得函数

//计算最大值
function calMax(arr) {let max = Math.max(...arr);let maxint = Math.ceil(max / 9.5); // 不让最高的值超过最上面的刻度let maxval = maxint * 10; // 让显示的刻度是整数// 为了防止数据为0时,Y轴不显示,给个最大值if(maxval == 0){ maxval = 1 } return maxval;
}//计算最小值
function calMin(arr) {let min = Math.min(...arr);let minint = Math.floor(min / 10);let minval = minint * 10;//让显示的刻度是整数return minval;
}

2、取最大最小值

// currentData是我的两组数据(柱状图和折线图)
let Max1,Min1,Max2,Min2;
if(currentData){Max1 = calMax(currentData.value[0]);Min1 = calMin(currentData.value[0]);Max2 = calMax(currentData.value[1]);Min2 = calMin(currentData.value[1]);
}

3、设置Y轴

yAxis: [{name: "单位:(人)",type: 'value',min:Min1,max:Max1,splitNumber: 5,interval: (Max1 - Min1) / 5},{type: 'value',min:Min2,max:Max2,splitNumber: 5,interval: (Max2 - Min2) / 5}
],

4、效果图

(由于折线图数据为0,所以图中折线效果不明显,实际是没啥问题)
在这里插入图片描述
在这里插入图片描述

这篇关于echarts双Y轴时,如何让两边刻度保持一致的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/556552

相关文章

Echarts使用笔记--饼图,柱状图

开始做前端了,感觉自己是要变成全栈工程师了。。。 今天使用了echart,用之前觉得好高大上好厉害,肯定很复杂。用了以后才发现,使用起来超简单,当然,精通很难,里面的各种配置太多了,本文记录一下自己用到的东西。 echart使用 现在直接引用js文件就可以了 <script src="echarts.min.js"></script> echart组件需要在一个宽高固定的DOM里才能显示

【python web】Flask+Echarts 实现动图图表

flask 是python web开发的微框架,Echarts酷炫的功能主要是javascript起作用,将两者结合起来,发挥的作用更大。下面将Echarts嵌套进Flask的html模板中。 项目结构: 打开demo.py运行,点击console中的链接http://127.0.0.1:5000/ 就可以看到我们想要的动态图表。 demo.py #coding:utf-8fro

echarts 多个3D柱状图

图片样式: 代码实现: <template><div :class="className" :style="{height:height,width:width}" /></template><script>require("echarts/theme/sakura"); // echarts themeexport default {props: {className: {typ

基于echarts车辆大数据综合分析平台

0.序言 基于ECharts的大数据综合分析平台技术框架与基本原理 技术框架 基于ECharts的大数据综合分析平台是一个集数据收集、处理、分析及可视化展示于一体的综合性系统。其技术框架主要可以分为以下几个层次: 数据源层: 数据收集:通过各种数据收集工具(如日志收集器、数据库同步工具等)从多个数据源(如关系型数据库、NoSQL数据库、日志文件、API接口等)收集数据。数据存储:将收集到的

鸿蒙MPChart图表自定义(四)短刻度线

对于图表中的x轴效果,我们有时想要实现如图所示的特定刻度线。若需绘制x轴的短刻度线,我们可以利用现有资源,将原本的网格线稍作修改,只需绘制一条简洁的短线即可达到目的。 具体的方法就是写一个类MyXAxisRender继承自XAxisRenderer,重写父类的drawGridLine方法, 代码如下: import { Utils, XAxisRenderer } fro

echarts进度

echarts图表集 let numdata=["I级",'II级','III级','IV级','V级','劣V级']let pricedata=40option = {backgroundColor: '#0f375f',title: {show: false,text: '',left: 'center',top: '30%',textStyle: {color: '#00D5FF

echarts环形图

let dataValue=[{value: 30,name: '桥梁',percent: 0.25,color: 'rgba(248,95,94,1)',radius: ['75%', '80%'],center: ['22%', '50%'],},{value: 15,name: '隧道',percent: 0.25,color: 'rgba(243,185,71,1)',radius:

echarts多个环形图

echarts图表集  var dataValue = [{name:'今日待分配方量',value:49}, {name:'今日已分配方量',value:602}, {name:'今日完成方量',value:1037}]var piedata1 = [{name: '1#拌和机',value: 20},{name: '2#拌和机',value: 22},{name: '3#拌和机 ',va

echarts地图绘制并实现下钻功能

本文参考网址 使用echarts地图需要先准备好echarts地图渲染需要的json数据,数据可以从阿里云地址中下载自己需要的,下载之后直接引入即可使用,本文针对全国地图做一个简单的demo 阿里云界面如图 // 1、准备echarts地图容器<div class="map" ref="myChart" style="width:500px;height:500px;"></div>//

Vue3+Vite+Echarts 出现Missing semicolon错误

使用的echarts代码如下:   import * as echarts from 'echarts';type EChartsOption = echarts.EChartsOption;var chartDom = document.getElementById('main')!;var myChart = echarts.init(chartDom);var option: ECha