首页 > 其他分享 >echarts 双y轴分割线无法对齐

echarts 双y轴分割线无法对齐

时间:2023-11-21 17:00:27浏览次数:31  
标签:return findMax data ceil let max 对齐 分割线 echarts

echarts官网的api中提到了可以用splitNumber控制分割段数,但是优先级太低,部分情况下可能不生效,使用interval+max两个属性才能强制控制分割段数

这是最后的结果,两边坐标轴刻度不一样

这里我设置的分割段数是5,5比较好整除,6以上的话坐标轴会出现不规则的小数,不太好看
数据里可能会出现百分比,所以对小于1的做了一下特殊处理

下面是相关代码
我这里返回数据中的data是对象数组
firstKey是data中对象展示的属性
$set里的option是echarts的setOption的那个option
和1比较是因为有可能出现百分比

let firstKeyMax = this.findMax(data, firstKey) > 1
	? this.findMax(data, firstKey) 
	: 1;
let firstInterval = this.ceil(firstKeyMax / 5);
let firstMax = firstInterval * 5;

let secondKeyMax = this.findMax(data, secondKey) > 1
	? this.findMax(data, secondKey)
	: 1;
let secondInterval = this.ceil(secondKeyMax / 5);
let secondMax = secondInterval * 5;

this.$set(this.option.yAxis, 0, {
	 max: firstMax,
	 interval: firstInterval,
});
this.$set(this.option.yAxis, 1, {
	 max: secondMax,
	 interval: secondInterval,
});

max属性对应的firstMax和secondMax最好用interval乘以段数算出来,不要直接用firstKeyMax和secondKeyMax,不然会出现y轴几条标线排列很密集却又不重合的情况,而且最大值顶到头也不好看

findMax(array, property) {
return Math.max.apply(
    Math,
    array.map(function (o) {
      return o[property] ? o[property] : 0;
    })
  );
},

ceil函数是为了找出一个比最大值还大一点的值

ceil(number) {
  if (number < 1) {
    return 0.2;
  } else {
	let numLength = (parseInt(number).toString().length - 2);
	let zoomIndex = 10 ** numLength;
	return Math.ceil(number / zoomIndex) * zoomIndex;
  };
  }
},

标签:return,findMax,data,ceil,let,max,对齐,分割线,echarts
From: https://www.cnblogs.com/sheshuiyu/p/17846981.html

相关文章

  • 微信小程序 布局对齐属性
    1、效果展示2、代码展示<!-- 引用模板 import --><view class="content" ><view class="content-item" style="background: skyblue" > 1</view><view class="content-item" style="background: #ff0000" >......
  • echarts坐标轴线、坐标轴刻度线、网格线控制
    xAxis:{name:'',axisTick:{show:true//坐标轴刻度线},axisLine:{//轴线show:false},splitLine:{//网格线show:true},axisLabel:{//坐标轴样式textStyle:{color:'#636363'}}}参考文章echarts坐......
  • 开发中遇到的echarts常见问题
    柱状图legend不出现①没有配置legend中的data属性②data的name属性与series的name属性不同设置legend阴影       itemStyle:{               opacity:1,               shadowColor:"rgba(255,255,255,1)",     ......
  • echarts修改图例legend样式:正方形、矩形、圆形、圆角
    ECharts提供的标记类型有'circle','rect','roundRect','triangle','diamond','pin','arrow','none'legend:{icon:'circle'}参考文章echarts图例修改legend中icon的形状及大小......
  • echarts自适应一系列问题
    1.适配问题//需要刷新才能适配window.onresize('resize',()=>{    myChart.resize()   })//不需要刷新,动态适配宽度 window.addEventListener('resize',()=>{    myChart.resize()   })2.横纵坐标超长省略显示  triggerEve......
  • 汇编-ALIGN对齐边界
         ......
  • LiveCharts控件基本使用
    AngularGanuge控件 1usingSystem.Windows;2usingSystem.Windows.Forms;3usingSystem.Windows.Media;4usingLiveCharts.Wpf;5usingBrushes=System.Windows.Media.Brushes;67namespaceWinforms.Gauge.AngularGauge8{9publicpartial......
  • # yyds干货盘点 # echarts图表,在notebook里为什么显示不出呢?
    大家好,我是皮皮。一、前言前几天在Python最强王者交流群【吴超建】问了一个echarts图像可视化的问题,一起来看看吧。echarts图表,在notebook里为什么显示不出呢?二、实现过程这里【巭孬......
  • echarts图表,在notebook里为什么显示不出呢?
    大家好,我是皮皮。一、前言前几天在Python最强王者交流群【吴超建】问了一个echarts图像可视化的问题,一起来看看吧。echarts图表,在notebook里为什么显示不出呢?二、实现过程这里【巭孬......
  • 软件测试|Python数据可视化神器——pyecharts教程(八)
    Pyecharts绘制热力图当涉及可视化数据时,热力图是一种强大的工具,它可以帮助我们直观地了解数据集中的模式和趋势。在本文中,我们将学习如何使用Python中的Pyecharts库创建热力图,以便将数据转化为可视化的形式。什么是热力图?热力图是一种用于显示数据密度的二维图表,其中颜色的......