2019-nCov疫情实时趋势数据可视化Echarts学习(4):JSON数据数组排序和各省份数据柱图

Xanthe ·

更新时间:2024-11-13

· 876 次阅读

在这里插入图片描述
效果如上。

考虑到实际的情况，本例未延续（2）、（3）中的API接口，而采用https://www.tianqiapi.com/api?version=epidemic&appid=23035354&appsecret=8YvlPNrz，免费公用接口。
在于：
1.数据格式更规范，会减少数据清洗和处理的步骤和时间；
2.数据更为详细，遍及省份、市级数据；
综上因素考虑，本学习案例稍有调整。

一、$.get()获取API数据，并对返回的数据，进行分析处理；

        $.get('https://www.tianqiapi.com/api?version=epidemic&appid=23035354&appsecret=8YvlPNrz', function (res, status) {
            /*1.读取数据，查看数据格式，按照需求进行数据清洗处理;*/
            console.log(res.data);
})

二、对数据进行排序处理，使用到sort函数，自行百度；

            /*2.标准数据输出，可以在数据中查询area,调用对应的省份、市，本例已湖北为例*/
            var dataObj = res.data.area[0];//省份数据级别
            //console.log(dataObj);
            var arr = res.data.area[0].cities;//市级数据级别
            //console.log(arr);
            /*3.按照确认人数降序排列*/
            var formal = arr.sort(function (a, b) {
                return a.confirmedCount - b.confirmedCount;
            });

三、输出echarts数据格式数组；

            /*4.输出echarts数据格式数组*/
            var cityName = [], confirmedCount = [], suspectedCount = [], curedCount = [], deadCount = [];
            for (var i = 0; i < formal.length; i++) {
                cityName.push(formal[i].cityName);
                confirmedCount.push(formal[i].confirmedCount);
                suspectedCount.push(formal[i].suspectedCount);
                curedCount.push(formal[i].curedCount);
                deadCount.push(formal[i].deadCount);
            }

四、echaets渲染图表

var dom = document.getElementById("echart1");
            var myChart = echarts.init(dom);
            var option = {
                title: {
                    text: dataObj.preProvinceName + '疫情实时数据报告',
                    subtext: '更新时间：' + res.data.date,
                    x: 'center',
                    top: '0',
                    textStyle: {
                        color: '#fff',
                        fontSize: '16'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line'
                    },
                    confine: true,
                },
                legend: {
                    data: ['确诊人数', '疑是人数', '治愈人数', '死亡人数'],
                    y: 'bottom',
                    textStyle: {
                        color: '#fff',
                        fontSize: '12'
                    }
                },
                gird: {
                    right: '5%',
                    left: '5%',
                    top: '15%',
                    bottom: '5%',
                    containLabel: true
                },
                yAxis: {
                    type: 'category',
                    axisLine: {
                        lineStyle: {
                            color: '#fff'
                        }
                    },
                    data: cityName
                },
                xAxis: [{
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#fff'
                        }
                    }
                },
                    {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        }
                    }],
                series: [{
                    data: confirmedCount,
                    type: 'bar',
                    xAxisIndex: 1,
                    name: '确诊人数',
                    label: {
                        show: true,
                        position: 'right',
                        textStyle: {
                            color: '#fff'
                        }
                    }
                }, {
                    data: suspectedCount,
                    type: 'line',
                    name: '疑是人数'
                }, {
                    data: curedCount,
                    type: 'line',
                    name: '治愈人数'
                }, {
                    data: deadCount,
                    type: 'line',
                    name: '死亡人数'
                }
                ]
            };
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });

五，定时刷新，实现自动加载数据；

   var interval;
    getProvince();
    clearInterval(interval);
    interval = setInterval(function () {
        getProvince();
    }, 60 * 1000);//60s刷新一次数据;

至此，2019-nCov疫情实时趋势数据API学习系列，全部结束！

Done!

作者：保哥后院

Echarts 省份 json数据 JSON 数据排序数组