日历坐标系图表绘制

需要绘制一个图表，展示竖轴范围为 0-30 号，横轴范围为 1 月 1 日至 12 月 31 日，用来显示每天对应的数据。

解决方案

可以使用 echarts 的日历坐标系来实现该图表。

使用 echarts 日历坐标系绘制图表

1. 安装 echarts

npm install echarts

2. 初始化图表

var mychart = echarts.init(document.getelementbyid('mychart'));

3. 设置日历坐标系

var calendaroption = {
  calendar: {
    range: '2022'
  }
};

4. 配置系列

数据格式应该为：[{value: [日期, 数值]}, ...]。

var seriesoption = {
  series: {
    type: 'heatmap',
    coordinatesystem: 'calendar',
    data: [
      {
        value: [
          '2022-01-01',
          1
        ]
      }
    ]
  }
};

5. 合并选项并渲染图表

myChart.setOption(echarts.merge(calendaroption, seriesOption));

效果演示