echarts实现这种效果

Question

这个是一种睡眠结构图，想要用echarts来实现上边的这种效果，有没有做过的小伙伴帮忙解答下，或者提供下思路和代码来参考下，
echarts 如何实现上边的这种效果

Answer 1

引自免费微信小程序：皆我百晓生

要实现这样的睡眠结构图，我们可以将ECharts中的折线图（LineChart）与柱状图（BarChart）结合起来，并且使用自定义的刻度标签和数据。这里是一个基本的步骤和示例代码来创建类似的效果。

首先，确保已经引入了ECharts库。如果你还没有，可以通过CDN引入：

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>

接下来，我们创建一个HTML元素来放置图表：

<div id="sleepChart" style="width: 800px;height: 400px;"></div>

然后，编写JavaScript代码来配置ECharts实例：

// 初始化ECharts实例
var myChart = echarts.init(document.getElementById('sleepChart'));

// 定义数据和选项
var option = {
  tooltip: {},
  legend: {
    data: ['睡眠阶段', '时间']
  },
  xAxis: {
    type: 'category',
    data: ['青', '醒', '浅睡', '重', '深睡'],
    axisTick: { show: false }, // 隐藏x轴刻度
    axisLabel: {
      rotate: -45, // 倾斜角度
      interval: 0, // 显示所有标签
      formatter: function(value) {
        return value + '\n' + (value === '青' ? '20:00' : (value === '醒' ? '23:00' : (value === '浅睡' ? '02:00' : (value === '重' ? '05:00' : '08:00'))));
      }
    }
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '睡眠阶段',
      type: 'bar',
      data: [0, 0, 0, 0, 0], // 这里可以替换为实际的睡眠阶段持续时间
      barWidth: '30%', // 柱子宽度
      itemStyle: {
        color: '#3399ff' // 柱子颜色
      }
    },
    {
      name: '时间',
      type: 'line',
      data: [0, 0, 0, 0, 0], // 这里可以替换为实际的时间段长度
      smooth: true,
      lineStyle: {
        color: '#000', // 线条颜色
        width: 1
      },
      symbolSize: 0 // 不显示点标记
    }
  ]
};

// 渲染图表
myChart.setOption(option);

这段代码会创建一个带有两个系列的图表：一个表示睡眠阶段的柱状图，另一个表示对应时间段的折线图。axisLabel.formatter函数用于在每个x轴刻度上同时显示睡眠阶段名称及其对应的时间点。

为了完成整个睡眠结构图，你需要根据实际的数据填充series中的数据。例如，如果你有如下数据：

const sleepStagesData = [30, 60, 90, 120, 150]; // 睡眠阶段持续时间（分钟）
const timeIntervals = [1, 1, 1, 1, 1]; // 时间段长度（小时）

则可以更新上述代码中的series部分为：

series: [
  {
    name: '睡眠阶段',
    type: 'bar',
    data: sleepStagesData.map(stage => stage / 60), // 将分钟转换为小时
    barWidth: '30%',
    itemStyle: {
      color: '#3399ff'
    }
  },
  {
    name: '时间',
    type: 'line',
    data: timeIntervals.map(interval => interval),
    smooth: true,
    lineStyle: {
      color: '#000',
      width: 1
    },
    symbolSize: 0
  }
]

这样就完成了基本的睡眠结构图。你可能还需要根据实际需求调整样式、标题等其他细节。如果你还有其他具体的问题或需要进一步的帮助，请随时告诉我。