如何使用 ECharts 日历坐标系绘制展示每天数据的图表?
日历坐标系图表绘制
需要绘制一个图表,展示竖轴范围为 0-30 号,横轴范围为 1 月 1 日至 12 月 31 日,用来显示每天对应的数据。
解决方案
可以使用 echarts 的日历坐标系来实现该图表。
使用 echarts 日历坐标系绘制图表
- 安装 echarts
npm install echarts
- 初始化图表
var mychart = echarts.init(document.getelementbyid('mychart'));
- 设置日历坐标系
var calendaroption = { calendar: { range: '2022' }};
- 配置系列
数据格式应该为:[{value: [日期, 数值]}, ...]。
var seriesoption = { series: { type: 'heatmap', coordinatesystem: 'calendar', data: [ { value: [ '2022-01-01', 1 ] } ] }};
- 合并选项并渲染图表
myChart.setOption(echarts.merge(calendaroption, seriesOption));
效果演示