文档章节

XX专业大一课程表(echarts)

oisan__
 oisan__
发布于 2017/09/07 15:14
字数 1217
阅读 38
收藏 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
博文 55
码字总数 25205
作品 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
css 渐隐渐现、echarts 圆环图、百度地图覆盖物、echarts水球图(360加速球效果)

说一下知识点: 1.水球是echarts的插件echarts-liquidfill,官网下载-扩展下载中可以拿到,git传送阵https://github.com/ecomfe/echarts-liquidfill 2.水球上的数字是动态滚动效果,用的是插...

宿管小阿姨
07/26
0
0
vue引入echart.js打包时特别大

link : https://www.cnblogs.com/strinkbug/p/5786222.html 一、i在html中添加script标签如下: <script src="//cdn.bootcss.com/echarts/3.2.2/echarts.simple.min.js"></script> 二、在web......

Js_Mei
09/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

安秒平衡

相关介绍 电容两端的电压不能突变。 一般用在平衡条件下的开关电路中。 流经电容的电流平均值在一个开关周期内为零。 定义 安秒平衡原则:在稳态工作的开关电源中电容两端的正安秒值等于负安...

colinux
今天
2
0
Apache日志不记录访问静态文件,访问日志切割,静态元素过期时间设置

Apache配置不记录访问静态文件的日志 网站大多元素为静态文件,如图片、css、js等,这些元素可以不用记录 vhost原始配置 <VirtualHost *:80> ServerAdmin test@163.com DocumentRoo...

野雪球
今天
3
0
聊聊storm的ICommitterTridentSpout

序 本文主要研究一下storm的ICommitterTridentSpout ICommitterTridentSpout storm-core-1.2.2-sources.jar!/org/apache/storm/trident/spout/ICommitterTridentSpout.java public interface......

go4it
今天
4
0
Ubuntu常用操作

查看端口号 netstat -anp |grep 端口号 查看已使用端口情况 netstat -nultp(此处不用加端口号) netstat -anp |grep 82查看82端口的使用情况 查找被占用的端口: netstat -tln netstat -tl...

hc321
昨天
3
0
网站cdn的静态资源突然访问变的缓慢,问题排查流程

1.首先我查看了一下是否自己的网络问题,通过对比其他资源的访问速度和下载速度,确认不是 2.通过ping 和 tracert 判断cdn域名能否正常访问,(最后回想感觉这一步可以省略,因为每次最终能访...

小海bug
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部