文档章节

XX专业大一课程表(echarts)

oisan_
 oisan_
发布于 2017/09/07 15:14
字数 1217
阅读 33
收藏 0
点赞 1
评论 0

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>

如图

© 著作权归作者所有

共有 人打赏支持
oisan_
粉丝 1
博文 45
码字总数 21798
作品 0
广州
前端知识 | 浅谈在React中使用echarts

方法一: echarts-for-react 是一个非常简单的针对于 React 的 Echarts 封装插件。 和使用所有其他插件一样,首先,我们需要 install 它: 第一步: npminstall --save echarts(依赖) npmi...

海说软件
06/26
0
0
Echarts-地图扩展-标准geoJson格式扩展地图-例子

本人菜鸟一枚,最近搞echarts地图。看到官方给的“标准geoJson格式扩展地图-全国主要城市”的例子,瞬间就蒙逼了。(http://echarts.baidu.com/echarts2/doc/example/map20.html ,2016年8月...

夜辰
2015/07/17
0
13
Echarts视频教程从入门到实战

Echarts视频教程从入门到实战 网盘地址:https://pan.baidu.com/s/1p-G9UbKmXFtnuJEdiLSw2w 密码:0e9u 备用地址(腾讯微云):https://share.weiyun.com/5sKBF8E 密码:4ms8rp 有这样一款制...

放风筝好不
04/16
0
0
Echarts使用心得总结(二)

Echarts使用心得总结(二) 前言: 前一段时间一直都挺忙的,各种事,也没来得及每周的总结,趁着晚上的一点时间把项目中用的Echart中常用的各种图表给抽象总结了一下,趁着周末跟大家分享一...

双月通天
2014/07/14
0
0
响应式 React Native Echarts 组件

一种在 React Native 中封装的响应式 Echarts 组件,使用与示例请参见:react-native-echarts-demo 近年来,随着移动端对数据可视化的要求越来越高,类似 MPAndroidChart 这样的传统图表库已...

entronad
07/12
0
0
ECharts 简单的使用过程,完美的图形展示

最近开发项目时要做图形报表,网上找了些东西,还是觉得ECharts靠谱,具备诸多优点,功能强大,图表完美,兼容性也比较好,基于html5动画渲染。 官网的demo中是写得比较全了,但很多用不到的...

kevin小当家
2015/08/07
0
0
ECharts整合HT for Web的网络拓扑图应用

ECharts图形组件在1.0发布的时候我就已经有所关注,今天在做项目的时候遇到了图标的需求,在HT for Web上也有图形组件的功能,但是在尝试了下具体实现后,发现HT for Web的图形组件是以矢量的...

xhload3d
2015/03/16
0
0
行者/ECharts-Helper

ECharts-Helper 项目介绍 echart-helper是什么? echart-helper是一款echarts辅助开发插件,能够帮助开发者快速构建echart图表。 安装教程 引入jquery、echarts及echarts.helper三个文件即可...

行者
06/25
0
0
v-charts 1.17.8 发布,Vue2.x 封装的 Echarts 图表组件

v-charts 是饿了么开源的基于 Vue2.x 封装的 Echarts 图表组件,特性: 统一的数据格式: 使用对前后端都友好的数据格式,方便生成和修改。 简化的配置项: 通过简化的配置项,可以轻松实现复...

王练
07/14
0
0
Echarts-百度地图省分着色

通过Echarts3结合百度地图,对全国省分进行着色。 起因 由于Echarts3中,不再使用china.js文件: ECharts 之前提供下载的矢量地图数据来自第三方,由于部分数据不符合国家《测绘法》规定,目...

莫显辉
05/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

崛起于Springboot2.X之thymeleaf(24)

1、依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId></dependency> 2、application.properties spring......

木九天
5分钟前
0
0
spring-boot:run启动时,指定spring.profiles.active

Maven启动指定Profile通过-P,如mvn spring-boot:run -Ptest,但这是Maven的Profile。 如果要指定spring-boot的spring.profiles.active,则必须使用mvn spring-boot:run -Drun.profiles=test......

夜黑人模糊灬
6分钟前
0
0
大数据分析挖掘技术学习:Python文本分类

引言 文本分类作为自然语言处理任务之一,被广泛应用于解决各种商业领域的问题。文本分类的目的是将 文本/文档 自动地归类为一种或多种预定义的类别。常见的文本分类应用如下: • 理解社交媒...

加米谷大数据
11分钟前
0
0
istio-0.8 指标监控,prometheus,grafana

配置: https://istio.io/docs/tasks/telemetry/metrics-logs/ https://istio.io/docs/tasks/telemetry/tcp-metrics/ envoy拦截请求>上报mixer>对接prometheus>grafana 效果截图: promethe......

xiaomin0322
13分钟前
0
0
公众号推荐

阿里技术 书籍:《不止代码》

courtzjl
16分钟前
0
0
关于改进工作效率

1.给不同的业务线建立需求群,所有的数据需求都在群里面提。 2.对于特别难搞定的事情,到对应的技术哪去做,有问题随时沟通。 3.定期给工作总结形成方法论。 4.学习新的技术,尝试用新的方法...

Avner
22分钟前
0
0
关于thinkphp 框架开启路径重写,无法获取Authorization Header

今天遇到在thinkphp框架中获取不到header头里边的 Authorization ,后来在.htaccess里面加多一项解决,记录下: <IfModule mod_rewrite.c> Options +FollowSymlinks -Multiviews Rewrite......

殘留回憶
26分钟前
0
0
centos 使用yum安装nginx后如何添加模块 10

centos 使用yum安装nginx后如何添加模块 10 centos6.2版本,使用yum来安装了nginx,但是最近需要重新添加模块,所以就傻了,询问下有人知道怎么重新添加模块吗? PS:俺是新手,需要高手救助...

linjin200
29分钟前
0
0
dubbo 资料

dubbo资料网站: https://www.cnblogs.com/a8457013/p/7818925.html

zaolonglei
30分钟前
0
0
大型网站,你是如何架构的?

大型网站,你是如何架构的?

微小宝
32分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部