2019-nCov疫情实时趋势数据可视化Echarts学习(3):JSON数据和echarts柱图和折线图表的开发-阿里云开发者社区

2019-nCov疫情实时趋势数据可视化Echarts学习(3):JSON数据和echarts柱图和折线图表的开发

2023-07-21 91

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 2019-nCov疫情实时趋势数据可视化Echarts学习(3):JSON数据和echarts柱图和折线图表的开发

了解本次学习，先回顾《2019-nCov疫情实时趋势数据可视化Echarts学习(2):获取API数据接口后数据的清洗、处理及JSON标准格式的输出》

一，将JSON数据按照echarts的data要求进行格式化；

            var area = [], confirmed = [], confirmedRelative = [], crued = [], died = [];
            for (var i = 0; i < dataObj.component[0].caseList.length; i++) {
                area.push(dataObj.component[0].caseList[i].area);
                confirmed.push(dataObj.component[0].caseList[i].confirmed);
                confirmedRelative.push(dataObj.component[0].caseList[i].confirmedRelative);
                crued.push(dataObj.component[0].caseList[i].crued);
                died.push(dataObj.component[0].caseList[i].died);
            }

二、引入echarts.min.js，并创建echart的柱图和折线图；

 var dom = document.getElementById("echart1");
            var myChart = echarts.init(dom);
            var option = {
                title: {
                    text: dataObj.component[0].title,
                    subtext: '更新时间：' + dataObj.component[0].mapLastUpdatedTime,
                    x: 'center',
                    top: '3%',
                    textStyle: {
                        color: '#fff',
                        fontSize: '16'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line'
                    },
                    confine: true,
                },
                legend: {
                    data: ['确诊人数', '疑是人数', '治愈人数', '死亡人数'],
                    y: 'bottom',
                    textStyle: {
                        color: '#fff',
                        fontSize: '12'
                    }
                },
                gird: {
                    right: '2%',
                    left: '5%',
                    top: '10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    axisLine: {
                        lineStyle: {
                            color: '#fff'
                        }
                    },
                    data: area
                },
                yAxis: [{
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#fff'
                        }
                    }
                },
                    {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        }
                    }],
                series: [{
                    data: confirmed,
                    type: 'bar',
                    yAxisIndex: 1,
                    name: '确诊人数',
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#fff'
                        }
                    }
                }, {
                    data: confirmedRelative,
                    type: 'line',
                    name: '疑是人数'
                }, {
                    data: crued,
                    type: 'line',
                    name: '治愈人数'
                }, {
                    data: died,
                    type: 'line',
                    name: '死亡人数'
                }
                ]
            };
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });

三、实现数据的自动刷新，匹配JSON数据的刷新时间；

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

完整代码：

 /*5.echarts的数据利用*/
        function getEcharts1() {
            var area = [], confirmed = [], confirmedRelative = [], crued = [], died = [];
            for (var i = 0; i < dataObj.component[0].caseList.length; i++) {
                area.push(dataObj.component[0].caseList[i].area);
                confirmed.push(dataObj.component[0].caseList[i].confirmed);
                confirmedRelative.push(dataObj.component[0].caseList[i].confirmedRelative);
                crued.push(dataObj.component[0].caseList[i].crued);
                died.push(dataObj.component[0].caseList[i].died);
            }
            //console.log(area);
            var dom = document.getElementById("echart1");
            var myChart = echarts.init(dom);
            var option = {
                title: {
                    text: dataObj.component[0].title,
                    subtext: '更新时间：' + dataObj.component[0].mapLastUpdatedTime,
                    x: 'center',
                    top: '3%',
                    textStyle: {
                        color: '#fff',
                        fontSize: '16'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line'
                    },
                    confine: true,
                },
                legend: {
                    data: ['确诊人数', '疑是人数', '治愈人数', '死亡人数'],
                    y: 'bottom',
                    textStyle: {
                        color: '#fff',
                        fontSize: '12'
                    }
                },
                gird: {
                    right: '2%',
                    left: '5%',
                    top: '10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    axisLine: {
                        lineStyle: {
                            color: '#fff'
                        }
                    },
                    data: area
                },
                yAxis: [{
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#fff'
                        }
                    }
                },
                    {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        }
                    }],
                series: [{
                    data: confirmed,
                    type: 'bar',
                    yAxisIndex: 1,
                    name: '确诊人数',
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#fff'
                        }
                    }
                }, {
                    data: confirmedRelative,
                    type: 'line',
                    name: '疑是人数'
                }, {
                    data: crued,
                    type: 'line',
                    name: '治愈人数'
                }, {
                    data: died,
                    type: 'line',
                    name: '死亡人数'
                }
                ]
            };
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }
        var interval;
        getEcharts1();
        clearInterval(interval);
        interval = setInterval(function () {
            getEcharts1();
        }, 60 * 1000);//60s刷新一次数据;

上面只是将JSON数据和Echarts进行了整合开发，能不能按照确认人数的降序排列？能不能完成像《2019-nCov疫情实时趋势数据可视化Echarts学习(1)：柱图和折线图》纵向展示呢？

Done!

2019-nCov疫情实时趋势数据可视化Echarts学习(3):JSON数据和echarts柱图和折线图表的开发

热门文章

最新文章

相关课程

相关电子书

相关实验场景