基于Echarts实现可视化数据大屏城市规划系统

于 2022-08-15 11:27:16 发布
阅读量895 收藏 3
点赞数
分类专栏： Echarts大屏数据可视化 文章标签： echarts javascript echarts大数据可视化 vue echarts可视化数据大屏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bigwhiteshark/article/details/126343618
版权

前言

🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。

本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

⚽精彩专栏推荐👇🏻👇🏻👇🏻

❤ 【作者主页——🔥获取更多优质源码】

❤ 【1000套 毕设项目精品实战案例】

❤ 【 20套 VUE+Echarts 大数据可视化源码】

❤ 【150套 HTML+ Echarts大数据可视化源码 】

文章目录

一、Echart是什么

ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

二、ECharts入门教程

5 分钟上手ECharts

三、作品演示

在这里插入图片描述

四、代码实现

1.HTML


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    <meta name="renderer" content="webkit">
    <title>Et使用示例网页</title>
    <link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
    <link rel="stylesheet" href="assets/css/index.css" />
</head>

<body>

    <div class="header">
        Echart图例使用
        <a href="javascript:;" class="a-access">
<button class="button type1">
返回
</button>
</a>
    </div>

    <div class="main clearfix">
        <div class="main-left">
            <div class="border-container">
                <div class="name-title">
                    ===
                </div>
                <div id="radar"></div>
                <span class="top-left border-span"></span>
                <span class="top-right border-span"></span>
                <span class="bottom-left border-span"></span>
                <span class="bottom-right border-span"></span>
            </div>
            <div class="border-container">
                <div class="name-title">
                    ===
                </div>
                <div id="graduateyear"></div>
                <ul class="three-pie clearfix">
                    <li>
                        <div id="sexrate"></div>
                    </li>
                    <li>
                        <div id="householdrate"></div>
                    </li>
                </ul>
                <span class="top-left border-span"></span>
                <span class="top-right border-span"></span>
                <span class="bottom-left border-span"></span>
                <span class="bottom-right border-span"></span>
            </div>
        </div>
        <div class="main-middle">
            <div class="border-container">
                <div id="mapadd"></div>
                <div class="number-show">
                    <ul>
                        <li>
                            <span class="span-name">第一标准</span>
                        </li>
                        <li>
                            <span class="span-number-show">653</span>
                        </li>
                        <li>
                            <span class="span-name">第二标准</span>
                        </li>
                        <li>
                            <span class="span-number-show">836252</span>
                        </li>
                        <li>
                            <span class="span-name">第三标准</span>
                        </li>
                        <li>
                            <span class="span-number-show">32162</span>
                        </li>
                    </ul>
                </div>
                <span class="top-left border-span"></span>
                <span class="top-right border-span"></span>
                <span class="bottom-left border-span"></span>
                <span class="bottom-right border-span"></span>
            </div>
            <div class="border-container">
                <ul class="teacher-pie clearfix">
                    <li>
                        <div class="name-title">
                            =======
                        </div>
                        <div id="courserate"></div>
                    </li>
                    <li>
                        <div class="name-title">
                            =======
                        </div>
                        <div id="professionrate"></div>
                    </li>
                </ul>
                <div class="name-title">
                    ===
                </div>
                <div id="changedetail"></div>
                <span class="top-left border-span"></span>
                <span class="top-right border-span"></span>
                <span class="bottom-left border-span"></span>
                <span class="bottom-right border-span"></span>
            </div>
        </div>
        <div class="main-right">
            <div class="border-container">
                <div class="name-title">
                    ===
                </div>
                <table class="table table-kingdargen">
                    <thead>
                        <tr>
                            <th>test1</th>
                            <th>test2</th>
                            <th>test3</th>
                            <th>test4</th>
                            <th>test5</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>a</td>
                            <td>268</td>
                            <td>212</td>
                            <td>342</td>
                            <td>256</td>
                        </tr>
                        <tr>
                            <td>b</td>
                            <td>268</td>
                            <td>212</td>
                            <td>342</td>
                            <td>256</td>
                        </tr>
                        <tr>
                            <td>c</td>
                            <td>268</td>
                            <td>212</td>
                            <td>342</td>
                            <td>256</td>
                        </tr>
                        <tr>
                            <td>d</td>
                            <td>268</td>
                            <td>212</td>
                            <td>342</td>
                            <td>256</td>
                        </tr>
                        <tr>
                            <td>e</td>
                            <td>268</td>
                            <td>212</td>
                            <td>342</td>
                            <td>256</td>
                        </tr>
                        <tr>
                            <td>f</td>
                            <td>268</td>
                            <td>212</td>
                            <td>342</td>
                            <td>256</td>
                        </tr>
                        <tr>
                            <td>g</td>
                            <td>268</td>
                            <td>212</td>
                            <td>342</td>
                            <td>256</td>
                        </tr>
                        <tr>
                            <td>h</td>
                            <td>268</td>
                            <td>212</td>
                            <td>342</td>
                            <td>256</td>
                        </tr>
                        <tr>
                            <td>i</td>
                            <td>268</td>
                            <td>212</td>
                            <td>342</td>
                            <td>256</td>
                        </tr>
                        <tr>
                            <td>k</td>
                            <td>268</td>
                            <td>212</td>
                            <td>342</td>
                            <td>256</td>
                        </tr>
                        <tr>
                            <td>k</td>
                            <td>268</td>
                            <td>212</td>
                            <td>342</td>
                            <td>256</td>
                        </tr>
                        <tr>
                            <td>k</td>
                            <td>268</td>
                            <td>212</td>
                            <td>342</td>
                            <td>256</td>
                        </tr>
                        <tr>
                            <td>k</td>
                            <td>268</td>
                            <td>212</td>
                            <td>342</td>
                            <td>256</td>
                        </tr>
                    </tbody>
                </table>
                <span class="top-left border-span"></span>
                <span class="top-right border-span"></span>
                <span class="bottom-left border-span"></span>
                <span class="bottom-right border-span"></span>
            </div>
            <div class="border-container">
                <div class="name-title">
                    ===
                </div>
                <div id="juniorservice"></div>
                <span class="top-left border-span"></span>
                <span class="top-right border-span"></span>
                <span class="bottom-left border-span"></span>
                <span class="bottom-right border-span"></span>
            </div>
            <div class="border-container">
                <div class="name-title">
                    ===
                </div>
                <div id="edubalance"></div>
                <span class="top-left border-span"></span>
                <span class="top-right border-span"></span>
                <span class="bottom-left border-span"></span>
                <span class="bottom-right border-span"></span>
            </div>
        </div>
    </div>
</body>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
<script src="assets/js/index.js"></script>
<script src="assets/js/map/shandong.js"></script>

</html>

2.CSS


@charset "utf-8";
body,
ul,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6,
dl,
dt,
dd {
    margin: 0;
    padding: 0
}

ul,
li {
    list-style: none
}

a:link,
a:visited,
a:active {
    text-decoration: none
}

body {
    background: #040f3c
}

.header {
    height: 80px;
    position: relative;
    padding-top: 13px;
    font-size: 36px;
    color: #0ff;
    text-align: center;
    background: url(../bg.png) top center no-repeat
}

.header a.a-access {
    position: absolute;
    right: 3%;
    top: -18%
}

.main {
    padding: 0 30px 30px
}

.main-left,
.main-right {
    float: left;
    width: 28%;
    padding: 0 10px
}

.main-middle {
    float: left;
    width: 44%;
    padding: 0 10px
}

.border-container {
    position: relative;
    margin-top: 15px;
    padding: 10px;
    border: 1px solid #54dcf2
}

.border-container span.border-span {
    display: block;
    position: absolute;
    width: 35px;
    height: 35px
}

.border-container span.top-left {
    top: -4px;
    left: -4px;
    border-top: 3px solid #54dcf2;
    border-left: 3px solid #54dcf2
}

.border-container span.top-right {
    top: -4px;
    right: -4px;
    border-top: 3px solid #54dcf2;
    border-right: 3px solid #54dcf2
}

.border-container span.bottom-left {
    bottom: -4px;
    left: -4px;
    border-bottom: 3px solid #54dcf2;
    border-left: 3px solid #54dcf2
}

.border-container span.bottom-right {
    bottom: -4px;
    right: -4px;
    border-bottom: 3px solid #54dcf2;
    border-right: 3px solid #54dcf2
}

.name-title {
    font-size: 20px;
    color: #0ff
}

#radar {
    height: 275px
}

#dormitorydetail {
    height: 135px
}

#graduateyear {
    height: 192px
}

.three-pie {
    border-top: 1px solid #2c768a;
    margin: -10px;
    margin-top: 10px
}

.teacher-pie {
    border-bottom: 1px solid #2c768a;
    margin: -10px;
    margin-bottom: 0
}

.three-pie li,
.teacher-pie li {
    float: left;
    width: 50%;
    border-right: 1px solid #2c768a
}

.teacher-pie li .name-title {
    padding-left: 10px;
    padding-top: 10px
}

.three-pie li:last-child,
.teacher-pie li:last-child {
    border-right: none
}

#sexrate,
#nationarate,
#householdrate {
    height: 266px
}

#mapadd {
    height: 304px
}

.number-show {
    position: absolute;
    top: 20%;
    right: 5%
}

.number-show span.span-name {
    font-size: 14px;
    color: #fffd51
}

.number-show span.span-number-show {
    font-size: 18px;
    color: #54b5b5;
    font-style: italic
}

.number-show li {
    line-height: 25px
}

#teacherrate,
#courserate,
#professionrate {
    height: 200px
}

#agelist {
    height: 130px
}

#changedetail {
    height: 229px
}

.table-kingdargen {
    margin-top: 6px;
    text-align: center;
    margin-bottom: 0
}

.table-kingdargen>thead>tr>th {
    border-bottom: 1px solid #0f4075;
    padding: 2px 8px;
    text-align: center;
    color: #419aff;
    font-size: 12px;
    font-weight: 400;
    border-top: 1px solid #0f4075 !important
}

.table-kingdargen tbody tr td {
    padding: 1px 8px;
    font-size: 12px;
    border: none;
    color: #fff
}

.table-kingdargen tbody tr:nth-child(2n) {
    background: #1d2a42
}

.table-kingdargen tbody tr:hover {
    background: #1d2a42
}

.table-kingdargen tbody tr td:nth-child(2) {
    color: #e9aa00
}

.table-kingdargen tbody tr td:nth-child(3) {
    color: #53bf18
}

.table-kingdargen tbody tr td:nth-child(4) {
    color: #f9504a
}

.table-kingdargen tbody tr td:nth-child(5) {
    color: #12f0e9
}

#juniorservice {
    height: 190px
}

#edubalance {
    height: 203px
}

@import "https://fonts.googleapis.com/css?family=Raleway";
* {
    box-sizing: border-box
}

.copyright {
    position: absolute;
    bottom: 0
}

.copyright a {
    text-decoration: none;
    color: #16a085
}

.copyright a:hover {
    text-decoration: underline
}

.button {
    position: relative;
    padding: .5em 1.5em;
    border: none;
    background-color: transparent;
    cursor: pointer;
    outline: none;
    font-size: 18px;
    margin: 1em .8em
}

.button.type1 {
    color: #0ff
}

.button.type1.type1::after,
.button.type1.type1::before {
    content: "";
    display: block;
    position: absolute;
    width: 20%;
    height: 20%;
    border: 2px solid;
    transition: all .6s ease;
    border-radius: 2px
}

.button.type1.type1::after {
    bottom: 0;
    right: 0;
    border-top-color: transparent;
    border-left-color: transparent;
    border-bottom-color: #566473;
    border-right-color: #566473
}

.button.type1.type1::before {
    top: 0;
    left: 0;
    border-bottom-color: transparent;
    border-right-color: transparent;
    border-top-color: #566473;
    border-left-color: #566473
}

.button.type1.type1:hover:after,
.button.type1.type1:hover:before {
    width: 100%;
    height: 100%
}

3.JavaScript

$(function() {
    /*标准*/
    var radar = echarts.init(document.getElementById('radar'));
    option = {
        title: {
            text: ''
        },
        tooltip: {},
        legend: {

            data: ['第一标准', '第二标准', '第三标准'],
            x: "center",
            y: 'bottom',
            textStyle: {
                color: "#fff"
            }
        },
        color: ['#4c95d9', '#f6731b', '#8cd43f'],
        radar: {
            name: {
                textStyle: {
                    //设置颜色
                    color: '#fff'
                }
            },
            indicator: [{
                    name: 'test1',
                    max: 6500
                },
                {
                    name: 'test2',
                    max: 16000
                },
                {
                    name: 'test3',
                    max: 30000
                },
                {
                    name: 'test4',
                    max: 38000
                },
                {
                    name: 'test5',
                    max: 52000
                },
                {
                    name: 'test6',
                    max: 25000
                }
            ],
            center: ['50%', '50%'],
            radius: "58%"
        },
        series: [{
            name: '',
            type: 'radar',
            itemStyle: {
                normal: {
                    splitLine: {
                        lineStyle: {

                        }
                    },
                    label: {
                        show: false,
                        textStyle: {},
                        formatter: function(params) {
                            return params.value;
                        }
                    },
                }
            },
            data: [{
                    value: [2400, 10000, 28000, 35000, 50000, 19000],
                    name: '第一标准'
                },
                {
                    value: [5000, 14000, 28000, 31000, 42000, 21000],
                    name: '第二标准'
                },
                {
                    value: [6000, 14000, 18000, 21000, 32000, 11000],
                    name: '第三标准'
                }
            ]
        }]
    };
    radar.setOption(option);

    /* 飞鸟尽*/
    var graduateyear = echarts.init(document.getElementById('graduateyear'));
    option = {
        title: {
            text: "",
            x: 'center',
            y: 'top',
            textStyle: {
                color: '#fff',
                fontSize: 13
            }
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '3%',
            right: '8%',
            bottom: '5%',
            top: "13%",
            containLabel: true
        },
        color: ["#72b332", '#35a9e0'],
        legend: {
            data: ['test1', 'test2'],
            show: true,

            right: '15%',
            y: "0",
            textStyle: {
                color: "#999",
                fontSize: '13'
            },
        },
        toolbox: {
            show: false,
            feature: {
                mark: {
                    show: true
                },
                dataView: {
                    show: true,
                    readOnly: false
                },
                magicType: {
                    show: true,
                    type: ['line', 'bar', 'stack', 'tiled']
                },
                restore: {
                    show: true
                },
                saveAsImage: {
                    show: true
                }
            }
        },
        calculable: true,
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            data: ['2022年', '2023年', '2024年', '2025年', '2026年', '2027年', '2028年'],
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#2d3b53'
                }
            },
            axisLabel: {
                textStyle: {
                    color: "#fff"
                },
                alignWithLabel: true,
                interval: 0,
                rotate: '15'
            }
        }],
        yAxis: [{
            type: 'value',
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#2d3b53'
                }
            },
            axisLabel: {
                textStyle: {
                    color: "#999"
                }
            },
        }],
        series: [{
                name: 'test1',
                type: 'line',
                smooth: true,
                symbol: 'roundRect',
                data: [1168, 1189, 1290, 1300, 1345, 1256, 1045]
            },
            {
                name: 'test2',
                type: 'line',
                smooth: true,
                symbol: 'roundRect',
                data: [1234, 1290, 1311, 1145, 1045, 900, 673]
            }
        ]
    };
    graduateyear.setOption(option);

    /*==*/
    var sexrate = echarts.init(document.getElementById('sexrate'));
    var total = {
        name: '=='
    };
    option = {
        title: [{
            text: total.name,
            left: '48%',
            top: '34%',
            textAlign: 'center',
            textBaseline: 'middle',
            textStyle: {
                color: '#fff',
                fontWeight: 'normal',
                fontSize: 18
            }
        }, {
            text: total.value,
            left: '48%',
            top: '44%',
            textAlign: 'center',
            textBaseline: 'middle',
            textStyle: {
                color: '#fff',
                fontWeight: 'normal',
                fontSize: 18
            }
        }],
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        color: ['#70a3ff', '#ff7f4e'],
        legend: {
            orient: 'vertical',
            x: 'center',
            bottom: '5%',
            selectedMode: false,
            formatter: function(name) {
                var oa = option.series[0].data;
                var num = oa[0].value + oa[1].value;
                for (var i = 0; i < option.series[0].data.length; i++) {
                    if (name == oa[i].name) {
                        return name + "  " + oa[i].value + "  " + (oa[i].value / num * 100).toFixed(2) + '%';
                    }
                }
            },
            data: ['test1', 'test2'],
            show: true,
            textStyle: {
                color: '#fff',
                fontWeight: 'bold'
            },
        },

        series: [{
            name: 'PK',
            type: 'pie',
            selectedMode: 'single',
            radius: ['45%', '55%'],
            center: ['50%', '40%'],
            data: [{
                    value: 2629,
                    name: 'test1'
                },
                {
                    value: 2507,
                    name: 'test2'
                }
            ],
            label: {
                normal: {
                    show: false,
                    position: "outer",
                    align: 'left',
                    textStyle: {
                        rotate: true
                    }
                }
            },
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
                normal: {
                    label: {
                        show: true,
                        formatter: '{b} {c}'
                    }
                }

            }
        }]
    };
    sexrate.setOption(option);


    var householdrate = echarts.init(document.getElementById('householdrate'));
    var total = {
        name: '=='
    };
    option = {
        title: [{
            text: total.name,
            left: '48%',
            top: '34%',
            textAlign: 'center',
            textBaseline: 'middle',
            textStyle: {
                color: '#fff',
                fontWeight: 'normal',
                fontSize: 18
            }
        }, {
            text: total.value,
            left: '48%',
            top: '44%',
            textAlign: 'center',
            textBaseline: 'middle',
            textStyle: {
                color: '#fff',
                fontWeight: 'normal',
                fontSize: 18
            }
        }],
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        color: ['#4f9de7', '#4acf79'],
        legend: {
            orient: 'vertical',
            x: 'center',
            bottom: '5%',
            selectedMode: false,
            formatter: function(name) {
                var oa = option.series[0].data;
                var num = oa[0].value + oa[1].value;
                for (var i = 0; i < option.series[0].data.length; i++) {
                    if (name == oa[i].name) {
                        return name + "  " + oa[i].value + "  " + (oa[i].value / num * 100).toFixed(2) + '%';
                    }
                }
            },
            data: ['test1', 'test2'],
            show: true,
            textStyle: {
                color: '#fff',
                fontWeight: 'bold'
            },
        },
        series: [{
            name: 'FK',
            type: 'pie',
            selectedMode: 'single',
            radius: ['45%', '55%'],
            center: ['50%', '40%'],
            data: [{
                    value: 2629,
                    name: 'test1'
                },
                {
                    value: 2507,
                    name: 'test2'
                }
            ],
            label: {
                normal: {
                    show: false,
                    position: "outer",
                    align: 'left',
                    textStyle: {
                        rotate: true
                    }
                }
            },
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
                normal: {
                    label: {
                        show: true,
                        formatter: '{b} {c}'
                    }
                }
            }
        }]
    };
    householdrate.setOption(option);

    /*  =====-=*/
    var courserate = echarts.init(document.getElementById('courserate'));
    option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            right: '0',
            y: 'middle',
            textStyle: {
                color: "#fff"
            },

            formatter: function(name) {
                var oa = option.series[0].data;
                var num = oa[0].value + oa[1].value + oa[2].value + oa[3].value + oa[4].value + oa[5].value;
                for (var i = 0; i < option.series[0].data.length; i++) {
                    if (name == oa[i].name) {
                        return name + ' ' + oa[i].value;
                    }
                }
            },
            data: ['test1', 'test2', 'test3', 'test4', 'test5', 'text6']
        },
        series: [{
            name: 'FK',
            type: 'pie',
            radius: '45%',
            color: ['#27c2c1', '#9ccb63', '#fcd85a', '#60c1de', '#0084c8', '#d8514b'],
            center: ['38%', '50%'],
            data: [{
                    value: 335,
                    name: 'test1'
                },
                {
                    value: 310,
                    name: 'test2'
                },
                {
                    value: 234,
                    name: 'test3'
                },
                {
                    value: 135,
                    name: 'test4'
                },
                {
                    value: 234,
                    name: 'test5'
                },
                {
                    value: 234,
                    name: 'text6'
                }
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        position: 'outside',
                        formatter: '{b}'
                    }
                },
                labelLine: {
                    show: true
                }
            }
        }]
    };
    courserate.setOption(option);

    /* =======*/
    var professionrate = echarts.init(document.getElementById('professionrate'));
    option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            right: '0',
            y: 'middle',
            textStyle: {
                color: "#fff"
            },
            data: ['test1', 'test2', 'test3'],
            formatter: function(name) {
                var oa = option.series[0].data;
                var num = oa[0].value + oa[1].value + oa[2].value;
                for (var i = 0; i < option.series[0].data.length; i++) {
                    if (name == oa[i].name) {
                        return name + ' ' + oa[i].value;
                    }
                }
            }
        },
        series: [{
            name: 'FK',
            type: 'pie',
            radius: '60%',
            center: ['35%', '50%'],
            data: [{
                    value: 335,
                    name: 'test1'
                },
                {
                    value: 310,
                    name: 'test2'
                },
                {
                    value: 234,
                    name: 'test3'
                }
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        position: 'outside',
                        formatter: '  {b}'
                    }
                },
                labelLine: {
                    show: true
                }
            }
        }]
    };
    professionrate.setOption(option);

    /* 比例变化*/
    var changedetail = echarts.init(document.getElementById('changedetail'));
    option = {
        tooltip: {
            trigger: 'axis',
            formatter: '{b}</br>{a}: {c}</br>{a1}: {c1}'
        },
        toolbox: {
            show: false,
            feature: {
                dataView: {
                    show: true,
                    readOnly: false
                },
                magicType: {
                    show: true,
                    type: ['line', 'bar']
                },
                restore: {
                    show: true
                },
                saveAsImage: {
                    show: true
                }
            }
        },
        legend: {
            data: ['', ''],
            show: false
        },
        grid: {
            top: '18%',
            right: '5%',
            bottom: '8%',
            left: '5%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            data: ['2021年', '2022年', '2023年', '2024年', '2025年'],
            splitLine: {
                show: false,
                lineStyle: {
                    color: '#3c4452'
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                textStyle: {
                    color: "#fff"
                },
                lineStyle: {
                    color: '#519cff'
                },
                alignWithLabel: true,
                interval: 0
            }
        }],
        yAxis: [{
                type: 'value',
                name: '嘎嘎',
                nameTextStyle: {
                    color: '#fff'
                },
                interval: 5,
                max: 50,
                min: 0,
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#23303f'
                    }
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#115372'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: "#fff"
                    },
                    alignWithLabel: true,
                    interval: 0

                }
            },
            {
                min: 0,
                max: 2.5,
                interval: 0.5,
                type: 'value',
                name: '哈哈',
                nameTextStyle: {
                    color: '#fff'
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#23303f'
                    }
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#115372'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: "#fff"
                    },
                    alignWithLabel: true,
                    interval: 0

                }
            }
        ],
        color: "yellow",
        series: [{
                name: 'test1',
                type: 'bar',
                data: [2, 4, 7, 23, 25],
                boundaryGap: '45%',
                barWidth: '40%',

                itemStyle: {
                    normal: {
                        color: function(params) {
                            var colorList = [
                                '#6bc0fb', '#7fec9d', '#fedd8b', '#ffa597', '#84e4dd'
                            ];
                            return colorList[params.dataIndex]
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '{c}'
                        }
                    }
                }
            },

            {
                name: 'test2',
                type: 'line',
                yAxisIndex: 1,
                lineStyle: {
                    normal: {
                        color: '#c39705'
                    }
                },
                data: [1.0, 0.5, 0.8, 0.9, 0.6]
            }
        ]
    };
    changedetail.setOption(option);

    /* ===*/
    var juniorservice = echarts.init(document.getElementById('juniorservice'));
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        color: ['#eaff00', '#22ac38'],
        legend: {
            right: '0',
            data: ['test1', 'test2'],
            textStyle: {
                color: '#00ffff'
            }
        },
        grid: {
            left: '8%',
            right: '4%',
            bottom: '3%',
            top: '10%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#1e2b43'
                }
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#115372'
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                textStyle: {
                    color: "#fff"
                },
                alignWithLabel: true,
                interval: 0

            }
        },
        dataZoom: [{
            type: 'slider',
            yAxisIndex: 0,
            filterMode: 'empty',
            start: 0,
            x: '0',
            end: 60,
            handleStyle: {
                color: "#519cff",
                backgroundColor: '#519cff'
            },
            textStyle: {
                color: "#fff"
            },
            borderColor: "#519cff"
        }],
        yAxis: {
            type: 'category',
            data: ['a', 'b', 'c', ' d', 'e', 'f', 'g', 'h', 'i', 'j', ' k', 'l', 'm', 'n'],
            splitLine: {
                show: false,
                lineStyle: {
                    color: '#1e2b43'
                }
            },

            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#115372'
                }
            },
            axisLabel: {
                textStyle: {
                    color: "#419aff"
                },
                lineStyle: {
                    color: '#519cff'
                },
                alignWithLabel: true,
                interval: 0
            }
        },
        series: [{
                name: 'test1',
                type: 'bar',
                stack: '比例',
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight',
                        textStyle: {
                            color: '#333'
                        }
                    }

                },
                data: [320, 302, 301, 334, 390, 330, 320, 320, 302, 301, 334, 390, 330, 123]
            },
            {
                name: 'test2',
                type: 'bar',
                stack: '比例',
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        textStyle: {
                            color: '#00f0ff'
                        }

                    }
                },
                data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 243]
            }
        ]
    };
    juniorservice.setOption(option);

    /* ===*/
    var edubalance = echarts.init(document.getElementById('edubalance'));
    option = {
        tooltip: {
            trigger: 'axis',
            formatter: '{b}</br>{a}: {c}</br>{a1}: {c1}</br>{a2}: {c2}</br>{a3}: {c3}'
        },
        toolbox: {
            show: false,
            feature: {
                dataView: {
                    show: true,
                    readOnly: false
                },
                magicType: {
                    show: true,
                    type: ['line', 'bar']
                },
                restore: {
                    show: true
                },
                saveAsImage: {
                    show: true
                }
            }
        },
        legend: {
            data: ['test1', 'test2', 'test3', 'test4', 'test5'],
            right: "15%",
            textStyle: {
                color: '#fff'
            }
        },
        grid: {
            top: '18%',
            right: '5%',
            bottom: '8%',
            left: '5%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            data: ['工藤新一', '工藤新一', '工藤新一', '工藤新一'],
            splitLine: {
                show: false,
                lineStyle: {
                    color: '#3c4452'
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                textStyle: {
                    color: "#fff"
                },
                lineStyle: {
                    color: '#519cff'
                },
                alignWithLabel: true,
                interval: 0,
            }
        }],
        yAxis: [{
                type: 'value',

                nameTextStyle: {
                    color: '#fff'
                },
                interval: 5,
                max: 50,
                min: 0,
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#23303f'
                    }
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#115372'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: "#fff"
                    },
                    alignWithLabel: true,
                    interval: 0

                }
            },
            {
                min: 0,
                max: 100,
                interval: 20,
                type: 'value',
                name: '所',
                nameTextStyle: {
                    color: '#fff'
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#23303f'
                    }
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#115372'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: "#fff"
                    },
                    alignWithLabel: true,
                    interval: 0

                }
            }
        ],
        color: "yellow",
        series: [{
                name: 'test1',
                type: 'bar',
                data: [21, 14, 17, 12],
                itemStyle: {
                    normal: {
                        color: '#76da91'
                    },
                    label: {
                        show: true,
                        position: 'top',
                        formatter: '{c}'
                    }
                }
            },
            {
                name: 'test2',
                type: 'bar',
                data: [12, 14, 17, 23],
                itemStyle: {
                    normal: {
                        color: '#f8cb7f'
                    },
                    label: {
                        show: true,
                        position: 'top',
                        formatter: '{c}'
                    }
                }
            },
            {
                name: 'test3',
                type: 'bar',
                data: [12, 14, 17, 13],
                itemStyle: {
                    normal: {
                        color: '#f89588'
                    },
                    label: {
                        show: true,
                        position: 'top',
                        formatter: '{c}'

                    }
                }
            },
            {
                name: 'test4',
                type: 'bar',
                data: [2, 4, 7, 3],
                itemStyle: {
                    normal: {
                        color: '#7cd6cf'
                    },
                    label: {
                        show: true,
                        position: 'top',
                        formatter: '{c}'
                    }
                }
            },
            {
                name: 'test5',
                type: 'line',
                yAxisIndex: 1,
                lineStyle: {
                    normal: {
                        color: '#c39705'
                    }
                },
                data: [30, 10, 90, 75]
            }
        ]
    };
    edubalance.setOption(option);

    /* 地图 需要哪个省市的地图直接引用js 将下面的name以及mapType修改为对应省市名称*/
    var maps = echarts.init(document.getElementById('mapadd'));
    option = {
        tooltip: {
            trigger: 'item',
            formatter: '{b}'
        },
        series: [{
            name: '山东',
            type: 'map',
            mapType: '山东',
            roam: false,
            top: '8%',
            zoom: 1.2,
            x: '25%',
            selectedMode: 'single', //multiple多选
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        textStyle: {
                            color: "#231816"
                        }
                    },
                    areaStyle: {
                        color: '#B1D0EC'
                    },
                    color: '#B1D0EC',
                    borderColor: '#dadfde' //区块的边框颜色
                },
                emphasis: { //鼠标hover样式
                    label: {
                        show: true,
                        textStyle: {
                            color: '#fa4f04'
                        }
                    },
                    areaStyle: {
                        color: 'red'
                    }
                }
            },
            data: [{
                    name: '济南市',
                    itemStyle: {
                        normal: {
                            areaColor: '#13d5ff',
                            borderColor: '#edce00'
                        }
                    }
                },
                {
                    name: '德州市',
                    itemStyle: {
                        normal: {
                            areaColor: '#13d5ff',
                            borderColor: '#0abcee'
                        }
                    }
                },
                {
                    name: '聊城市',
                    itemStyle: {
                        normal: {
                            areaColor: '#92d050',
                            borderColor: '#1ca9f2'
                        }
                    }
                },
                {
                    name: '泰安市',
                    itemStyle: {
                        normal: {
                            areaColor: '#88ddf5',
                            borderColor: '#88ddf5',
                        }
                    }
                },
                {
                    name: '莱芜市',
                    itemStyle: {
                        normal: {
                            areaColor: '#13d5ff',
                            borderColor: '#45b5ef',
                        }
                    }
                },
                {
                    name: '菏泽市',
                    itemStyle: {
                        normal: {
                            areaColor: '#13d5ff',
                            borderColor: '#45b5ef'
                        }
                    }
                },
                {
                    name: '枣庄市',
                    itemStyle: {
                        normal: {
                            areaColor: '#45b5ef',
                            borderColor: '#45b5ef',
                        }
                    }
                },
                {
                    name: '济宁市',
                    itemStyle: {
                        normal: {
                            areaColor: '#ffd811',
                            borderColor: '#45b5ef',
                        }
                    }
                },
                {
                    name: '临沂市',
                    itemStyle: {
                        normal: {
                            areaColor: '#ffa312',
                            borderColor: '#45b5ef',
                        }
                    }
                },
                {
                    name: '青岛市',
                    itemStyle: {
                        normal: {
                            areaColor: '#92d050',
                            borderColor: '#1ca9f2'
                        }
                    }
                },
                {
                    name: '烟台市',
                    itemStyle: {
                        normal: {
                            areaColor: '#88ddf5',
                            borderColor: '#88ddf5',
                        }
                    }
                },
                {
                    name: '威海市',
                    itemStyle: {
                        normal: {
                            areaColor: '#13d5ff',
                            borderColor: '#45b5ef',
                        }
                    }
                },
                {
                    name: '潍坊市',
                    itemStyle: {
                        normal: {
                            areaColor: '#13d5ff',
                            borderColor: '#45b5ef'
                        }
                    }
                },
                {
                    name: '淄博市',
                    itemStyle: {
                        normal: {
                            areaColor: '#45b5ef',
                            borderColor: '#45b5ef',
                        }
                    }
                },
                {
                    name: '滨州市',
                    itemStyle: {
                        normal: {
                            areaColor: '#13d5ff',
                            borderColor: '#45b5ef',
                        }
                    }
                },
                {
                    name: '东营市',
                    itemStyle: {
                        normal: {
                            areaColor: 'red',
                            borderColor: '#45b5ef',
                        }
                    }
                },
                {
                    name: '日照市',
                    itemStyle: {
                        normal: {
                            areaColor: 'red',
                            borderColor: '#45b5ef',
                        }
                    }
                },
            ]
        }]
    };
    maps.setOption(option);

})

五、更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、Echarts大数据可视化, 等! 「一起探讨 web前端 ,Node ,Java 知识，互相学习」！

3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥

博客
大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS (1)
03-08 1万+
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
博客
1500套HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计
02-28 6026
1.网页作品简介方面：HTML期末学生结课大作业作品(HTML+CSS+JS)，响应式布局网站源码！兼容pc以及移动端，内涵js交互，ui交互，页面质量高 非常适合，2.网页作品编辑方面：此作品为学生个人主页网页设计题材，代码为A+学生水平所有编辑器均可使用）3.网页作品布局方面：网页布局整体为LOGO、导航、主体内容布局。子页面多种布局，兴趣爱好内容使用图片列表布局，成绩页面插入了表格，联系我们使用图片对齐方式设置了左对齐。4.网页作品技术方面。
博客
web前端html期末大作业实例 (1500套)
10-03 9万+
临近期末，大一新生的各种考试和专业结课作业纷至沓来。web实训大作业、网页期末作业、web课程与设计、网页设计等，简直让人头大。你还在为网页设计老师的作业要求感到头大？网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求, 废话不多说，直接看效果。📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确
博客
1500套HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计
09-22 11万+
1.网页作品简介方面：HTML期末学生结课大作业作品(HTML+CSS+JS)，响应式布局网站源码！兼容pc以及移动端，内涵js交互，ui交互，页面质量高 非常适合，2.网页作品编辑方面：此作品为学生个人主页网页设计题材，代码为A+学生水平所有编辑器均可使用）3.网页作品布局方面：网页布局整体为LOGO、导航、主体内容布局。子页面多种布局，兴趣爱好内容使用图片列表布局，成绩页面插入了表格，联系我们使用图片对齐方式设置了左对齐。4.网页作品技术方面。
博客
125款程序员专属情人节表白网站【建议收藏】HTML+CSS+JavaScript
09-22 5万+
七夕来袭！是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？鲜花礼物？代码表白？还是创意DIY？或者......无论那种形式，快来秀我们一脸吧！
博客
1000套web前端期末大作业 HTML+CSS+JavaScript网页设计实例 企业网站制作【建议收藏】
07-27 5万+
1.网页作品简介方面HTML期末学生结课大作业作品(HTML+CSS+JS)，响应式布局网站源码！兼容pc以及移动端，内涵js交互，ui交互，页面质量高非常适合，2.网页作品编辑方面此作品为学生个人主页网页设计题材，代码为A+学生水平所有编辑器均可使用）3.网页作品布局方面网页布局整体为LOGO、导航、主体内容布局。子页面多种布局，兴趣爱好内容使用图片列表布局，成绩页面插入了表格，联系我们使用图片对齐方式设置了左对齐。4.网页作品技术方面。...
博客
学生环境保护绿色家园 WEB静态网页作业模板 大学生环境保护网页代码 dreamweaver网页设计作业制作 dw个人网页作业成品
04-20 857
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
博客
web前端网页课程设计大作业 html+css+javascript天津旅游(11页) dw静态旅游网页设计实例 企业网站制作
04-20 941
🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的是做出旅游网站独特的风格，更能吸引浏览者的眼球。网站设计制作的重点是对网页整体设计的布局和对网页整体内容的选题。网站设计方面：计划实现简洁大气的网页设计效果。网站功
博客
大一新生HTML期末作业个人介绍博客 使用html+css+javascript+jquery技术制作网页，含有动画，hover效果，含有表格布局
04-20 932
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大
博客
HTML+CSS+JS网页设计期末课程大作业 DW个人博客网站制作 web前端开发技术 web课程设计 网页规划与设计
04-20 621
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
博客
dreamweaver作业静态HTML网页设计 大学美食菜谱网页制作教程（web前端网页制作课作业）
04-20 522
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
博客
HTML+CSS大作业 格林蛋糕(7个页面) 餐饮美食网页设计与实现 (1)
04-20 722
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
博客
web前端期末大作业：基于HTML+CSS+JavaScript奥迪企业bootstrap响应式网站
04-20 679
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！🚗汽车网站、🚘汽车介绍、🚍汽车官网、汽车租赁、企业网页 、等网站的设计与制作。🏷️ 此作品为学生汽车网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常
博客
web前端期末大作业：基于HTML+CSS+JavaScript奥迪企业bootstrap响应式网站
04-20 855
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！🚗汽车网站、🚘汽车介绍、🚍汽车官网、汽车租赁、企业网页 、等网站的设计与制作。🏷️ 此作品为学生汽车网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常
博客
保护鲸鱼动物网页设计作业 静态HTML宠物主题网页作业 DW鲸鱼网站模板下载 大学生简单动物网页作品代码 个人网页制作 学生个人网页
04-20 893
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
博客
大二Web课程设计——张家界旅游网站设计与实现(HTML+CSS+JavaScript)
04-20 657
🏀 精彩专栏推荐👇🏻👇🏻👇🏻 💝 【作者主页——🔥获取更多优质源码】💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的
博客
web网页设计期末课程大作业——汉中印象旅游景点介绍网页设计与实现19页面HTML+CSS+JavaScript
04-20 576
🏀 精彩专栏推荐👇🏻👇🏻👇🏻 💝 【作者主页——🔥获取更多优质源码】💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的
博客
2025年 计算机软件 (全网最全,建议收藏)毕业网页设计期末课程大作业——大学生网页设计制作作业实例代码HTML+CSS+JS (1)
04-20 939
临近期末，大一新生的各种考试和专业结课作业纷至沓来。web实训大作业、网页期末作业、web课程与设计、网页设计等，简直让人头大。你还在为网页设计老师的作业要求感到头大？网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求, 废话不多说，直接看效果。📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确
博客
HTML旅游网页设计制作 DW旅游网站官网滚动网页 DIV旅游风景介绍网页设计与实现
04-16 935
🏀 精彩专栏推荐👇🏻👇🏻👇🏻 💝 【作者主页——🔥获取更多优质源码】💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的
博客
HTML5期末考核大作业，个人网站—— 程序员个人简历模板下载HTML+CSS+JavaScript (2)
04-16 942
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值