表示离散量的echarts图型示例

摘要：本文展示了两个使用ECharts绘制的阶梯波形图版本。第一个版本(v1)创建了黑色背景的荧光绿阶梯波形，隐藏了坐标轴，包含4个从0到1的阶梯变化。第二个版本(v2)添加了时间坐标轴(每5分钟一个刻度)，纵坐标显示0和1，优化了图表布局和响应式设计。两个版本都采用中间步长(step:'middle')的阶梯模式，使用4px宽的荧光绿(#5f5)实线，并隐藏了数据点符号。

目标

第一版代码

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>匹配示例的阶梯波形图</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 800px; height: 400px;"></div>

    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));

        var option = {
            backgroundColor: '#000', // 黑背景
            xAxis: {
                type: 'category',
                data: [0,1,2,  3,4,5,  6,7,8,  9,10,11,  12], // 4个阶梯对应的X轴分段
                axisLine: { show: false }, // 隐藏坐标轴
                axisLabel: { show: false },
                axisTick: { show: false }
            },
            yAxis: {
                type: 'value',
                min: 0,
                max: 1,
                axisLine: { show: false },
                axisLabel: { show: false },
                axisTick: { show: false },
                splitLine: { show: false }
            },
            grid: {
                left: '5%',
                right: '5%',
                top: '20%',
                bottom: '20%' // 调整图表位置匹配示例
            },
            series: [
                {
                    type: 'line',
                    data: [
                        0, 1, 1,   // 第1个阶梯：0→1→保持1
                        0, 1, 1,   // 第2个阶梯：0→1→保持1
                        0, 1, 1,   // 第3个阶梯：0→1→保持1
                        0, 1, 1,   // 第4个阶梯：0→1→保持1
                        0          // 最后回到0
                    ],
                    step: 'middle', // 阶梯模式
                    lineStyle: {
                        color: '#5f5', // 荧光绿
                        width: 4,
                        type: 'solid'
                    },
                    symbol: 'none' // 隐藏数据点
                }
            ]
        };

        myChart.setOption(option);
    </script>
</body>
</html>

v1的效果

加上坐标轴后的代码

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>带时间坐标轴的阶梯图</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <style>
        #main { width: 100%; height: 400px; }
    </style>
</head>
<body>
    <div id="main"></div>

    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));

        function getChartOption() {
            return {
                backgroundColor: '#000',
                xAxis: {
                    type: 'category',
                    // 横坐标：每5分钟一个时间点
                    data: ['1:05', '1:10', '1:15', '1:20', '1:25'],
                    axisLine: { lineStyle: { color: '#666' } },
                    axisLabel: { 
                        color: '#fff', // 文字白色
                        fontSize: 12
                    },
                    axisTick: { show: false }
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    max: 1,
                    // 纵坐标只显示0和1
                    axisLabel: { 
                        color: '#fff',
                        formatter: '{value}', // 显示0/1
                        fontSize: 12
                    },
                    axisLine: { lineStyle: { color: '#666' } },
                    axisTick: { show: false },
                    splitLine: { show: false }
                },
                grid: { left: '5%', right: '5%', top: '20%', bottom: '20%' },
                series: [
                    {
                        type: 'line',
                        // 数据对应4个阶梯（匹配时间点）
                        data: [0,1,1, 0,1,1, 0,1,1, 0,1,1, 0],
                        step: 'middle',
                        lineStyle: { color: '#5f5', width: 4 },
                        symbol: 'none'
                    }
                ]
            };
        }

        myChart.setOption(getChartOption());
        window.addEventListener('resize', () => myChart.resize());
    </script>
</body>
</html>

v2的效果