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

最新推荐文章于 2023-12-29 09:48:13 发布

SabreWulf2020

最新推荐文章于 2023-12-29 09:48:13 发布

阅读量3.8k

点赞数 2

分类专栏： HTML Echarts 文章标签： Echarts x轴分段

本文链接：https://blog.csdn.net/lvyiwuhen/article/details/115839227

版权

HTML 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

Echarts

1 篇文章 0 订阅

订阅专栏

需求原因：

由于数据前一段对应的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>
    <script type="text/javascript" src="../dist/extension/dataTool.min.js"></script>
    <script type="text/javascript" src="../map/js/china.js"></script>
    <script type="text/javascript" src="../map/js/world.js"></script>
    <script type="text/javascript" src="../dist/extension/bmap.min.js"></script>
    <script type="text/javascript" src="../dist/jquery.min.js"></script>
    <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;

        $.getJSON("频域幅值p1.json", function (data1) {

            var data = [];
            var len = data1[0].length;
            for (var i = 0; i < len; i++) {

                data.push([data1[0][i].X, data1[0][i].Y]);
            }
            var data2 = [];
            var len2 = data1[1].length;
            for (var i = len; i < len2; i++) {

                data2.push([data1[1][i].X, data1[1][i].Y]);
            }

            option = {
                title: {
                    text: '频率幅值图'
                },
                grid: [  //将视图分成2个区域
                    {
                        left: 100,
                        width: 200
                    },
                    {
                        left: 301,
                        width: 500
                    }
                ],
                xAxis: [
                    {
                        type: 'value',
                        //zlevel: 0,
                        gridIndex: 0,  //使用第一个区域
                        splitLine: {
                            show: false  //不显示网格线
                        }
                    },
                    {
                        type: 'value',
                        position: 'bottom',
                        min: 1,
                        //zlevel: 1,
                        gridIndex: 1,  //使用第二个区域
                        axisLine: {
                            show: true,  //显示轴线
                            color: 'red'
                        },
                        show: true,  //显示X轴
                        splitLine: {
                            show: false
                        }

                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        //zlevel: 0,
                        gridIndex: 0,
                        interval: 500,
                        splitLine: {
                            show: false
                        }
                    },
                    {
                        type: 'value',
                        //zlevel: 1,
                        gridIndex: 1,
                        min: 0,
                        max: 500,
                        interval: 500,
                        axisLabel: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        show: false  //第二条Y轴不显示

                    }
                ],
                series: [
                    {
                        type: 'line',
                        data: data,
                        xAxisIndex: 0,
                        yAxisIndex: 0,
                        symbol: "none",
                        lineStyle: {
                            color: 'red'
                        }
                    },
                    {
                        type: 'line',
                        data: data2,
                        xAxisIndex: 1,
                        yAxisIndex: 1,
                        symbol: "none",
                        lineStyle: {
                            color: 'red'
                        }
                    }
                ]
            };
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
        });
    </script>
</body>

</html>

效果：

使用到的json数据：

链接: https://pan.baidu.com/s/1-cF3Hvv_2kwrbUby7T_d5w 提取码: njq5

SabreWulf2020

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Echarts 分段设置X轴间隔，步长 - 模拟实现

目录需求原因：需求效果：html代码：使用到的数据：需求原因：由于数据前一段对应的Y值变化比较大，后一段对应Y值变化比较小，客户只关注前一段的Y值变化，于是想到分段设置X轴间隔，由于官方没有直接支持，于是通过组合两个坐标系方式实现。需求效果：html代码：<!DOCTYPE html><html style="height: 100%"><head> <meta charset="utf-8">&lt.
复制链接

扫一扫