XX专业大一课程表(echarts)
XX专业大一课程表(echarts)
oisan0225 发表于3个月前
XX专业大一课程表(echarts)
  • 发表于 3个月前
  • 阅读 20
  • 收藏 0
  • 点赞 1
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

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>

如图

标签: ECharts
共有 人打赏支持
粉丝 0
博文 33
码字总数 18541
×
oisan0225
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: