心得技巧
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧

新冠疫情数据可视化展示

发布时间：2022-06-28 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了新冠疫情数据可视化展示，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

设计一个网页用于展示数据及图形

1)  用柱状图展示北京、上海、香港、广东、浙江的现有病例、累计病例数据。（数据来源：表1）

2)  用普通地图（china.js）+散点图展示累计确诊和现有确诊数据。（数据来源：表1）

 

运行图片展示：

新冠疫情数据可视化展示

新冠疫情数据可视化展示

 

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>190124331 罗智为</title>
    <script src='js/echarts.js'></script>
    <script src="js/echarts.min.js"></script>
    <script src='js/jquery-3.3.1.min.js'></script>
    <style type='text/css'>
        body{
            background-image: url(picture/BigData.jpg);
            background-repeat:no-repeat;
            background-attachment:fixed
        }
        header{
            background-image: url(picture/EpidemicPrevention.jpg);
            background-position:center;
            }
        h1 { 
            margin-bottom: 0;
            padding: 100px;
            font-size: 450%;
            }
        #content { 
            margin:0 15%;
            padding:10px 30px;
            line-height:150%;
            font-size:1.1em;
            background-color:#FFFFFF; 
            }
        footer { 
            text-align:center;
            background-color:#EBEBEB;
            padding:20px 0px;
            color:#000; 
            }
        #table {
            padding:50px;
        }
        #left{
            float: left;
        }
        #right{
            float: right;
        }
    </style>
</head>

<body>
<header><h1></h1></header>
<div id="content">
    <div id='table'>
        <!-- align:对齐方式、border:表格边框的宽度、cellspacing:单元格之间的空白、
        cellpadding:单元边沿与其内容之间的空白-->
        <h3 align=center>北京、上海、香港、广东、浙江的疫情数据</h3>
        <table align=center border=4 cellspacing=0 cellpadding=5 width=500>
            <tr>
                <th>疫情地区</th>
                <th>新增</th>
                <th>现有</th>
                <th>累计</th>
                <th>治愈</th>
                <th>死亡</th>
            </tr>
            <tr align=center>
                <td>北京</td>
                <td>1</td>
                <td>87</td>
                <td>590</td>
                <td>495</td>
                <td>8</td>
            </tr>
            <tr align=center>
                <td>上海</td>
                <td>4</td>
                <td>130</td>
                <td>622</td>
                <td>485</td>
                <td>7</td>
            </tr>
            <tr align=center>
                <td>香港</td>
                <td>3</td>
                <td>553</td>
                <td>1016</td>
                <td>459</td>
                <td>4</td>
            </tr>
            <tr align=center>
                <td>广东</td>
                <td>2</td>
                <td>96</td>
                <td>1566</td>
                <td>1462</td>
                <td>8</td>
            </tr>
            <tr align=center>
                <td>浙江</td>
                <td>1</td>
                <td>23</td>
                <td>1268</td>
                <td>1244</td>
                <td>1</td>
            </tr>
        </table>
    </div>
    <hr>



    <div id="main" style="width:1000px;height:600px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        
        var COVIDdata       //用于存放A-1的数据

        $.ajaxSetup({
            async : false   //设置false为同步，true为异步
        });

        //从JSON文件中获取数据，并保存在变量COVIDdata中
        $.get("A-1.json",function(data){
            COVIDdata = data;
        });

        //指定图表的配置项和数据
        var dataAR = COVIDdata.AR;
        var dataAE = COVIDdata.AE;
        var dataAC = COVIDdata.AC;

        var option1 = {
            title: {
                text: '北京、上海、香港、广东、浙江的现有病例、累计病例数据',
                textStyle:{
                    color:'black',
                    fontSize:20,
                },
                subtext:'190124331 罗智为',
                subtextStyle:{
                    color:'black',
                    fontSize:15,
                },
                right:'center',
            },            
            legend: {
                data:['现有病例','累计病例'],
                bottom: 0,
                left: 'center',
            },
            tooltip:{                       //提示框组件
                trigger: 'axis',            //触发类型。axis：坐标轴触发，主要在柱状图
                axisPointer: {                // 坐标轴指示器,坐标轴触发有效
                    type: 'shadow'            // 默认为直线,可选为：'line' | 'shadow'
                }
            },
            xAxis: {
                name: '地区',
                type: 'category',          //坐标轴类型。category:类目轴
                data: dataAR
            },
            yAxis: {
                name: '病例',
                type: 'value',             //坐标轴类型。value:数值轴
                max: 2000,
            },
            series: [
                {
                    name: '现有病例',
                    type: 'bar',
                    data: dataAE,
                    label:{
                        show:true,              //是否显示标签
                        position:'inside'       //标签的位置,inside:里面
                    },
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    }
                },
                {
                    name: '累计病例',
                    type: 'bar',
                    data: dataAC,
                    label:{                     
                        show:true,
                        position:'inside'
                    },
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    barGap: 0   //柱形间的距离
                },
            ]
        };        
        // 使用刚指定的配置项和数据显示图表.
        myChart.setOption(option1);
    </script>
    <hr>
    


    <div id="main2" style="width: 1000px;height:600px;"></div>
        <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main2'));
        
        var nationwide;    //用于存放城市地理坐标

        /* 由于jQuery的$.get()方法读取数据时默认为异步读取，这里改为同步，
        使获取的数据能保存在全局变量AQIdata和nationwide中 */
        $.ajaxSetup({
            async: false    //设置false为同步，true为异步
        });

        //从JSON文件中获取数据，并保存在变量nationwide中
        $.get("A-2.json",function(data){
            nationwide = data;
        });

        //指定图表的配置项和数据
        var dataAE_2 = nationwide.AE_2;

        var schema = [
            {name: 'province', index: 2, text: '省'},
            {name: 'case', index: 3, text: '现有病例'},
        ];

        $.get('map/china.json',function(chinaJson) {
            echarts.registerMap('china',chinaJson);
            var myChart = echarts.init(document.getElementById('main2'));
            // 指定图表的配置项和数据
            myChart.setOption({
                geo: {                  // 配置地理坐标系
                    map: 'china',       // 定义map的类型必须用china.json文件中的reqisterMap的注册名
                    liemStyle: {            // 定义样式
                        emphasis: {         // 高亮状态下的样式
                            areaColor: '#2a333d'
                        }
                    }
                },
                title: {
                    text: '全国各地现有病例',
                    textStyle:{
                        color:'black',
                        fontSize:20,
                    },
                    subtext:'190124331 罗智为',
                    subtextStyle:{
                        color:'black',
                        fontSize:15,
                    },
                    top: 15,
                    right:'center',
                },
                legend:{
                    left: 10,
                    padding: 25,    //图例内边距
                    textStyle: {
                        fontSize: 20,
                        color: '#000000'
                    },
                    data: ['现有病例'],
                },
                tooltip: {
                    padding: 10,
                    backgroundColor: '#222',
                    borderColor: '#777',
                    borderWidth: 1,
                    formatter: function (obj) {
                        var value = obj.value;
                        return '<div style="border-bottom: 1px solid raba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
                            + '2020年4月14日' + '<br>'
                            + '</div>'
                            + value[2] + '：' + '<br>'
                            + '<hr>'
                            + schema[1].text + ': ' + value[3] + '<br>'
                    }
                },
                backgroundColor: '#cccccc',         // 图表背景色

                series: [{
                    name: '现有病例',        // serles名称
                    type: 'scatter',        // serles图表类型
                    mapType: 'china',   
                    coordinateSystem: 'geo',        // series坐标系类型
                    data: dataAE_2,
                }],
                visualMap: {
                    type: 'continuous',         // 连续型
                    text: ['现有病例'],
                    min: 0,                     // 值域最小值，必须参数
                    max: 600,                   // 值域最大值，必须参数
                    calculable: true,           // 是否启动值域漫游
                    inRange: {                      //定义在选中范围中的视觉元素，如散点图中的大小、颜色、颜色明暗等
                        symbolSize: [10, 20],       //点的大小，数据映射时最小值对应Min,最大值对应Max
                        color: ['#50a3ba', '#eac736', '#d94e5d']
                        // 指定数值从低到高时的颜色变化
                    },
                    textStyle: {
                        color: '#fff'       // 值域控件的文本颜色
                    }
                }
            })
        })
        </script>

        

        <div id="main3" style="width: 1000px;height:600px;"></div>
        <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main3'));
        
        var nationwide;    //用于存放城市地理坐标

        /* 由于jQuery的$.get()方法读取数据时默认为异步读取，这里改为同步，
        使获取的数据能保存在全局变量AQIdata和nationwide中 */
        $.ajaxSetup({
            async: false    //设置false为同步，true为异步
        });

        //从JSON文件中获取数据，并保存在变量nationwide中
        $.get("A-2.json",function(data){
            nationwide = data;
        });

        //指定图表的配置项和数据
        var dataAC_2 = nationwide.AC_2;

        var schema = [
            {name: 'province', index: 2, text: '省'},
            {name: 'case', index: 3, text: '现有病例'},
        ];

        $.get('map/china.json',function(chinaJson) {
            echarts.registerMap('china',chinaJson);
            var myChart = echarts.init(document.getElementById('main3'));
            // 指定图表的配置项和数据
            myChart.setOption({
                geo: {                  // 配置地理坐标系
                    map: 'china',       /* 定义map的类型必须用china.json文件中的reqisterMap的注册名 */
                    liemStyle: {            // 定义样式
                        emphasis: {         // 高亮状态下的样式
                            areaColor: '#2a333d'
                        }
                    }
                },
                title: {
                    text: '全国各地累计病例',
                    textStyle:{
                        color:'black',
                        fontSize:20,
                    },
                    subtext:'190124331 罗智为',
                    subtextStyle:{
                        color:'black',
                        fontSize:15,
                    },
                    top: 15,
                    right:'center',
                },
                legend:{
                    left: 10,
                    padding: 25,    //图例内边距
                    textStyle: {
                        fontSize: 20,
                        color: '#000000'
                    },
                    data: ['累计病例'],
                },
                tooltip: {
                    padding: 10,
                    backgroundColor: '#222',
                    borderColor: '#777',
                    borderWidth: 1,
                    formatter: function (obj) {
                        var value = obj.value;
                        return '<div style="border-bottom: 1px solid raba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
                            + '2020年4月14日' + '<br>'
                            + '</div>'
                            + value[2] + '：' + '<br>'
                            + '<hr>'
                            + schema[1].text + ': ' + value[3] + '<br>'
                    }
                },
                backgroundColor: '#666666',         // 图表背景色

                series: [{
                    name: '累计病例',        // serles名称
                    type: 'scatter',        // serles图表类型
                    mapType: 'china',   
                    coordinateSystem: 'geo',        // series坐标系类型
                    data: dataAC_2,
                }],
                visualMap: {
                    type: 'continuous',         // 连续型
                    text: ['累计病例'],
                    min: 0,                     // 值域最小值，必须参数
                    max: 5000,                   // 值域最大值，必须参数
                    calculable: true,           // 是否启动值域漫游
                    inRange: {                      //定义在选中范围中的视觉元素，如散点图中的大小、颜色、颜色明暗等
                        symbolSize: [10, 50],       //点的大小，数据映射时最小值对应Min,最大值对应Max
                        color: ['#50a3ba', '#eac736', '#d94e5d']
                        // 指定数值从低到高时的颜色变化
                    },
                    textStyle: {
                        color: '#fff'       // 值域控件的文本颜色
                    }
                }
            })
        })
        </script>
</div>
<footer>
    <a href="#top">广州水利电力职业技术学院</a><br><br>
    <a>19大数据3班 190124331 罗智为 A卷</a>
</footer>
</body>
</html>

脚本宝典总结

以上是脚本宝典为你收集整理的新冠疫情数据可视化展示全部内容，希望文章能够帮你解决新冠疫情数据可视化展示所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：
猜你在找的心得技巧相关文章
其他相关热搜词更多
微信小程序PHPVueVue.jsPythonPython3SQLJSJavaScriptCSSCSS3Web前端C++C语言HTMLJavaTypeScriptes6鸿蒙OS
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新心得技巧教程
热门心得技巧教程