用 echart 如何绘制这种睡眠结构图？

小能豆

用 echart 如何绘制这种睡眠结构图？

javascript

用 echart 如何绘制这种睡眠结构图？

阅读 46

收藏

2024-05-31

共1个答案

小能豆

绘制睡眠结构图可以使用 ECharts 中的柱状图（Bar Chart）和区域图（Line Chart）来表示不同的睡眠阶段。以下是一个简单的示例代码，演示了如何使用 ECharts 绘制睡眠结构图：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Sleep Structure Chart</title>
    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 创建一个容器来放置图表 -->
    <div id="sleepChart" style="width: 800px; height: 400px;"></div>

    <script>
        // 初始化图表
        var sleepChart = echarts.init(document.getElementById('sleepChart'));

        // 模拟睡眠数据
        var sleepData = [
            { name: 'REM', value: 3 },
            { name: 'Light', value: 5 },
            { name: 'Deep', value: 4 },
            { name: 'Awake', value: 2 }
        ];

        // 设置柱状图的数据
        var barData = sleepData.map(item => item.value);
        // 设置区域图的数据
        var lineData = sleepData.map(item => item.name);

        // 绘制柱状图
        sleepChart.setOption({
            title: {
                text: 'Sleep Structure Chart'
            },
            tooltip: {},
            legend: {
                data:['Duration']
            },
            xAxis: {
                data: lineData
            },
            yAxis: {},
            series: [{
                name: 'Duration',
                type: 'bar',
                data: barData
            }]
        });
    </script>
</body>
</html>

在这个示例中，我们使用 ECharts 初始化了一个柱状图，并且模拟了一组睡眠数据。柱状图的 x 轴表示睡眠阶段（REM、Light、Deep、Awake），y 轴表示每个阶段的持续时间。你也可以根据实际需求进一步自定义图表的样式、颜色和布局。

2024-05-31