[游戏开发] HTML+Echarts+json实现图形化城市天气预报

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 游戏开发 -> HTML+Echarts+json实现图形化城市天气预报 -> 正文阅读

[游戏开发]HTML+Echarts+json实现图形化城市天气预报

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .btn{
            width: 160px;
            height: 50px;
        }
        .dis{
            width: 1600px;
            height: 400px;
            border: 2px solid paleturquoise;
            margin: 0 auto;
        }
    </style>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/echarts.min.js"></script>
</head>
<body>
<input type="button" value="提交" class="btn">
<div class="dis"></div>
</body>
<script>
    var btn = document.getElementsByClassName("btn")[0];
    var dis = document.getElementsByClassName("dis")[0];
    // 点击
    btn.onclick = function () {
        // 获取数据
        $.get("./source/weather.json",function (data) {
            // console.log(data)
            var wea_data = [];
            var max_temp = [];
            var min_temp = [];
            for(var i=0; i<data.length; i++){
                wea_data.push(data[i].week_date);
                max_temp.push(data[i].max_temp);
                min_temp.push(data[i].min_temp);
            }

            // 1.初始化
            var my_dis = echarts.init(dis);
            // 2.配置
            var option = {
                title:{
                    text:"未来七点成都的温度变化图"
                },
                legend:{
                    left:"right"
                },
                xAxis:{
                    data:wea_data
                },
                yAxis: {},
                series:[
                    {
                        name:"最高温度",
                        type:"line",
                        data:max_temp
                    },
                    {
                        name:"最低温度",
                        type:"line",
                        data:min_temp
                    },
                ]
            };
            // 绘图
            my_dis.setOption(option)
        })
    }

</script>
</html>