XX专业大一课程表(echarts)

最新推荐文章于 2024-09-22 11:17:00 发布
最新推荐文章于 2024-09-22 11:17:00 发布
阅读量1k 收藏 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
关注
Vue.js案例 —— 课程管理系统三（Echars组件实现图表展示数据）
weixin_43340295的博客
12-26 670
一、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 824
班级管理: 与其他模块管理相比,增了上传解析文件的部分,即可以通过表格文件对班级成员完成添加操作 前端代码: 下面是layui中上传文件所需要的配置,以及上传成功后的刷新操作 &lt;button type="button" class="layui-btn" id="addStudentByExcel"&gt;&lt;i class="layui-icon"&gt;&lt;/
js制作简单的课程表,不重复添加
c_bulrush的博客
09-21 6429
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } ul{ width
12.9工作学习记录 课程统计 Echarts表格插件 Stream.map
qq_42585768的博客
12-09 437
map方法就是针对数据对象,通过调用实体类类中定义的方法,对对象中的某个值进行提取,或者对数据对象进行处理,然后将新生成的对象数据收集赋值到新的集合.思路 这两个集合里面的数据 其实就是从findcount方法里面查出的集合里面拿出来的 拆成两份 一份是日期 一份是该日期的用户数。因为上面的data数组存储的是日期 下面的是该日期的用户数量 Echarts要求要返回两个不同的数组。个人的理解:就是在流中对方法的一种调用。//提取对象中的姓名一列的数据。//对集合中的字符转换为大写。
在Dashboard中显示课表/日程表
weixin_30339457的博客
08-04 241
　　对于使用Mac系统的朋友们来说，Dashboard一定并不陌生。通过Dashboard我们可以方便地添加小组件，查看日历，天气，便签等等。然而，这些都是“定制”的内容。如何在Dashboard中显示自定义的东西，比如课程表，日程表呢？下面简单的几步将会教给你。 　　首先看一下效果： 　　中间的就是我们本次要加入的课程表了。左侧的校历也是相同的道理。 　　那怎么做呢？第一步，制作要查看...
画二维表，类似课程表
Masha
06-19 354
&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 879
比如说，公司现在接一个项目，这个中信银行，针对之前所有的贷款、大 小客户，要做出来图表系统（演示和查看）、报表系统（用来打印）。郑州的大数据产业局，黄强：图表系统。官网：源于百度。
HTML大屏报表-xx矿产资源大数据监管平台-Echarts图标大屏-源码-解压即用.zip
06-03
ECharts，作为一款使用广泛的数据可视化库，展现了其强大的图表渲染和交互能力。它支持多种图表类型，包括折线图、柱状图、饼图、散点图等，几乎涵盖了所有常见的数据展示需求。 ECharts的强大之处在于其高度的可...
HTML大屏报表-xx区智慧旅游综合服务平台-Echarts图标大屏-源码-解压即用.zip
06-03
ECharts，作为一款使用广泛的数据可视化库，展现了其强大的图表渲染和交互能力。它支持多种图表类型，包括折线图、柱状图、饼图、散点图等，几乎涵盖了所有常见的数据展示需求。 ECharts的强大之处在于其高度的可...
2021年XX大学大一开学典礼演讲稿.pdf
09-27
2021年XX大学大一开学典礼演讲稿.pdf
特别特别非常漂亮的课程表
09-02
漂亮的课程表漂亮的课程表漂亮的课程表漂亮的课程表漂亮的课程表漂亮的课程表漂亮的课程表漂亮的课程表漂亮的课程表漂亮的课程表漂亮的课程表漂亮的课程表漂亮的课程表漂亮的课程表漂亮的课程表漂亮的课程表漂亮的课程表漂亮的课程表漂亮的课程表漂亮的课程表漂亮的课程表漂亮的课程表漂亮的课程表漂亮的课程表
20XX年大一上学期心理委员个人工作总结.pdf
10-14
20XX年大一上学期心理委员个人工作总结.pdf
XX集团工程技术职种课程表DOC
12-10
XX集团工程技术职种课程表DOC对一个HR的帮助是很大的，能够帮助更好的管理公司，让事情变得更加简单，小...该文档为XX集团工程技术职种课程表DOC，是一份很不错的参考资料，具有较高参考价值，感兴趣的可以下载看看
210. 课程表 II
L_Aster的专栏
04-01 326
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 1174
网上翻了好久，发现基本没人写关于事件走向的网格图（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 953
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。什么？你问面试题资料在哪里，这不是就在你眼前吗（滑稽。
Echarts入门(SpringBoot + Vue)
欢迎一起学习交流
07-01 888
ECharts是一个使用 JavaScript 实现的"数据可视化"库, 它可以流畅的运行在 PC 和移动设备上
Spring + ECharts数据可视化
Java 以及 后端，关注我，没错的
06-30 1038
Apache ECharts是一个基于 JavaScript 的开源可视化图表库，在网页上实现数据的可视化，非常好用，来简单写一个demo，实践一下。
计算机毕业设计之：基于微信小程序的诗词智能学习系统（源码+文档+解答）
最新发布
程序员阿龙的博客
09-22 4220
博主介绍： ✌我是阿龙，一名专注于Java技术领域的程序员，全网拥有10W+粉丝。作为CSDN特邀作者、博客专家、新星计划导师，我在计算机毕业设计开发方面积累了丰富的经验。同时，我也是掘金、华为云、阿里云、InfoQ等平台的优质作者。通过长期分享和实战指导，我致力于帮助更多学生完成毕业项目和技术提升。 技术范围： 我熟悉的技术领域涵盖SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等方
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值