vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法

文章目录

1、原因

刻度在显示时,分割段数不一样,导致左右的刻度线不一致,不能重合在一起。

2、思路

根据上面的原因去分析,要想左右的刻度线一致,分隔的段数是必须是一样的,这样才能重合。

3、解决方法

3.1、使用alignTicks解决
  • 从 v5.3.0 开始支持

  • 在多个 y 轴为数值轴的时候,可以开启该配置项自动对齐刻度。只对'value'和'log'类型的轴有效。

    yAxis: [
    {
    type: 'value',
    name: '水量',
    alignTicks: true,
    axisLabel: {
    formatter: '{value} ml'
    }
    },
    {
    type: 'value',
    name: '温度',
    alignTicks: true,
    axisLabel: {
    formatter: '{value} °C'
    }
    }
    ],

  • 效果展示

3.2、结合min和max属性去配置interval属性
1、首先固定两边的分隔的段数。
  • 分别求出左边Y轴和右边Y轴的最大值max和最小值min,根据max和min之间的和去除以分隔的段数,分别算出左边Y轴和右边Y轴的分隔间隔。

在ECharts中有两个很重要的属性:

  • interval:强制设置坐标轴分割间隔。

  • splitNumber:坐标轴的分割段数,需要注意的是这个分割段数只是个预估值,最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。

2、结合min和max属性去配置interval。
  • 这是测试数据

    let lData = [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]

    let rData = [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 92.0, 6.2]

  • 计算最大值和最小值

    let lMax = Number(Math.max(...lData))
    let lMin = Number(Math.min(...lData))
    let rMax = Number(Math.max(...rData))
    let rMin = Number(Math.min(...rData))

  • 最大值向上取整,最小值向下取整,让显示的数据为10的倍数或100的倍数整数显示。

    lMax = Math.ceil(lMax / 100) * 100
    lMin = Math.floor(lMin / 100) * 100
    rMax = Math.ceil(rMax / 10) * 10
    rMin = Math.floor(rMin / 10) * 10

  • 计算分隔间隔

    let splitNumber = 10
    let lInterval = lMax / splitNumber
    let rInterval = rMax / splitNumber

  • 配置yAxis

    yAxis: [
    {
    type: 'value',
    name: '水量',
    splitNumber:splitNumber,
    min: lMin,
    max: lMax,
    interval: lInterval,
    axisLabel: {
    formatter: '{value} ml'
    }
    },
    {
    type: 'value',
    name: '温度',
    splitNumber:splitNumber,
    min: rMin,
    max: rMax,
    interval: rInterval,
    axisLabel: {
    formatter: '{value} °C'
    }
    }
    ],

  • 效果展示

相关推荐
合作小小程序员小小店1 天前
web网页,在线%抖音,舆情%分析系统demo,基于python+web+echart+nlp+知识图谱,数据库mysql
数据库·python·自然语言处理·flask·nlp·echarts·知识图谱
一川_2 天前
《Echarts内存泄漏惊魂记:我的页面在导航切换中“炸”了!》
echarts
合作小小程序员小小店3 天前
大屏开发,在线歌词舆情分析系统demo,基于python,flask,web,echart,nlp,自然语言数据库mysql。
后端·python·flask·nlp·echarts
Lsx_4 天前
ECharts 全局触发click点击事件(柱状图、折线图增大点击范围)
前端·javascript·echarts
xiaohe06015 天前
🚀 拥抱 create-uni,一行命令轻松集成 Uni ECharts!
vue.js·uni-app·echarts
知识分享小能手6 天前
uni-app 入门学习教程,从入门到精通,uni-app中uCharts组件学习((8)
vue.js·学习·ui·微信小程序·小程序·uni-app·echarts
小二·7 天前
从零开始:使用 Vue-ECharts 实现数据可视化图表功能
vue.js·信息可视化·echarts
hemoo7 天前
如何让echart的lengend在指定位置换行
javascript·echarts
paopaokaka_luck8 天前
基于SpringBoot+Vue的DIY手工社预约管理系统(Echarts图形化、腾讯地图API)
java·vue.js·人工智能·spring boot·后端·echarts
saadiya~9 天前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts