首页 > 其他分享 >echarts 双y轴0刻度线对称

echarts 双y轴0刻度线对称

时间:2023-04-07 12:34:05浏览次数:44  
标签:... ratio 1.2 刻度 min1 对称 min2 echarts const

第一步:分别找出双y轴的最大最小值

const max1 = Math.max(...data1);
const min1 = Math.min(...data1) ;
const max2 = Math.max(...data2) ;
const min2 = Math.min(...data2) ;

第二步:计算两组数据范围的比值(相当于比例尺)

const ratio = (max1 - min1) / (max2 - min2);

第三步:两组数据对阶,然后确定应当使用哪一组的数据作为最大值或最小值

if (max1 < max2 * ratio) {
y1Max = max2 * ratio;
y2Max = max2;
} else {
y1Max = max1;
y2Max = max1 / ratio;
}
if (min1 < min2 * ratio) {
y1Min = min1;
y2Min = min1 / ratio;
} else {
y1Min = min2 * ratio;
y2Min = min2;
}

第四步:给y轴分别设置最大最小值(乘以1.2是为了最大最小值不在顶格的位置)

yAxis: [
{
...
max: (y1Max * 1.2).toFixed(0),
min: (y1Min * 1.2).toFixed(0),
...
},
{
...
max: (y2Max * 1.2).toFixed(0),
min: (y2Min * 1.2).toFixed(0),
...
}
],

标签:...,ratio,1.2,刻度,min1,对称,min2,echarts,const
From: https://www.cnblogs.com/g-14/p/17295770.html

相关文章

  • 基于非对称纳什谈判的多微网电能共享运行优化策略
    基于非对称纳什谈判的多微网电能共享运行优化策略MATLAB代码,电网技术文献复现:关键词:纳什谈判合作博弈 微网电转气-碳捕集 P2P电能交易交易   参考文档:《基于非对称纳什谈判的多微网电能共享运行优化策略》完美复现仿真平台:MATLABCPLEX+MOSEKIPOPT主要内容:该代码......
  • 实现echarts 十字辅助线
     想要实现的效果如下图:  实现十字辅助线的主要代码如下:axisPointer:{type:'cross',//xy轴十字架指示数值背景区域色label:{backgroun......
  • Echarts图表管理方式总结
    由于最近项目图表非常多,而且很多都是有共性的,于是摸索除了一套便于管理的图表配置方式。一种是处理共性的,可参考下方的1,2,3,4一种是处理特殊性的,可参考下方的5,其实两种方式可以共用。1.基本样式模块化把一些常用的属性一块一块写好。下面举一些例子名称示例提示......
  • echarts如何在x轴的tooltip上加上描述文字
     想要实现的效果,如下图: 实现该操作的代码如下:1tooltip:{2formatter:"month:{b0}<br>"34}实现该效果的实例图如下:   ......
  • echarts 折线图x轴不等分+拐点有箭头
    效果图: 不等分需要用到属性:connectNulls:true思路:x轴间隔需用null占位,然后把为null的数据连线就可以 varxData=['0点','1点','2点','','4点','5点','6点','',......
  • LeetCode 101.对称二叉树
    1.题目:给你一个二叉树的根节点 root ,检查它是否轴对称。 示例1:输入:root=[1,2,2,3,4,4,3]输出:true2.代码:方法一:递归实现/***Definitionforabinarytreenode.......
  • 轴刻度为字符串
    上面的程序运行起来,X轴的刻度是数字,如果我们希望轴刻度是文字怎么做呢?我们参考了这个网址的介绍: https://stackoverflow.com/questions/31775468/show-string-values-......
  • echarts中的tooltip属性
     echarts鼠标放上去显示提示框属性详解tooltip tooltip={//提示悬浮框框组件trigger:'item',......
  • echarts export three types picture: png、html、svg
    import'./styles.css'importechartsfrom'echarts'import{saveAs}from'file-saver'importJSPDFfrom'jspdf'import{init}from'canvas-to-blob'init(......
  • 对称的二叉树
    classSolution{public:booldfs(TreeNode*l,TreeNode*r){if(l==NULL&&r==NULL)returntrue;elseif(l&&r)re......