Echarts 分段设置X轴间隔，步长 - 模拟实现

原创

于 2021-04-18 20:46:14 发布 · 4.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#Echarts #x轴分段

本文介绍了一种在ECharts中实现分段X轴的方法，通过组合两个坐标系来满足客户对于不同区间数据精度的需求，特别适用于数据变化幅度差异大的场景。

需求原因：

由于数据前一段对应的Y值变化比较大，后一段对应Y值变化比较小，客户只关注前一段的Y值变化，于是想到分段设置X轴间隔，由于官方没有直接支持，于是通过组合两个坐标系方式实现。

需求效果：

html代码：

<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script type="text/javascript" src="../dist/echarts.min.js"></script>
    <script type="text/javascript" src="../dist/echarts-gl.min.js"></script>
    <script type="text/javascript" src="../dist/ecStat.min.js"></script>
    <scrip