全球疫情可视化展示--进阶版

全球疫情可视化展示--进阶版

成果展示

网页链接:http://39.97.181.86/yiqing_war/world.html

展示截图:

 

 

代码设计

①页面设计

首先对整体页面进行划分,顶部是一个长方形的div,顶部部分包含:标题+时间

下面分三大块:左面,中间,右面

左面:又分3小块包含“柱状图”,“折线图”,“饼状图”

中间:上面一块为数量展示,下面分三个东西,地球图片,网状和旋转星轨,全球疫情数据展示

右面:三个小块“柱状图”,“折线图”,“南丁格尔图”

②代码编写

world.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>世界疫情总览</title>
    <link rel="stylesheet" href="css/index.css" />
    <script src="js/jquery.js" ></script>
    <script src="js/echarts.min.js"></script>
    <script type="text/javascript" src="https://www.echartsjs.com/examples/vendors/echarts/map/js/world.js?_v_=1584687926098"></script>
</head>
<body>

<header>
    <h1>疫情数据可视化-Echart</h1>
    <div class="showTime"></div>
</header>
<!-- 页面主体部分-->
<section class="mainbox">
    <div class="column">
        <div class="panel bar">
            <h2>世界确诊-TOP5</h2>
            <div class="chart"></div>
            <div class="panel-footer"></div>
        </div>
        <div class="panel line">
            <h2>总体疫情变化</h2>
            <div class="chart">图表</div>
            <div class="panel-footer"></div>
        </div>
        <div class="panel pie">
            <h2>总体疫情分类总览</h2>
            <div class="chart">图表</div>
            <div class="panel-footer"></div>
        </div>
    </div>
    <div class="column">
        <div class="no">
            <div class="no-hd">
                <ul>
                    <!-- 感染人数 治愈人数 死亡人数 -->
                </ul>
            </div>
            <div class="no-bd">
                <ul>
                    <li>感染人数</li>
                    <li>治愈人数</li>
                    <li>死亡人数</li>
                </ul>
            </div>
        </div>
        <!--地图模块 -->
        <div class="map">
            <div class="map1"></div>
            <div class="map2"></div>
            <div class="map3"></div>
            <div class="chart">地图模块</div>
        </div>
    </div>
    <div class="column">
        <div class="panel bar2">
            <h2>全球五大强国治愈率排名</h2>
            <div class="chart">图表</div>
            <div class="panel-footer"></div>
        </div>
        <div class="panel line2">
            <h2>各大洲感染总人数趋势图</h2>
            <div class="chart">图表</div>
            <div class="panel-footer"></div>
        </div>
        <div class="panel pie2">
            <h2>全球死亡-排行榜TOP5</h2>
            <div class="chart">图表</div>
            <div class="panel-footer"></div>
        </div>
    </div>
</section>

<script>
    //时间设置
    var t=null;
    t=setTimeout(time,1000);
    function time() {
        clearTimeout(t);
        dt=new Date();
        var y=dt.getFullYear();
        var mt=dt.getMonth()+1;
        var day=dt.getDate();
        var h=dt.getHours();
        var m=dt.getMinutes();
        var s=dt.getSeconds();
        var times=
            "当前时间:" +
            y +
            "" +
            mt +
            "" +
            day +
            "-" +
            h +
            "" +
            m +
            "" +
            s +
            "";
        $(".showTime").html(times);
        t=setTimeout(time,1000);
    }


    //各大洲感染人数变化
    (function () {
        var myChart=echarts.init(document.querySelector(".line2 .chart"));
        var cname=[];
        var yz=[];
        var bmz=[];
        var oz=[];
        var dyz=[];
        var others=[];
        $.post(
            "localconfirmed",
            function(data){
                for(var i=0;i<data.length;i++)
                {
                    cname[i]=data[i].Date;
                    yz[i]=data[i].name;
                    bmz[i]=data[i].confirmed;
                    oz[i]=data[i].cured;
                    dyz[i]=data[i].dead;
                    others[i]=data[i].suspected;
                }
                var option = {
                    color:['#1089E7','#F57474','#56D0E3','#F8B448','#8B78F6'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: ['亚洲', '北美洲', '欧洲', '大洋洲', '其他'],
                        textStyle:{
                            color:'#fff'
                        }
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '0%',
                        right: '0%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: cname,
                            axisLabel:{
                                color:'#fff'
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLabel:{
                                color:'#fff'
                            },
                            //y轴分割线的颜色
                            splitLine:{
                                lineStyle:{
                                    color:"rgba(255,255,255,.1)"
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            name: '亚洲',
                            color:'#fff',
                            type: 'line',
                            areaStyle: {},
                            data: yz
                        },
                        {
                            name: '北美洲',
                            type: 'line',
                            areaStyle: {},
                            data: bmz
                        },
                        {
                            name: '欧洲',
                            type: 'line',
                            areaStyle: {},
                            data: oz
                        },
                        {
                            name: '大洋洲',
                            type: 'line',
                            areaStyle: {},
                            data: dyz
                        },
                        {
                            name: '其他',
                            type: 'line',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top'
                                }
                            },
                            areaStyle: {},
                            data: others
                        }
                    ]
                };

                myChart.setOption(option);
            },
            "json"
        );



    })();


    //治愈率图表制作
    (function () {
        var myColor=['#1089E7','#F57474','#56D0E3','#F8B448','#8B78F6'];
        var sdata = [];
        var titlename = [];
        var chart=echarts.init(document.querySelector(".bar2 .chart"));
        $.post(
            "findcured",
            function(data){
                for(var i=0;i<5;i++)
                {
                    sdata[i]=data[i].ans;
                    titlename[i]=data[i].name;
                }
                var option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        top: '10%',
                        left: '2%',
                        bottom: '10%',
                        containLabel: true
                    },
                    xAxis: {
                        show:false
                    },
                    yAxis: [
                        {
                            type: 'category',
                            data: titlename,
                            inverse:true,
                            //不显示y轴的线
                            axisLine:{
                                show:false
                            },
                            //不显示刻度
                            axisTick: {
                                show:false
                            },
                            axisLabel:{
                                color:'#fff'
                            }
                        },{
                            type: 'category',
                            //不显示y轴的线
                            axisLine:{
                                show:false
                            },
                            //不显示刻度
                            axisTick: {
                                show:false
                            },
                            axisLabel:{
                                color:'#fff'
                            }
                        }
                    ],
                    series: [
                        {
                            name: "治愈",
                            type: "bar",
                            yAxisIndex: 0,
                            data: sdata,
                            barCategoryGap: 50,
                            barWidth: 10,
                            itemStyle: {
                                normal: {
                                    barBorderRadius: 20,
                                    color: function(params) {
                                        var num = myColor.length;
                                        return myColor[params.dataIndex % num];
                                    }
                                }
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: "inside",
                                    formatter: "{c}%"
                                }
                            }
                        },
                        {
                            name: "",
                            type: "bar",
                            yAxisIndex: 1,
                            barCategoryGap: 50,
                            data: [100, 100, 100, 100, 100],
                            barWidth: 14,
                            itemStyle: {
                                normal: {
                                    color: "none",
                                    borderColor: "#00c1de",
                                    borderWidth: 3,
                                    barBorderRadius: 15
                                }
                            }
                        }
                    ]
                };
                chart.setOption(option);
            },
            "json"
        );
    })();


    //南丁格尔死亡排行榜前10
    (function () {
        var myChart=echarts.init(document.querySelector(".pie2 .chart"));
        $.post(
            "getdead",
            function(data){
                var sdata=[];
                for(var i=0;i<10;i++)
                {
                    var obj=new Object();
                    obj.name=data[i].name;
                    obj.value=data[i].dead;
                    sdata[i]=obj;
                }
                var option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    color:['#0099cc','#ffcccc','#ccff99','#ff9933'],
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: false},
                            magicType: {
                                show: true,
                                type: ['pie', 'funnel']
                            },
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    series: [
                        {
                            name: '死亡人数',
                            type: 'pie',
                            radius: ['20%', '80%'],
                            center: ['50%', '60%'],
                            roseType: 'radius',
                            data: sdata
                        }
                    ]
                };
                myChart.setOption(option);
            },
            "json"
        );
    })();




    (function () {
        var myChart=echarts.init(document.querySelector(".bar .chart"));
        option = {
            color: ['#3398DB'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器,坐标轴触发有效
                    type: 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
                }
            },
            grid: {
                left: '0%',
                right: '0%',
                bottom: '4%',
                top:"10px",
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: [],
                    axisTick: {
                        alignWithLabel: true
                    },
                    //修改x坐标轴字体大小和颜色
                    axisLabel:{
                        color:"rgba(255,255,255,.6)",
                        fontSize:"12"
                    },
                    //修改x坐标轴线不显示
                    axisLine:{
                        show:false
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLabel:{
                        color:"rgba(255,255,255,.6)",
                        fontSize:"12"
                    },
                    axisLine:{
                        lineStyle:{
                            color:"rgba(255,255,255,.1)",
                            type:'solid',
                            width:2
                        }
                    },
                    //y轴分割线的颜色
                    splitLine:{
                        lineStyle:{
                            color:"rgba(255,255,255,.1)"
                        }
                    }
                }
            ],
            series: [
                {
                    name: '直接访问',
                    type: 'bar',
                    barWidth: '35%',
                    data: [],
                    itemStyle:{
                        barBorderRadius:5
                    }
                }
            ]
        };
        myChart.setOption(option);
        //设置感染人数,治愈人数,死亡人数
        $.post(
            "getcured",
            function(data){
                var sum=0;
                for(var i=0;i<data.length;i++)
                    sum+= parseInt(data[i].cured);
                var htmltext="<li style='color: greenyellow'>"+sum+"</li>";
                $(".no-hd ul").html(htmltext);
            },
            "json"
        );
        $.post(
            "getconfirmed",
            function(data){
                var sum=0;
                for(var i=0;i<data.length;i++)
                    sum+= parseInt(data[i].confirmed);
                var htmltext="<li style='color: red'>"+sum+"</li>";
                $(".no-hd ul").prepend(htmltext);
            },
            "json"
        );
        $.post(
            "getdead",
            function(data){
                var sum=0;
                for(var i=0;i<data.length;i++)
                    sum+= parseInt(data[i].dead);
                var htmltext="<li>"+sum+"</li>";
                $(".no-hd ul").append(htmltext);
            },
            "json"
        );
        var cname=[];
        var value=[];
        //配置TOP5前感染国家
        $.post(
            "getconfirmed",
            function(data){
                for(var i=0;i<5;i++)
                {
                    cname[i]=data[i].name;
                    value[i]=parseInt(data[i].confirmed);
                }
                myChart.setOption({
                    xAxis:{
                        //放横坐标的数组
                        data:cname,
                    },
                    series:[{
                        name:'确诊数',
                        //每个横坐标对应的数值
                        data:value
                    }]
                });
            },
            "json"
        );


        //4.让图表随着屏幕变动
        window.addEventListener("resize",function () {
            myChart.resize();
        });
    })();

    //折线图
    (function () {
        var myChart=echarts.init(document.querySelector(".line .chart"));
        var option = {
            title: {
                text: ''
            },
            color:['red','#33FF33','yellow'],
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['总感染人数', '总治愈人数', '总死亡人数'],
                itemHeight :9,//改变圆圈大小
                textStyle:{
                    fontSize:14,
                    color:'white'
                }
            },
            icon:"circle",
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                //修改x坐标轴字体大小和颜色
                axisLabel:{
                    color:"rgba(255,255,255,.6)",
                    fontSize:"12",
                    interval:20,
                    rotate:45
                },
                //修改x坐标轴线不显示
                axisLine:{
                    show:false
                },
                data: []
            },
            yAxis: {
                type: 'value',
                axisLabel:{
                    color:"rgba(255,255,255,.6)",
                    fontSize:"12"
                },
                axisLine:{
                    lineStyle:{
                        color:"rgba(255,255,255,.1)",
                        type:'solid',
                        width:2
                    }
                },
                //y轴分割线的颜色
                splitLine:{
                    lineStyle:{
                        color:"rgba(255,255,255,.1)"
                    }
                }
            },
            series: [
                {
                    name: '总感染人数',
                    type: 'line',
                    smooth: true,
                    data: []
                },
                {
                    name: '总治愈人数',
                    type: 'line',
                    smooth: true,
                    data: []
                },
                {
                    name: '总死亡人数',
                    type: 'line',
                    smooth: true,
                    data: []
                }
            ]
        };
        myChart.setOption(option);

        var cname=[];
        var confirmed=[];
        var cured=[];
        var dead=[];
        //处理这段时间疫情总数变化趋势
        $.ajax({
            url:"getall",
            type:"POST",
            dataType:"JSON",
            async:true,
            success:function(data){
                for(var i=0;i<data.length;i++)
                {
                    cname[i]=data[i].name;
                    confirmed[i]=parseInt(data[i].confirmed);
                    cured[i]=parseInt(data[i].cured);
                    dead[i]=parseInt(data[i].dead);
                }
                myChart.setOption({
                    xAxis:{
                        //放横坐标的数组
                        data:cname,
                    },
                    series:[
                        {
                        name: '总感染人数',
                        type: 'line',
                        data: confirmed
                        },
                        {
                            name: '总治愈人数',
                            type: 'line',
                            data: cured
                        },
                        {
                            name: '总死亡人数',
                            type: 'line',
                            data: dead
                        }
                    ]
                });
            }
        });
        //4.让图表随着屏幕变动
        window.addEventListener("resize",function () {
            myChart.resize();
        });
    })();

    (function () {
        //处理世界疫情地图
        $.ajax({
            url:"allworld",
            type:"POST",
            dataType:"JSON",
            async:true,
            success:function(data){//表示处理成功之后做什么,后面跟一个匿名函数。回调函数,表示处理页面处理完数据以后执行这个函数。data表示处理页面返回的值,用形参接收。
                var mydata = new Array(0);

                for(var i=0;i<data.length;i++){
                    var d = {

                    };
                    d["name"] = data[i].name;//.substring(0, 2);
                    d["value"] = data[i].confirmed;
                    d["Yisi_num"] = data[i].suspected;
                    d["Cured_num"] = data[i].cured;
                    d["Dead_num"] = data[i].dead;
                    mydata.push(d);
                }
                //初始化echarts实例
                var myChart=echarts.init(document.querySelector(".map .chart"));
                // 指定图表的配置项和数据
                var  option = {
                    tooltip : {
                        trigger: 'item',
                        formatter : function(params) {
                            return params.name + '<br/>' + '确诊人数 : '
                                + params.value + '<br/>' + '死亡人数 : '
                                + params['data'].Dead_num + '<br/>' + '治愈人数 : '
                                + params['data'].Cured_num + '<br/>'+ '疑似患者人数 : '
                                + params['data'].Yisi_num;
                        }//数据格式化
                    },
                    title: {
                        text: '世界疫情图',
                        left: 'center',
                        textStyle:{
                            color:'#fff'
                        }
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: {
                            name:'世界疫情图',
                            textStyle:{
                                color:'#fff'
                            }
                        },
                    },
                    visualMap: {
                        type: 'piecewise',
                        pieces: [
                            { min: 70000, max: 50000000, label: '确诊70000人以上', color: 'red' },
                            { min: 10000, max: 69999, label: '确诊10000-69999人', color: 'blue' },
                            { min: 5000, max: 9999, label: '确诊5000-9999人', color: 'purple' },
                            { min: 1500, max: 4999, label: '确诊1500-4999人', color: 'yellow' },
                            { min: 500, max: 1499, label: '确诊500-1499人', color: 'gold' },
                            { min: 0, max: 499, label: '确诊1-499人', color: 'green' },
                        ],
                        color: ['#E0022B', '#E09107', '#A3E00B'],
                        textStyle:{
                            color:'#fff'
                        }
                    },
                    toolbox: {
                        show: true,
                        orient: 'vertical',
                        left: 'right',
                        top: 'center',
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    roamController: {
                        show: true,
                        left: 'right',
                        mapTypeControl: {
                            'world': true
                        }
                    },
                    series: [
                        {
                            name: '确诊数',
                            type: 'map',
                            mapType: 'world',
                            nameMap : {"Canada": "加拿大",
                                "Turkmenistan": "土库曼斯坦",
                                "Saint Helena": "圣赫勒拿",
                                "Lao PDR": "老挝",
                                "Lithuania": "立陶宛",
                                "Cambodia": "柬埔寨",
                                "Ethiopia": "埃塞俄比亚",
                                "Faeroe Is.": "法罗群岛",
                                "Swaziland": "斯威士兰",
                                "Palestine": "巴勒斯坦",
                                "Belize": "伯利兹",
                                "Argentina": "阿根廷",
                                "Bolivia": "玻利维亚",
                                "Cameroon": "喀麦隆",
                                "Burkina Faso": "布基纳法索",
                                "Aland": "奥兰群岛",
                                "Bahrain": "巴林",
                                "Saudi Arabia": "沙特阿拉伯",
                                "Fr. Polynesia": "法属波利尼西亚",
                                "Cape Verde": "佛得角",
                                "W. Sahara": "西撒哈拉",
                                "Slovenia": "斯洛文尼亚",
                                "Guatemala": "危地马拉",
                                "Guinea": "几内亚",
                                "Dem. Rep. Congo": "刚果(金)",
                                "Germany": "德国",
                                "Spain": "西班牙",
                                "Liberia": "利比里亚",
                                "Netherlands": "荷兰",
                                "Jamaica": "牙买加",
                                "Solomon Is.": "所罗门群岛",
                                "Oman": "阿曼",
                                "Tanzania": "坦桑尼亚",
                                "Costa Rica": "哥斯达黎加",
                                "Isle of Man": "曼岛",
                                "Gabon": "加蓬",
                                "Niue": "纽埃",
                                "Bahamas": "巴哈马",
                                "New Zealand": "新西兰",
                                "Yemen": "也门",
                                "Jersey": "泽西岛",
                                "Pakistan": "巴基斯坦",
                                "Albania": "阿尔巴尼亚",
                                "Samoa": "萨摩亚",
                                "Czech Rep.": "捷克",
                                "United Arab Emirates": "阿拉伯联合酋长国",
                                "Guam": "关岛",
                                "India": "印度",
                                "Azerbaijan": "阿塞拜疆",
                                "N. Mariana Is.": "北马里亚纳群岛",
                                "Lesotho": "莱索托",
                                "Kenya": "肯尼亚",
                                "Belarus": "白俄罗斯",
                                "Tajikistan": "塔吉克斯坦",
                                "Turkey": "土耳其",
                                "Afghanistan": "阿富汗",
                                "Bangladesh": "孟加拉国",
                                "Mauritania": "毛里塔尼亚",
                                "Dem. Rep. Korea": "朝鲜",
                                "Saint Lucia": "圣卢西亚",
                                "Br. Indian Ocean Ter.": "英属印度洋领地",
                                "Mongolia": "蒙古",
                                "France": "法国",
                                "Cura?ao": "库拉索岛",
                                "S. Sudan": "南苏丹",
                                "Rwanda": "卢旺达",
                                "Slovakia": "斯洛伐克",
                                "Somalia": "索马里",
                                "Peru": "秘鲁",
                                "Vanuatu": "瓦努阿图",
                                "Norway": "挪威",
                                "Malawi": "马拉维",
                                "Benin": "贝宁",
                                "St. Vin. and Gren.": "圣文森特和格林纳丁斯",
                                "Korea": "韩国",
                                "Singapore": "新加坡",
                                "Montenegro": "黑山共和国",
                                "Cayman Is.": "开曼群岛",
                                "Togo": "多哥",
                                "China": "中国",
                                "Heard I. and McDonald Is.": "赫德岛和麦克唐纳群岛",
                                "Armenia": "亚美尼亚",
                                "Falkland Is.": "马尔维纳斯群岛(福克兰)",
                                "Ukraine": "乌克兰",
                                "Ghana": "加纳",
                                "Tonga": "汤加",
                                "Finland": "芬兰",
                                "Libya": "利比亚",
                                "Dominican Rep.": "多米尼加",
                                "Indonesia": "印度尼西亚",
                                "Mauritius": "毛里求斯",
                                "Eq. Guinea": "赤道几内亚",
                                "Sweden": "瑞典",
                                "Vietnam": "越南",
                                "Mali": "马里",
                                "Russia": "俄罗斯",
                                "Bulgaria": "保加利亚",
                                "United States": "美国",
                                "Romania": "罗马尼亚",
                                "Angola": "安哥拉",
                                "Chad": "乍得",
                                "South Africa": "南非",
                                "Fiji": "斐济",
                                "Liechtenstein": "列支敦士登",
                                "Malaysia": "马来西亚",
                                "Austria": "奥地利",
                                "Mozambique": "莫桑比克",
                                "Uganda": "乌干达",
                                "Japan": "日本",
                                "Niger": "尼日尔",
                                "Brazil": "巴西",
                                "Kuwait": "科威特",
                                "Panama": "巴拿马",
                                "Guyana": "圭亚那",
                                "Madagascar": "马达加斯加",
                                "Luxembourg": "卢森堡",
                                "American Samoa": "美属萨摩亚",
                                "Andorra": "安道尔",
                                "Ireland": "爱尔兰",
                                "Italy": "意大利",
                                "Nigeria": "尼日利亚",
                                "Turks and Caicos Is.": "特克斯和凯科斯群岛",
                                "Ecuador": "厄瓜多尔",
                                "U.S. Virgin Is.": "美属维尔京群岛",
                                "Brunei": "文莱",
                                "Australia": "澳大利亚",
                                "Iran": "伊朗",
                                "Algeria": "阿尔及利亚",
                                "El Salvador": "萨尔瓦多",
                                "C?te d'Ivoire": "科特迪瓦",
                                "Chile": "智利",
                                "Puerto Rico": "波多黎各",
                                "Belgium": "比利时",
                                "Thailand": "泰国",
                                "Haiti": "海地",
                                "Iraq": "伊拉克",
                                "S?o Tomé and Principe": "圣多美和普林西比",
                                "Sierra Leone": "塞拉利昂",
                                "Georgia": "格鲁吉亚",
                                "Denmark": "丹麦",
                                "Philippines": "菲律宾",
                                "S. Geo. and S. Sandw. Is.": "南乔治亚岛和南桑威奇群岛",
                                "Moldova": "摩尔多瓦",
                                "Morocco": "摩洛哥",
                                "Namibia": "纳米比亚",
                                "Malta": "马耳他",
                                "Guinea-Bissau": "几内亚比绍",
                                "Kiribati": "基里巴斯",
                                "Switzerland": "瑞士",
                                "Grenada": "格林纳达",
                                "Seychelles": "塞舌尔",
                                "Portugal": "葡萄牙",
                                "Estonia": "爱沙尼亚",
                                "Uruguay": "乌拉圭",
                                "Antigua and Barb.": "安提瓜和巴布达",
                                "Lebanon": "黎巴嫩",
                                "Uzbekistan": "乌兹别克斯坦",
                                "Tunisia": "突尼斯",
                                "Djibouti": "吉布提",
                                "Greenland": "格陵兰",
                                "Timor-Leste": "东帝汶",
                                "Dominica": "多米尼克",
                                "Colombia": "哥伦比亚",
                                "Burundi": "布隆迪",
                                "Bosnia and Herz.": "波斯尼亚和黑塞哥维那",
                                "Cyprus": "塞浦路斯",
                                "Barbados": "巴巴多斯",
                                "Qatar": "卡塔尔",
                                "Palau": "帕劳",
                                "Bhutan": "不丹",
                                "Sudan": "苏丹",
                                "Nepal": "尼泊尔",
                                "Micronesia": "密克罗尼西亚",
                                "Bermuda": "百慕大",
                                "Suriname": "苏里南",
                                "Venezuela": "委内瑞拉",
                                "Israel": "以色列",
                                "St. Pierre and Miquelon": "圣皮埃尔和密克隆群岛",
                                "Central African Rep.": "中非",
                                "Iceland": "冰岛",
                                "Zambia": "赞比亚",
                                "Senegal": "塞内加尔",
                                "Papua New Guinea": "巴布亚新几内亚",
                                "Trinidad and Tobago": "特立尼达和多巴哥",
                                "Zimbabwe": "津巴布韦",
                                "Jordan": "约旦",
                                "Gambia": "冈比亚",
                                "Kazakhstan": "哈萨克斯坦",
                                "Poland": "波兰",
                                "Eritrea": "厄立特里亚",
                                "Kyrgyzstan": "吉尔吉斯斯坦",
                                "Montserrat": "蒙特塞拉特",
                                "New Caledonia": "新喀里多尼亚",
                                "Macedonia": "马其顿",
                                "Paraguay": "巴拉圭",
                                "Latvia": "拉脱维亚",
                                "Hungary": "匈牙利",
                                "Syria": "叙利亚",
                                "Honduras": "洪都拉斯",
                                "Myanmar": "缅甸",
                                "Mexico": "墨西哥",
                                "Egypt": "埃及",
                                "Nicaragua": "尼加拉瓜",
                                "Cuba": "古巴",
                                "Serbia": "塞尔维亚",
                                "Comoros": "科摩罗",
                                "United Kingdom": "英国",
                                "Fr. S. Antarctic Lands": "南极洲",
                                "Congo": "刚果(布)",
                                "Greece": "希腊",
                                "Sri Lanka": "斯里兰卡",
                                "Croatia": "克罗地亚",
                                "Botswana": "博茨瓦纳",
                                "Siachen Glacier": "锡亚琴冰川地区"
                            },
                            roam: false,
                            label: {
                                show: false,
                                color: 'blue'
                            },
                            data: mydata
                        }
                    ]
                };
                //使用指定的配置项和数据显示图表
                myChart.setOption(option);
            },
            error:function(){//处理页面出错以后执行的函数。
            }
        });
    })();


    (function () {
        var myChart=echarts.init(document.querySelector(".pie .chart"));

        var confirmed;
        var cured;
        var dead;

        $.post(
            "getsum",
            function(data){
                for(var i=0;i<data.length;i++)
                {
                    confirmed=data[i].confirmed;
                    cured=data[i].cured;
                    dead=data[i].dead;
                }
                var option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    color:['red','#33FF33','yellow'],
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['感染人数','治愈人数','死亡人数'],
                        textStyle:{
                            color:'#fff'
                        },
                    },
                    series: [
                        {
                            name: '疫情数据',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '70%'],
                            data: [
                                {value: confirmed, name: '感染人数'},
                                {value: cured, name: '治愈人数'},
                                {value: dead, name: '死亡人数'},
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                myChart.setOption(option);
            },
            "json"
        );
    })();


</script>
<script src="js/flexible.js"></script>
</body>
</html>

 

项目总结

  本次的实战主要的目的就是可以熟练地使用echarts图表,对全球图,中国地图的使用基本掌握,一些高级图的嵌套使用。总之,经过这几个图表的制作,数据可视化展示这个点算是基本掌握。

posted @ 2020-06-29 22:54  清风紫雪  阅读(114)  评论(0编辑  收藏