echarts折线图展示两个Y轴，同时使两个y轴刻度线重合

àì夳堔傛蜴生んèń 2022-11-29 12:51 801阅读 0赞

**统一前效果：** 插件根据传入的数据自动归置两个Y轴的刻度**最大值max**和**分段interval**的属性值。所以我们统一双Y轴刻度分段统一的入手点也就是这两个属性值。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDUVN0dWR5_size_16_color_FFFFFF_t_70]  
**统一后效果：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDUVN0dWR5_size_16_color_FFFFFF_t_70 1]  
**关键代码块：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDUVN0dWR5_size_16_color_FFFFFF_t_70 2]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDUVN0dWR5_size_16_color_FFFFFF_t_70 3]  
**完整代码块：**

import React from 'react';
    import ReactEcharts from 'echarts-for-react';
    import style from './style.less';
    
    export const index = (props: any) => { 
      // 设置刻度
      const unifiedDivision = (maxNum: number) => { 
        for (let i = 0; i < 10; i++) { 
          if (maxNum % 10 != 0) { 
            maxNum++;
          } else { 
            return maxNum / 5;
          }
        }
      };
      const arrLeft = [150, 230, 224, 218, 135, 147, 260];
      const arrRight = [200, 120, 450, 285, 65, 43, 160];
      const maxLeft = Math.max(...arrLeft);
      const maxRight = Math.max(...arrRight);
    
      const option = { 
        title: { 
          text: 'echarts折线图双Y轴刻度分段统一问题',
          left: '40%',
        },
        tooltip: { 
          trigger: 'axis',
        },
        xAxis: { 
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: [
          { 
            type: 'value',
            min: 0,
            max: maxLeft,
            interval: unifiedDivision(maxLeft),
          },
          { 
            type: 'value',
            min: 0,
            max: maxRight,
            interval: unifiedDivision(maxRight),
          },
        ],
        series: [
          { 
            data: arrLeft,
            type: 'line',
          },
          { 
            data: arrRight,
            type: 'line',
            yAxisIndex: 1,
          },
        ],
      };
      return (
        <div className={ style.unionContainer}>
          <ReactEcharts
            option={ option as any}
            notMerge
            lazyUpdate
            style={ {  height: '100%', width: '100%' }}
          />
        </div>
      );
    };
    
    export default index;

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDUVN0dWR5_size_16_color_FFFFFF_t_70]: /images/20221124/85d9211651c64a068fb7f8e042e0bbd6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDUVN0dWR5_size_16_color_FFFFFF_t_70 1]: /images/20221124/9892947d8c72439d9321868ee753356a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDUVN0dWR5_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/202104161115040.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDUVN0dWR5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDUVN0dWR5_size_16_color_FFFFFF_t_70 3]: /images/20221124/f0e83afb23b6469181925473b1168a23.png