Echarts双Y轴左右splitLine分割线无法重合双Y轴保持Y轴分割线等分-Toy模板网

这篇具有很好参考价值的文章主要介绍了Echarts双Y轴左右splitLine分割线无法重合双Y轴保持Y轴分割线等分。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

option = {
  xAxis: {
    type: 'category',
    axisLabel: {
      rotate: '45'
    },
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: [
    {
      type: 'value'
    },
    {
      type: 'value'
    }
  ],
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    },
    {
      data: [500, 200, 260, 150, 160, 80, 160],
      type: 'line',
      yAxisIndex: 1,
    }
  ]
};

如上代码所示下图，双Y轴左右分割线不重合：

Echarts双Y轴左右splitLine分割线无法重合双Y轴保持Y轴分割线等分,ECharts,echarts,前端,javascript

解决办法：

给yAxis添加min（坐标轴刻度最小值）、max（坐标轴刻度最大值）、interval（强制设置坐标轴分割间隔）属性。根据数值大小计算最大值、最小值并取整，数值较大可整百、整千取整，默认分割成5份。代码如下：

let data1 = [150, 230, 224, 218, 135, 147, 260];
let data2 = [465, 200, 260, 151, 160, 80, 160];
let min1 = 0,
  max1 = 100,
  min2 = 0,
  max2 = 100;
max1 = Math.ceil(Math.max.apply(null, data1) / 10) * 10; // 最大值向上取整十位数
max2 = Math.ceil(Math.max.apply(null, data2) / 10) * 10; // 最大值向上取整十位数
option = {
  ......
  yAxis: [
    {
      min: min1,
      max: max1,
      interval: (max1 - min1) / 5,
      minInterval: 1, // 自动计算的坐标轴最小间隔大小 设置成1保证坐标轴分割刻度显示成整数
      type: 'value'
    },
    {
      min: min2,
      max: max2,
      interval: (max2 - min2) / 5,
      type: 'value'
    }
  ],
  series: [
    {
      data: data1,
      type: 'line'
    },
    {
      data: data2,
      type: 'line',
      yAxisIndex: 1
    }
  ]
};

效果：

Echarts双Y轴左右splitLine分割线无法重合双Y轴保持Y轴分割线等分,ECharts,echarts,前端,javascript