使用Echarts 日历热力图

最新推荐文章于 2024-10-29 16:45:08 发布

原创最新推荐文章于 2024-10-29 16:45:08 发布 · 901 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

该文章展示了如何利用Echarts库创建一个日历热力图，提供了具体的代码示例，数据涵盖了2023年7月1日至31日的数值，通过调整颜色和样式来展示每一天的数据点。

文章目录

前言
效果图
代码示例

前言

实现效果：使用 Echarts日历热力图

效果图

示例：
在这里插入图片描述

代码示例

var data = [
    ['2023/7/1', 43],
    ['2023/7/2', 89],
    ['2023/7/3', 23],
    ['2023/7/4', 32],
    ['2023/7/5', 43],
    ['2023/7/6', 2],
    ['2023/7/7', 23],
    ['2023/7/8', 65],
    ['2023/7/9', 8],
    ['2023/7/10', 7],
    ['2023/7/11', 76],
    ['2023/7/12', 45],
    ['2023/7/13', 45],
    ['2023/7/14', 65],
    ['2023/7/15', 56],
    ['2023/7/16', 65],
    ['2023/7/17', 56],
    ['2023/7/18', 57],
    ['2023/7/19', 23],
    ['2023/7/20', 23],
    ['2023/7/21', 34],
    ['2023/7/22', 26],
    ['2023/7/23', 23],
    ['2023/7/24', 58],
    ['2023/7/25', 37],
    ['2023/7/26', 56],
    ['2023/7/27', 23],
    ['2023/7/28', 23],
    ['2023/7/29', 23],
    ['2023/7/30', 23],
    ['2023/7/31', 12]
]

option = {
    backgroundColor: '#0A2337',
    tooltip: {
        trigger: 'item',
        formatter: '{a}<br/>{c}',
    },
    calendar: [{
        top: 90,
        left: 'center',
        range: ['2023-07-01', '2023-07-31'], //日历范围
        orient: 'vertical',
        cellSize: [78, 'auto'], //宽 高
        splitLine: {
          show: false,
        },
        dayLabel: {
          show: true,
          //firstDay: 1, // 一周从周几开始，默认从周日开始
          nameMap: 'EN', // 星期显示的效果，默认为'en'
          margin: 10,
          color: '#fff'
        },
        monthLabel: {
          show:false
        },
        yearLabel: {
          show: false
        },
        itemStyle: {
            normal: {
                color: '#0A2237',
                borderWidth: 2,
                borderColor: 'transparent' // 日历边框颜色
            }
        }
    }],
    series: [{
        type: 'effectScatter',
        coordinateSystem: 'calendar',
        data: data,
        symbolSize: () => Math.max(~~(Math.random() * 15), 5),
        itemStyle: {
            normal: {
                color: 'red' //更改热力图的颜色
            }
        },
        label: {
            show: true,
            formatter(params) {
                return params.value[0].split('/')[2] //展示的日历内容
            },
            offset: [10, -10], //字体在表格的位置
            color: '#fff' // 字体颜色
        }
    }]
};

Ending…