PHP前端开发

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

百变鹏仔 3周前 (11-26) #echarts
文章标签 坐标系

日历坐标系图表绘制

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

解决方案

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

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

  1. 安装 echarts
npm install echarts
  1. 初始化图表
var mychart = echarts.init(document.getelementbyid('mychart'));
  1. 设置日历坐标系
var calendaroption = {  calendar: {    range: '2022'  }};
  1. 配置系列

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

var seriesoption = {  series: {    type: 'heatmap',    coordinatesystem: 'calendar',    data: [      {        value: [          '2022-01-01',          1        ]      }    ]  }};
  1. 合并选项并渲染图表
myChart.setOption(echarts.merge(calendaroption, seriesOption));

效果演示