如何使用 ECharts 日历坐标系绘制展示每天数据的图表？

本篇文章给大家分享《如何使用 ECharts 日历坐标系绘制展示每天数据的图表？》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

日历坐标系图表绘制

需要绘制一个图表，展示竖轴范围为 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));

效果演示

以上就是《如何使用 ECharts 日历坐标系绘制展示每天数据的图表？》的详细内容，更多关于的资料请关注golang学习网公众号！