年轮

家里买了个捣蒜的缸子 , 梨木做的 , 闲来无事 , 我查了下他底部的年轮 , 底部是一个比较细的地方 , 但只有这里是一个平面 .

 

结果是19圈.

 

不禁感慨 , 成为一个捣蒜缸要这么多年.

 

### 实现 ECharts 年轮图的方法 ECharts 年轮图(也称为“日历图”或“年视图”)是一种以年度时间维度为基础,按月、周或天展示数据分布的图表类型。它通常用于显示时间序列数据的热度变化,例如用户活跃度、销售额等。 #### 基本实现思路 在 ECharts 中,年轮图主要通过 `calendar` 坐标系来实现,并结合 `heatmap` 或 `scatter` 系列进行数据可视化。该图表支持自定义颜色映射和数据格式化,适用于展现一年中每一天的数据值。 #### 示例代码 以下是一个使用 ECharts 实现年轮图的完整示例: ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>ECharts 年轮图示例</title> <script src="https://cdn.staticfile.net/echarts/5.3.3/echarts.min.js"></script> </head> <body> <div id="main" style="width: 1000px;height:400px;"></div> <script> const chart = echarts.init(document.getElementById('main')); const data = []; for (let i = 0; i < 366; i++) { const date = new Date(); date.setDate(date.getDate() - i); const year = date.getFullYear(); const month = ('0' + (date.getMonth() + 1)).slice(-2); const day = ('0' + date.getDate()).slice(-2); const value = Math.floor(Math.random() * 100); // 模拟随机数据 data.push([year + '-' + month + '-' + day, value]); } const option = { title: { text: '年轮图示例', left: 'center' }, tooltip: { formatter: function(params) { return params.name + ': ' + params.value[1]; } }, visualMap: { min: 0, max: 100, calculable: true, orient: 'horizontal', left: 'right', top: 'bottom', inRange: { color: ['#e0f3f8', '#abd9e9', '#74add1', '#4575b4', '#313695'] }, text: ['高值', '低值'], precision: 0 }, calendar: { top: 50, left: 30, right: 30, cellSize: ['auto', 13], range: ['2023-01-01', '2023-12-31'], itemStyle: { borderWidth: 0.5 }, yearLabel: { show: true } }, series: { type: 'heatmap', coordinateSystem: 'calendar', data: data.map(item => ({ name: item[0], value: [item[0], item[1]] })) } }; chart.setOption(option); </script> </body> </html> ``` 上述代码中: - 使用了 `calendar` 类型作为坐标系统[^3]。 - 数据通过 `heatmap` 热力图形式在日历上呈现。 - `visualMap` 配置项控制颜色映射范围,用于表示数据高低变化。 - `data` 数组模拟了一年的每日数据点。 #### 关键配置说明 - **`calendar.range`**:设置要显示的日期范围,如 `['2023-01-01', '2023-12-31']`。 - **`cellSize`**:每个日期单元格的大小,可以是固定值或自适应。 - **`series.data`**:必须提供包含日期和对应值的二维数组。 - **`visualMap.inRange.color`**:定义热力图的颜色渐变区间。 #### 应用场景 - 展示某产品在一年中的每日销量趋势。 - 可视化用户的每日登录活跃情况。 - 显示天气温度、空气质量等随时间变化的数据。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值