XX专业大一课程表(echarts)

最新推荐文章于 2024-04-06 21:04:19 发布
最新推荐文章于 2024-04-06 21:04:19 发布
阅读量995 收藏 4
点赞数 1
文章标签： javascript python ViewUI
原文链接：https://my.oschina.net/oisanblog/blog/1531301
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

echarts二维坐标做个课程表。

不多说，代码如下。

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>课程表</title>
    <script src="echarts.js"></script>
</head>

<body>
    <div id="main" style="width:100%;height:100%"></div>

    <script type="text/javascript">
        var classDatas1 = [
            ['8:30-9:10', '周一', '\n英语\n1栋306'],
            ['9:20-10:00', '周一', '\n高数\n12栋110'],
            ['10:20-11:00', '周一', '\nC语言\n10栋603'],
            ['11:10-11:50', '周二', '\n马克思主义概论\n10栋501'],
            ['15:20-16:00', '周四', '\n心理学\n10栋201'],
        ];
        var classDatas2 = [
            ['8:30-9:10', '周一', '\n英语\n1栋306'],
            ['9:20-10:00', '周一', '\n体育\n12栋106'],
            ['10:20-11:00', '周一', '\nC语言\n10栋301'],
            ['11:10-11:50', '周三', '\n马克思主义概论\n10栋501'],
            ['14:30-15:10', '周三', '\n计算机基础\n10栋412'],
        ];
        option = {
            backgroundColor: 'RGB(240, 248, 255)',
            title: {
                text: 'XX专业大一课程表',
                subtext: '数据虚构',

            },
            legend: {
                top: 20,
                right: 80,
                selectedMode: 'single',
                data: ['单周', '双周'],
                inactiveColor: '#9FB6CD',
                textStyle: {
                    color: '#6495ED'
                }

            },
            grid: {},
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            tooltip: {
                show: true,
                formatter:'{c}',
                //trigger:'axis',
                hideDelay: 300,
            },
            xAxis: {
                type: 'category',
                data: ['', '8:30-9:10', '9:20-10:00', '10:20-11:00', '11:10-11:50', '14:30-15:10', '15:20-16:00', '16:20-17:00', '17:10-17:50', '19:10-20:50'],
                boundaryGap: false,
                splitLine: {
                    show: true
                },
                axisLabel: {
                    interval: 0,
                    rotate: 30
                }

            },

            yAxis: {
                type: 'category',
                boundaryGap: false,
                splitLine: {
                    show: true
                },
                data: ['', '周一', '周二', '周三', '周四', '周五','']
            },
            series: [{
                name: '单周',
                type: 'scatter',
                symbol: 'pin',
                symbolSize: 60,
                //symbolRotate:30,
                label: {
                    normal: {
                        show: true,
                        rotate: 30,
                        backgroundColor: 'rgb(224,255,255)',
                        borderColor: '#aaa',
                        fontWeight: 200,
                        borderWidth: 1,
                        borderRadius: 4,
                        formatter: [
                            '{a|{c}}'
                        ].join('\n'),
                        rich: {
                            a: {
                                align: 'center',
                                color: '#1E90FF',
                                fontSize: 10,
                                textShadowBlur: 2,
                                //textShadowColor: '#7A67EE',
                                textBorderColor: '#9F79EE',
                                textBorderWidth: 1
                            },
                        }
                    }
                },
                coordinateSystem: 'cartesian2d',
                data: classDatas1

            }, {
                name: '双周',
                type: 'scatter',
                symbol: 'pin',
                symbolSize: 60,
                //symbolRotate:30,
                label: {
                    normal: {
                        show: true,
                        rotate: 30,
                        backgroundColor: 'rgb(224,255,255)',
                        borderColor: '#aaa',
                        borderWidth: 1,
                        borderRadius: 4,
                        formatter: [
                            '{a|{c}}'
                        ].join('\n'),
                        rich: {
                            a: {
                                align: 'center',
                                color: '#1E90FF',
                                fontSize: 10,
                                textShadowBlur: 1,
                                //textShadowColor: '#7A67EE',
                                textBorderColor: '#9F79EE',
                                textBorderWidth: 1
                            },
                        }
                    }
                },
                coordinateSystem: 'cartesian2d',
                data: classDatas2

            }]
        };
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption(option);
    </script>
</body>

</html>

如图：

-9-26对应星期几高亮

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>课程表</title>
    <script src="echarts.js"></script>
</head>

<body>
    <div id="main" style="width:100%;height:100%"></div>

    <script type="text/javascript">
        var week = new Date().getDay();
        var a = 0;
        var classDatas1 = [{
            value: ['8:30-9:10', '周一', '\n英语\n1栋306'],
        }, {
            value: ['9:20-10:00', '周一', '\n高数\n12栋110'],
        }, {
            value: ['10:20-11:00', '周一', '\nC语言\n10栋603'],
        }, {
            value: ['11:10-11:50', '周二', '\n马克思主义概论\n10栋501'],
        }, {
            value: ['11:10-11:50', '周三', '\n体育\n12栋106'],
        }, {
            value: ['14:30-15:10', '周三', '\nC语言\n10栋603'],
        }, {
            value: ['16:20-17:00', '周四', '\n高数\n12栋110'],
        }, {
            value: ['17:10-17:50', '周四', '\n毛邓论\n10栋312'],
        }, {
            value: ['15:20-16:00', '周五', '\n心理学\n3栋201'],
        },];

        var classDatas2 = [{
            value: ['8:30-9:10', '周一', '\n英语\n1栋306'],
        }, {
            value: ['9:20-10:00', '周一', '\n体育\n12栋106'],
        }, {
            value: ['10:20-11:00', '周二', '\nC语言\n10栋301'],
        }, {
            value: ['11:10-11:50', '周二', '\n马克思主义概论\n10栋501'],
        }, {
            value: ['11:10-11:50', '周三', '\n计算机基础\n10栋412'],
        }, {
            value: ['14:30-15:10', '周三', '\n毛邓论\n10栋312'],
        }, {
            value: ['16:20-17:00', '周四', '\n高数\n12栋110'],
        }, {
            value: ['17:10-17:50', '周四', '\n毛邓论\n10栋312'],
        }, {
            value: ['14:30-15:10', '周五', '\nC语言\n6栋301'],
        }, {
            value: ['15:20-16:00', '周五', '\n心理学\n10栋201'],
        }];

        switch (week) {
            case 1:
                a = '周一'
                break;
            case 2:
                a = '周二'
                break;
            case 3:
                a = '周三'
                break;
            case 4:
                a = '周四'
                break;
            case 5:
                a = '周五'
                break;
            default:
        }
        for (var i = 0; i < classDatas1.length; i++) {
            if (a == classDatas1[i].value[1]) {
                classDatas1[i].symbolSize = 40;
                classDatas1[i].symbolOffset = [0, '-10%'];
                classDatas1[i].itemStyle = {
                    normal: {
                        color: '#FF83FA'
                    }
                };
            }
        }
        for (var i = 0; i < classDatas2.length; i++) {
            if (a == classDatas2[i].value[1]) {
                classDatas2[i].symbolSize = 40;
                classDatas2[i].symbolOffset = [0, '-10%'];
                classDatas2[i].itemStyle = {
                    normal: {
                        color: '#FF83FA'
                    }
                };
            }
        }

        var ydata = [{
            value: '周一',
        }, {
            value: '周二',
        }, {
            value: '周三',
        }, {
            value: '周四',
        }, {
            value: '周五',
        }, ''];
        if (week == 0) {
            week = 6;
        }

        function sparea() {
            var areas = {
                color: ['#F0F8FF', '#F0F8FF', '#F0F8FF', '#F0F8FF', '#F0F8FF']
            };
            areas.color[week - 1] = '#feeeed';
            return areas;
        }
        var spareas = sparea();
        ydata[week - 1].textStyle = {
            color: '#FF1493'
        };
        option = {
            backgroundColor: 'RGB(240, 248, 255)',
            title: {
                text: 'XX专业大一课程表',
                subtext: '数据虚构',

            },
            legend: {
                top: 20,
                right: 80,
                selectedMode: 'single',
                data: ['单周', '双周'],
                inactiveColor: '#9FB6CD',
                textStyle: {
                    color: '#6495ED'
                }

            },
            grid: {},
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            tooltip: {
                show: true,
                formatter: '{c}',
                //trigger:'axis',
                hideDelay: 300,
            },
            xAxis: {
                type: 'category',
                data: ['', '8:30-9:10', '9:20-10:00', '10:20-11:00', '11:10-11:50', '14:30-15:10', '15:20-16:00', '16:20-17:00', '17:10-17:50', '19:10-20:50'],
                boundaryGap: false,
                splitLine: {
                    //show: true
                },
                axisLabel: {
                    interval: 0,
                    rotate: 30
                }

            },

            yAxis: {
                type: 'category',
                boundaryGap: false,
                splitLine: {
                    show: true
                },
                splitArea: {
                    show: true,
                    areaStyle: spareas
                },
                axisLine: {
                    show: false
                },
                data: ydata
            },
            series: [{
                name: '单周',
                type: 'scatter',
                symbol: 'pin',
                symbolSize: 20,
                //symbolRotate:30,
                label: {
                    normal: {
                        show: true,
                        rotate: 30,
                        position:'top',
                        backgroundColor: 'rgb(224,255,255)',
                        borderColor: '#aaa',
                        fontWeight: 200,
                        borderWidth: 1,
                        borderRadius: 4,
                        formatter: [
                            '{a|{c}}'
                        ].join('\n'),
                        rich: {
                            a: {
                                align: 'center',
                                color: '#1E90FF',
                                fontSize: 10,
                                textShadowBlur: 2,
                                //textShadowColor: '#7A67EE',
                                textBorderColor: '#9F79EE',
                                textBorderWidth: 1
                            },
                        }
                    },
                    emphasis: {
                        show: true,
                        //rotate: 30,
                        backgroundColor: 'rgb(224,255,255)',
                        borderColor: '#aaa',
                        fontWeight: 200,
                        borderWidth: 1,
                        borderRadius: 4,
                        formatter: [
                            '{a|{c}}'
                        ].join('\n'),
                        rich: {
                            a: {
                                align: 'center',
                                color: '#1E90FF',
                                fontSize: 20,
                                textShadowBlur: 2,
                                //textShadowColor: '#7A67EE',
                                textBorderColor: '#9F79EE',
                                textBorderWidth: 1
                            }
                        }
                    }
                },

                itemStyle: {
                    normal: {
                        color: '#f58f98',
                    }
                },
                coordinateSystem: 'cartesian2d',
                data: classDatas1

            }, {
                name: '双周',
                type: 'scatter',
                symbol: 'pin',
                symbolSize: 20,
                //symbolRotate:30,
                label: {
                    normal: {
                        show: true,
                        rotate: 30,
                        position:'top',
                        backgroundColor: 'rgb(224,255,255)',
                        borderColor: '#aaa',
                        borderWidth: 1,
                        borderRadius: 4,
                        formatter: [
                            '{a|{c}}'
                        ].join('\n'),
                        rich: {
                            a: {
                                align: 'center',
                                color: '#1E90FF',
                                fontSize: 10,
                                textShadowBlur: 1,
                                //textShadowColor: '#7A67EE',
                                textBorderColor: '#9F79EE',
                                textBorderWidth: 1
                            },
                        }
                    },
                    emphasis: {
                        show: true,
                        //rotate: 30,
                        backgroundColor: 'rgb(224,255,255)',
                        borderColor: '#aaa',
                        fontWeight: 200,
                        borderWidth: 1,
                        borderRadius: 4,
                        formatter: [
                            '{a|{c}}'
                        ].join('\n'),
                        rich: {
                            a: {
                                align: 'center',
                                color: '#1E90FF',
                                fontSize: 20,
                                textShadowBlur: 2,
                                //textShadowColor: '#7A67EE',
                                textBorderColor: '#9F79EE',
                                textBorderWidth: 1
                            }
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#f58f98',
                    }
                },
                coordinateSystem: 'cartesian2d',
                data: classDatas2

            }]
        };
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption(option);
    </script>
</body>

</html>

如图

转载于:https://my.oschina.net/oisanblog/blog/1531301

weixin_34007020
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js案例 —— 课程管理系统三（Echars组件实现图表展示数据）
weixin_43340295的博客
12-26 650
一、Echars组件介绍 Echarts组件就是JavaScript的图表库。使用折线图、饼图、柱状图来展示页面数据。 使用Echarts插件 1、安装 npm install echarts --save 2、使用 引入echarts插件 import echarts from 'echarts' 提供一个具备大小的容器（div） <div id="main" style="width: 600px;height:400px;"></div> 初始化echarts
班级管理,课程管理(ztree,echart的使用)
Zhu的博客
06-07 810
班级管理: 与其他模块管理相比,增了上传解析文件的部分,即可以通过表格文件对班级成员完成添加操作 前端代码: 下面是layui中上传文件所需要的配置,以及上传成功后的刷新操作 &lt;button type="button" class="layui-btn" id="addStudentByExcel"&gt;&lt;i class="layui-icon"&gt;&lt;/
12.9工作学习记录 课程统计 Echarts表格插件 Stream.map
qq_42585768的博客
12-09 403
map方法就是针对数据对象,通过调用实体类类中定义的方法,对对象中的某个值进行提取,或者对数据对象进行处理,然后将新生成的对象数据收集赋值到新的集合.思路 这两个集合里面的数据 其实就是从findcount方法里面查出的集合里面拿出来的 拆成两份 一份是日期 一份是该日期的用户数。因为上面的data数组存储的是日期 下面的是该日期的用户数量 Echarts要求要返回两个不同的数组。个人的理解:就是在流中对方法的一种调用。//提取对象中的姓名一列的数据。//对集合中的字符转换为大写。
在Dashboard中显示课表/日程表
weixin_30339457的博客
08-04 231
　　对于使用Mac系统的朋友们来说，Dashboard一定并不陌生。通过Dashboard我们可以方便地添加小组件，查看日历，天气，便签等等。然而，这些都是“定制”的内容。如何在Dashboard中显示自定义的东西，比如课程表，日程表呢？下面简单的几步将会教给你。 　　首先看一下效果： 　　中间的就是我们本次要加入的课程表了。左侧的校历也是相同的道理。 　　那怎么做呢？第一步，制作要查看...
画二维表，类似课程表
Masha
06-19 346
&lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt; &lt;% String path = request.getContextPath(); %&gt; &lt;%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/
echarts图表演示图表演示
张晨光老师的播客
01-02 862
比如说，公司现在接一个项目，这个中信银行，针对之前所有的贷款、大 小客户，要做出来图表系统（演示和查看）、报表系统（用来打印）。郑州的大数据产业局，黄强：图表系统。官网：源于百度。
XX计算机工程专业.doc
12-16
XX计算机工程专业.doc
XX软件工程专业排名.doc
12-21
XX软件工程专业排名.doc
XX计算机工程专业样.doc
12-18
XX计算机工程专业样.doc
XX大学交流(他专业)学生课程学分认定表.doc
07-09
《XX大学交流(他专业)学生课程学分认定表》是针对在校学生参与跨校、跨专业交流学习后，对其所修课程进行学分转换的重要文档。这份表格主要用于确保学生在交流期间所学课程能够得到母校的认可，以便顺利计入其在原...
特别特别非常漂亮的课程表
09-02
漂亮的课程表漂亮的课程表漂亮的课程表漂亮的课程表漂亮的课程表漂亮的课程表漂亮的课程表漂亮的课程表漂亮的课程表漂亮的课程表漂亮的课程表漂亮的课程表漂亮的课程表漂亮的课程表漂亮的课程表漂亮的课程表漂亮的课程表漂亮的课程表漂亮的课程表漂亮的课程表漂亮的课程表漂亮的课程表漂亮的课程表漂亮的课程表
中国软件工程专业大学排行xx.doc
01-06
中国软件工程专业大学排行xx.doc
210. 课程表 II
L_Aster的专栏
04-01 316
210. 课程表 II class Solution { public: vector&lt;int&gt; findOrder(int numCourses, vector&lt;pair&lt;int, int&gt;&gt;&amp; prerequisites) { vector&lt;int&gt; indegree(numCourses,0),res; ...
echarts系列——时刻表网格图
瞧，一条会动的河粉
07-02 1160
网上翻了好久，发现基本没人写关于事件走向的网格图（x轴为时间，y轴为事件或地点），于是自己实现了一个，下面给出一个简版不说废话直接上代码，getAllDayTime传入0≤x≤y≤23的数，x轴可有以分钟为刻度function getAllDayTime(x, y) { var time = []; for(var i = x; i &lt; y; i++) { var hour = i;...
ECharts实现数据可视化入门教程（超详细）
最新发布
2401_84098033的博客
04-06 935
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。什么？你问面试题资料在哪里，这不是就在你眼前吗（滑稽。
Spring + ECharts数据可视化
Java 以及 后端，关注我，没错的
06-30 1004
Apache ECharts是一个基于 JavaScript 的开源可视化图表库，在网页上实现数据的可视化，非常好用，来简单写一个demo，实践一下。
echarts基础图表教程（动态创建）
程序员蒋老湿的博客
05-08 1849
饼图所需要的数据结构是Map形式的，如果有多个饼图，那么多门肯定是要用List>这样的格式来创建多个不同的数据集，参考如下代码 List> departmentPublishCount = departmentPublishStatsService.queryDepartmentPublishCount(paramMap); return JSONArray.toJSONString(d
如何实现一个简单教务系统的课程表查询
热门推荐
qq_38882976的博客
07-05 2万+
一、设计思路1.     首先做好课程表静态页面(可用Sublime，Dreawvear等开发工具编写，本人用Sublime编写，代码稍后附上)2.     数据库设计(可用access数据库、sql数据库或者mysql数据库，根据自己习惯选用数据库，本人选用access数据库。注意：连接不同数据库需要不同数据库驱动，自行百度下载)                                 ...
智能产品开发与应用专业大一学生职业生涯规划书1000字
04-03
尊敬的招聘委员会： 我是一名智能产品开发与应用专业大一学生，我对这个领域充满热情和兴趣。在此，我想分享一下我的职业生涯规划，希望能够成为贵公司的一员。 首先，我想介绍一下我的专业。智能产品开发与应用专业是一门涉及多个学科领域的综合性专业，包括机械、电子、计算机、通信等。我们的课程设置涵盖了智能硬件设计、人机交互、移动应用开发、云计算等多个方面，使我们能够掌握从产品设计到应用开发的全链路知识。同时，我们也学习了一定的管理、市场营销等方面的知识，为未来的职业生涯做好了准备。 接下来，我想谈一下我的职业规划。我希望能够成为一名智能产品开发工程师，致力于研发高质量、高性能的智能产品，并将其应用到实际生活中。作为一名优秀的工程师，我需要具备扎实的技术功底，能够灵活运用各种技术工具和方法，以不断创新和提升产品的品质和性能。同时，我还需要具备良好的团队协作能力和沟通能力，能够与其他团队成员协作，推动项目的顺利进行。 在实现职业规划的过程中，我还将继续不断学习和提升自己。我将积极参加各种课程、培训和实践活动，不断扩充自己的知识和技能。同时，我还将积极参与各种社会活动，与各行各业的人交流，了解行业动态和市场需求，为自己的职业生涯做好充分准备。 最后，我想重申一下我对贵公司的热情和信心。我相信，在贵公司的帮助和指导下，我将成为一名优秀的智能产品开发工程师，为公司和社会做出贡献。如果您能够给予我一个机会，我将竭尽所能，不负期望。 谢谢您的阅读！ 此致 敬礼！ xxx 20xx年x月x日

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值