zoukankan      html  css  js  c++  java
  • 结对作业之疫情地图 4

    设置中国疫情新增趋势

            //设置中国疫情新增趋势
            (function(){
                 //分别存储新增确诊、境外输入确诊和横坐标日期
                 var addcon_newList = [];
                 var con_jwsrList = [];
                 var dateList = [];
                 for(let j=0,i=0;j<=12,i<=60;j++,i=i+5){
                    dateList[j] = historylist[i].ymd;
                    addcon_newList[j] = historylist[i].cn_conadd;
                    con_jwsrList[j] = historylist[i].cn_addjwsrNum;
                }
        
                 
                var trendcontent = echarts.init(document.querySelector(".trend .content"));
                var option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                         data: ['新增确诊', '新增境外输入确诊']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data:[dateList[12],dateList[11],dateList[10]
                        ,dateList[9],dateList[8],dateList[7]
                        ,dateList[6],dateList[5],dateList[4]
                        ,dateList[3],dateList[2],dateList[1],dateList[0]],
    
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '新增确诊',
                            type: 'line',
                            smooth: true,
                            data: [ addcon_newList[12],addcon_newList[11],addcon_newList[10]
                            ,addcon_newList[9],addcon_newList[8],addcon_newList[7]
                            ,addcon_newList[6],addcon_newList[5],addcon_newList[4]
                            ,addcon_newList[3],addcon_newList[2],addcon_newList[1],addcon_newList[0]]
                        },
                        {
                            name: '新增境外输入确诊',
                            type: 'line',
                            smooth: true,
                            data: [con_jwsrList[12],con_jwsrList[11],con_jwsrList[10]
                            ,con_jwsrList[9],con_jwsrList[8],con_jwsrList[7]
                            ,con_jwsrList[6],con_jwsrList[5],con_jwsrList[4]
                            ,con_jwsrList[3],con_jwsrList[2],con_jwsrList[1],con_jwsrList[0]]
                        },
                      
                    ]
           
                }
                trendcontent.setOption(option);
    
                window.addEventListener('resize', function () {
                    trendcontent.resize()
                  })
    
            })();
    

      

    运行效果图:

  • 相关阅读:
    Python入门篇-解析式、生成器
    使用Kerberos进行Hadoop认证
    Python标准库-datatime和time
    使用Cloudera Manager部署HUE
    使用Cloudera Manager部署oozie
    使用Cloudera Manager部署Spark服务
    HDFS重启集群导致数据损坏,使用fsck命令修复过程
    关系型数据的收集
    使用Cloudera Manager搭建Kudu环境
    分布式结构化存储系统-Kudu简介
  • 原文地址:https://www.cnblogs.com/ltw222/p/14913958.html
Copyright © 2011-2022 走看看