结对作业之疫情地图 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()
              })

        })();

  

运行效果图:

 

posted @ 2021-03-23 16:58  第厘  阅读(30)  评论(0编辑  收藏  举报