Echarts 之日历实现（重大活动展示）

最新推荐文章于 2024-10-29 16:45:08 发布
最新推荐文章于 2024-10-29 16:45:08 发布
阅读量1.6k 收藏 3
点赞数 2
分类专栏： Echarts 文章标签： javascript html 前端 经验分享
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Young_Lynn/article/details/106224293
版权
本文介绍如何使用ECharts构建日历热力图，展示特定日期的重要事件及节假日，通过热力图颜色变化直观反映事件密集度，同时提供事件详情及节假日信息。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

效果图

代码 

    <!--01、 引入 ECharts 文件 -->
    <script src="../js/echarts-4.1.0/echarts.js"></script>
    <script src="../js/theme/customed.js"></script>
    <!--02、 构建 ECharts 数据源 -->
    <script type="text/javascript">
        var data = [
            //['日期', '是否有重要事件（80）','重要事件简介','节假日','是否是休息日或加班日'，'重要事件详细内容']
            ['2019-5-27', '','','','',''],
            ['2019-5-28', '','','','',''],
            ['2019-5-29', '','','','',''],
            ['2019-5-30', '','','','',''],
            ['2019-5-31', '','','','',''],
            ['2019-6-1', '80','重要事件简介1','','','重要事件详细内容1'],
            ['2019-6-2', '', '','','',''],
            ['2019-6-3', '', '','','',''],
            ['2019-6-4', '', '','','',''],
            ['2019-6-5', '', '','','',''],
            ['2019-6-6', '', '','','',''],
            ['2019-6-7', '','','端午节','休',''],
            ['2019-6-8', '80','重要事件简介2','','休','重要事件详细内容2'],
            ['2019-6-9', '','','','休',''],
            ['2019-6-10', '', '','','',''],
            ['2019-6-11', '', '','','',''],
            ['2019-6-12', '80','重要事件简介3','','','重要事件详细内容3'],
            ['2019-6-13', '', '','','',''],
            ['2019-6-14', '', '','','',''],
            ['2019-6-15', '', '','','',''],
            ['2019-6-16', '', '','','',''],
            ['2019-6-17', '', '','','',''],
            ['2019-6-18', '', '','','',''],
            ['2019-6-19', '', '','','',''],
            ['2019-6-20', '', '','','',''],
            ['2019-6-21', '80','重要事件简介4','','','重要事件详细内容4'],
            ['2019-6-22', '', '','','',''],
            ['2019-6-23', '', '','','',''],
            ['2019-6-24', '', '','','',''],
            ['2019-6-25', '', '','','',''],
            ['2019-6-26', '', '','','',''],
            ['2019-6-27', '', '','','',''],
            ['2019-6-28', '', '','','',''],
            ['2019-6-29', '', '','','',''],
            ['2019-6-30', '', '','','','']
        ];

        var jjrdata = [];
        var cdata = [];
        var data1 = [];
        var event = [];
        var heatmapData = [];//热力图，用来标记有重要事件的
        for (var i = 0; i < data.length; i++) {
            heatmapData.push([
                data[i][0],
                Math.random() * 10
            ]);
            event.push([data[i][0],data[i][5]]);
            data1.push([data[i][0],data[i][1]]);
            jjrdata.push([data[i][0],'', data[i][2], data[i][3], data[i][4]]);
            cdata.push([data[i][0], 1, data[i][2], data[i][3], data[i][4]]);
        }
        
        var option = {
            tooltip: {
                trigger: 'item',
                position: [-2, -8],
                formatter:function (params) {
                    for(var i = 0;i<event.length;i++){
                        if(event[i][0] == params.data[0]){
                           if(event[i][1] != ""){
                               return event[i][1];
                           }
                        }
                    }
                }
            },
            visualMap: {
                show: false,
                min: 0,
                max: 10,
                calculable: true,
                seriesIndex: [5],
                orient: 'horizontal',
                left: 'center',
                bottom: 20,
                inRange: {
                    // color: ['#e0ffff', '#006edd'],
                    opacity: 0.1
                },
                controller: {
                    inRange: {
                        opacity: 0.2
                    }
                }
            },

            calendar: [{
                left: 0,
                top: 23,
                range: [data1[0][0], data1[data1.length-1][0]],
                orient: 'vertical',
                cellSize: 'auto',
                splitLine: {
                    // show: false,
                    lineStyle: {
                        color:'#294c38',
                        // width: 5,
                        // type: 'solid'
                    }
                },
                yearLabel: {
                    margin:60,
                    show:false,
                    color:'#000000'
                },
                monthLabel: {
                    show:false,
                    firstDay: 1,
                    nameMap: 'cn',
                    margin:30,
                    color:'#000000'
                },
                dayLabel: {
                    color:'#4cc79b',
                    margin: 10,
                    firstDay: 1,
                    nameMap: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
                },
                itemStyle:{
                    color:'#182724',
                    borderWidth: 1,
                    opacity:0.5
                }

            }],
            series: [ {
                name: '节假日',
                type: 'scatter',
                coordinateSystem: 'calendar',
                symbolSize: 1,
                label: {
                    normal: {
                        show: true,
                        formatter: function (params) {
                            return '\n\n' + (params.value[3] || '');
                        },
                        offset: [0, 5],
                        textStyle: {
                            fontSize: 10,
                            fontWeight: 700,
                            color: '#ee221a',
                            textBorderColor: '#eee'
                        }
                    }
                },
                data: cdata
            },
                {
                    name: '长假',
                    type: 'scatter',
                    coordinateSystem: 'calendar',
                    symbolSize: 1,
                    symbol: 'rect',
                    label: {
                        normal: {
                            show: true,
                            formatter: function (params) {
                                if(params.value[4] == '休'){
                                    return "{a|休}";
                                }
                            },
                            offset: [-10, -12],
                            rich: {
                                a: {
                                    fontSize: 10,
                                    fontWeight: 800,
                                    color: '#e00',
                                    textBorderColor: '#eee'
                                }
                            }
                        }
                    },
                    data: jjrdata
                },
                {
                    name: '周末上班',
                    type: 'scatter',
                    coordinateSystem: 'calendar',
                    symbolSize: 1,
                    symbol: 'rect',
                    label: {
                        normal: {
                            show: true,
                            formatter: function (params) {
                                if(params.value[4] == '班'){
                                    return "{a|班}";
                                }
                            },
                            offset: [-10, -15],
                            rich: {
                                a: {
                                    fontSize: 10,
                                    fontWeight: 800,
                                    color: '#11264f',
                                    textBorderColor: '#eee'
                                }
                            }
                        }
                    },
                    data: jjrdata
                },{
                    name: '事件',
                    type: 'scatter',
                    coordinateSystem: 'calendar',
                    symbolSize: 1,
                    label: {
                        normal: {
                            show: true,
                            formatter: function (params) {
                                return params.value[2];
                            },
                            offset: [0, 5],
                            textStyle: {
                                fontSize: 10,
                                color: '#f4e925'

                            }
                        }
                    },
                    data: cdata
                },{
                    name: '公立以及标记事件',
                    type: 'effectScatter',
                    coordinateSystem: 'calendar',
                    data: data1,
                    symbol:'path://m380.9075,231.05301l12.60495,0l3.89503,-12.22293l3.89503,12.22293l12.60495,0l-10.1976,7.5541l3.89523,12.22293l-10.19761,-7.55431l-10.19761,7.55431l3.89523,-12.22293l-10.19761,-7.5541z',
                    symbolSize: function(val) {
                        val = val[1] / 5;
                        val = val <5 ? 0.1 : Math.min(val, 30);
                        return val;
                    },
                    symbolOffset:[0, 10],
                    itemStyle: {
                        normal: {
                            color: '#ff030a'
                        }
                    },
                    label: {
                        show: true,
                        formatter:function(params) {
                            return params.value[0].split("-")[2]
                        },
                        offset: [7, -22],
                        color: '#4cc79b'
                    }
                }, {
                    name: '提示',
                    type: 'heatmap',
                    coordinateSystem: 'calendar',
                    data: heatmapData
                }]
            };
 </script>

工作中使用到的，总结归纳后，仅供各位大神们参考......

PyEcharts 基本图表之日历图
m0_62222486的博客
06-24 673
将日历图组件的位置设置为距顶部 120 像素，距左侧 30 像素，距右侧 30 像素；将日历图名称设置为“2020年步数情况”并使其位置距上侧 30 像素，左右居中；将日历坐标范围设置为 2020 年，并使用中文坐标轴标记星期以及月份；平台会运行你编写的代码进行绘图，并与预期图片进行比对。将日历图画布设置为宽 1600 像素，高 350 像素；将日历坐标范围设置为 2020 年，并设置其不显示；最大值设置为 30000 ，最小值设置为 500；最大值设置为 30000 ，最小值设置为 500；
[0617]基于JAVA的办公自动化智慧管理系统的设计与实现
muyu2980的专栏
08-20 694
公告管理、公文管理、审批管理等模块则为企业决策提供及时、准确的信息支持。综上所述，本课题以“基于Java的办公自动化智慧管理系统的设计与实现”为研究方向，旨在通过对各类办公事务的高度整合与智能处理，促进企业的现代化管理进程，进一步提升工作效率和竞争力，对于我国企业乃至全球范围内的组织机构都具有极其重要的理论与实践意义。再者，系统还包含了诸如门禁管理、订单管理、财务管理、报表管理等多元化模块，充分体现了办公自动化的全面性和深入性，满足企业在日常运营、生产销售、财务管控等多方面的需求。
echarts-日历图
王春红的博客
04-20 2468
Echarts实现日历图
小例子：在 ECharts 中实现日历图
weixin_34309543的博客
04-19 1944
在 ECharts 发布的 3.5 版本中，新增了日历坐标系，用于在日历中绘制图表。如何快速写出一个日历图呢？ 通过以下三个步骤即可实现上述效果： 第一步：引入js文件 下载的 最新完整版本 echarts.min.js 即可，无需再单独引入其他文件哦。 &lt;script src="echarts.min.js"&gt;&lt;/script&gt; &lt;script&gt; /...
Echarts 定制化日历图
c.j.h_code的博客
07-16 2128
最近在做可视化，发现日历图挺有意思，分享一波吧！！！将它拉下备用后面在此基础解释并改造，如下代码运行结果如图：下面开始改造代码了！！！
echarts案例之日历
i-cat的博客
10-26 1469
巧妙搞定日历之间的间隔~
后台h5界面
04-26
时间元素可能涉及到实时更新的时间戳或日历选择器，帮助用户管理任务或跟踪活动。图形通常包括数据可视化图表，如折线图、柱状图、饼图，用于展示后台数据的统计分析。分页是管理大量信息的常见方式，允许用户按需...
echarts属性之calendar
最新发布
lotte
10-29 1082
在ECharts中，我们非常有创意地实现了日历图，是通过使用日历坐标系组件来达到日历图效果的，如下方的几个示例图所示，我们可以在热力图、散点图、关系图中使用日历坐标系。在日历坐标系可以水平放置，也可以垂直放置。用于设置2个长度不为0的相连部分（线段，圆弧，曲线）如何连接在一起的属性（长度为0的变形部分，其指定的末端和控制点在同一位置，会被忽略）。另外，日历上的『月份』和『星期几』的文字，也可以较方便的切换中英文，甚至自定义。灵活利用 echarts 图表和坐标系的组合，以及 API，可以实现更丰富的效果。
Echarts：有趣的calendar-实现日历图
前端御书房
11-20 2914
其中比较有趣的就是calendar，calendar是一个坐标系，这个坐标系与一般的直角坐标系不同，日历坐标系是根据日历的布局来显示数据，显示的具体的形状由series中设置的类型决定，对于日历坐标系的应用一些网站已经使用，github上的贡献统计就有根据每天的上传的代码显示不同的颜色，csdn中的成就页面中也有显示。Echarts是一个开源的可视化图表库，支持丰富的图表，官网中还有大量示例可以选择使用、参考。就类似于上图的效果，今天就来实现一下。然后，创建数据，数据比较多使用函数创建。
echarts 日历图
give it a try
06-04 1228
下定决心，好好过一天 ~ var app = {}; var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; var cellSize = [80, 80]; var pieRadius = 30; function getVirtulData() { //获得随机数据 var date = +echarts.number.parseDate('20
ECharts日历热力图点击事件和选中日期加边框
前端程序媛_Ying博客
06-06 865
切换日期时,选中框问题和日总计问题。
vue+echarts封装日历图
weixin_45579925的博客
09-02 914
前端可视化封装日历图 html <template> <div ref="calendar" :style="{ width: `${width}px`, height: `${height}px` }" ></div> </template> js <script> export default { props: { height: { type: [String, Number], default
基于 Echarts 的 Python 图表库：Pyecahrts交互式的日历图和3D柱状图
happy game
02-01 2205
本文将引领读者深入了解数据可视化领域中的两个强大工具：Python 编程语言和 Pyecharts 库。我们将详细探讨如何使用 Pyecharts 创建令人印象深刻的柱状图和日历图，通过展示数据之美，提高信息传达的效果。日历图是一种用于展示时间数据的独特而强大的数据可视化工具。它以日历的形式呈现数据，让用户可以直观地看到时间的分布和趋势。在 Pyecharts 中，通过使用 Calendar 类，可以轻松地创建日历图。
ECharts官方教程(十一)【小例子：实现日历图】
极客神殿
12-19 7933
小例子：实现日历图在ECharts中，我们新增了日历坐标系，如何快速写出一个日历图呢？通过以下三个步骤即可实现上述效果：第一步：引入js文件下载的最新完整版本echarts.min.js即可，无需再单独引入其他文件哦<script src="echarts.min.js"></script> <script> // ... </script>第二步：指定DOM元素作为图表容器和ECharts
echarts 日历图calender
weixin_43294560的博客
08-03 5391
1.主要配置 var option = { visualMap: { 方便控制日历图每个单元的显示样式 ... }, calendar: { id:'', range: '2017' 某一年 '2017-02' 某个月 ['2017-01-02', '2017-02-23'] 某个区间 ['2017-01', '2017-02'] cellSize, 单元格宽高 dayL
Java 后端接口 ECharts 日历表统计每年每月每日的数据条数 ECharts Java 后端接口统计 利用日历表统计 MySQL 数据条数
Wxin0721的博客
08-19 2534
【代码】Java 后端接口 ECharts 日历表统计每年每月每日的数据条数 ECharts Java 后端接口统计 利用日历表统计 MySQL 数据条数。
echarts日历热力图 显示本月数据
weixin_45549435的博客
11-16 1768
echarts日历热力图 显示本月数据 option: { grid: { left:15, right: 15, bottom:10, top:20, containLabel: true }, xAxis: { type: 'category', boundaryGap: false, data: ['周一', '周二', '周三', '周四', '周五', '周六', '周.
echarts图表静态数据 象形柱形图、折线图、日历饼图、饼状图四种实现
xiaoming4965的博客
08-31 1029
echarts图表静态数据 象形柱形图、折线图、日历饼图、饼状图四种实现
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值