<script src="/dist/libs/echarts/4.3.0/echarts.min.js"></script><style>
    .echart {
        max-width: 750px;
        height:400px;
        padding: 10px 0;
    }
    @media (max-width: 750px) {
        .echart {
            width: 100%;
            height:300px;
        }
    }
</style>
<div id="ncov-suzhou-date" class="echart"></div>

<div id="ncov-suzhou-area" class="echart"></div>

<div id="ncov-suzhou-age" class="echart"></div>

<div id="ncov-suzhou-sex" class="echart"></div>

<script>
(function () {
    let data_suzhou = [
        {"no": 1, "confirmDate": "2020-01-22", "sex": "男", "age": 37, "area": "工业园区", "is_discharge": true, "dischargeDate": "2020-01-23"},
        {"no": 2, "confirmDate": "2020-01-23", "sex": "女", "age": 32, "area": "工业园区", "is_discharge": true, "dischargeDate": "2020-01-31"},
        {"no": 3, "confirmDate": "2020-01-24", "sex": "男", "age": 60, "area": "常熟市", "is_discharge": false, "dischargeDate": ""},
        {"no": 4, "confirmDate": "2020-01-25", "sex": "女", "age": 46, "area": "姑苏区", "is_discharge": true, "dischargeDate": "2020-02-05"},
        {"no": 5, "confirmDate": "2020-01-25", "sex": "男", "age": 70, "area": "姑苏区", "is_discharge": false, "dischargeDate": ""},
        {"no": 6, "confirmDate": "2020-01-25", "sex": "男", "age": 60, "area": "吴江区", "is_discharge": false, "dischargeDate": ""},
        {"no": 7, "confirmDate": "2020-01-25", "sex": "男", "age": 49, "area": "吴江区", "is_discharge": false, "dischargeDate": ""},
        {"no": 8, "confirmDate": "2020-01-26", "sex": "女", "age": 20, "area": "相城区", "is_discharge": true, "dischargeDate": "2020-02-02"},
        {"no": 9, "confirmDate": "2020-01-27", "sex": "女", "age": 47, "area": "吴江区", "is_discharge": false, "dischargeDate": ""},
        {"no": 10, "confirmDate": "2020-01-27", "sex": "男", "age": 41, "area": "常熟市", "is_discharge": false, "dischargeDate": ""},
        {"no": 11, "confirmDate": "2020-01-27", "sex": "男", "age": 32, "area": "工业园区", "is_discharge": false, "dischargeDate": ""},
        {"no": 12, "confirmDate": "2020-01-27", "sex": "男", "age": 48, "area": "相城区", "is_discharge": true, "dischargeDate": "2020-02-09"},
        {"no": 13, "confirmDate": "2020-01-28", "sex": "男", "age": 51, "area": "工业园区", "is_discharge": true, "dischargeDate": "2020-02-09"},
        {"no": 14, "confirmDate": "2020-01-28", "sex": "男", "age": 50, "area": "姑苏区", "is_discharge": false, "dischargeDate": ""},
        {"no": 15, "confirmDate": "2020-01-28", "sex": "男", "age": 48, "area": "工业园区", "is_discharge": true, "dischargeDate": "2020-02-09"},
        {"no": 16, "confirmDate": "2020-01-28", "sex": "女", "age": 62, "area": "昆山市", "is_discharge": false, "dischargeDate": ""},
        {"no": 17, "confirmDate": "2020-01-28", "sex": "男", "age": 64, "area": "昆山市", "is_discharge": true, "dischargeDate": "2020-02-09"},
        {"no": 18, "confirmDate": "2020-01-28", "sex": "女", "age": 57, "area": "吴中区", "is_discharge": false, "dischargeDate": ""},
        {"no": 19, "confirmDate": "2020-01-28", "sex": "男", "age": 36, "area": "工业园区", "is_discharge": false, "dischargeDate": "2020-02-10"},
        {"no": 20, "confirmDate": "2020-01-28", "sex": "男", "age": 32, "area": "姑苏区", "is_discharge": false, "dischargeDate": ""},
        {"no": 21, "confirmDate": "2020-01-29", "sex": "女", "age": 64, "area": "昆山市", "is_discharge": false, "dischargeDate": ""},
        {"no": 22, "confirmDate": "2020-01-29", "sex": "男", "age": 39, "area": "工业园区", "is_discharge": true, "dischargeDate": "2020-02-09"},
        {"no": 23, "confirmDate": "2020-01-29", "sex": "女", "age": 64, "area": "工业园区", "is_discharge": false, "dischargeDate": ""},
        {"no": 24, "confirmDate": "2020-01-29", "sex": "女", "age": 56, "area": "姑苏区", "is_discharge": false, "dischargeDate": ""},
        {"no": 25, "confirmDate": "2020-01-30", "sex": "男", "age": 41, "area": "吴中区", "is_discharge": false, "dischargeDate": ""},
        {"no": 26, "confirmDate": "2020-01-30", "sex": "男", "age": 66, "area": "工业园区", "is_discharge": true, "dischargeDate": "2020-02-09"},
        {"no": 27, "confirmDate": "2020-01-30", "sex": "女", "age": 49, "area": "吴江区", "is_discharge": false, "dischargeDate": ""},
        {"no": 28, "confirmDate": "2020-01-30", "sex": "男", "age": 35, "area": "吴中区", "is_discharge": true, "dischargeDate": "2020-02-09"},
        {"no": 29, "confirmDate": "2020-01-30", "sex": "男", "age": 1, "area": "吴中区", "is_discharge": false, "dischargeDate": ""},
        {"no": 30, "confirmDate": "2020-01-30", "sex": "男", "age": 59, "area": "昆山市", "is_discharge": false, "dischargeDate": ""},
        {"no": 31, "confirmDate": "2020-01-30", "sex": "男", "age": 43, "area": "昆山市", "is_discharge": false, "dischargeDate": ""},
        {"no": 32, "confirmDate": "2020-01-30", "sex": "男", "age": 54, "area": "相城区", "is_discharge": false, "dischargeDate": ""},
        {"no": 33, "confirmDate": "2020-01-31", "sex": "女", "age": 66, "area": "工业园区", "is_discharge": false, "dischargeDate": ""},
        {"no": 34, "confirmDate": "2020-01-31", "sex": "男", "age": 38, "area": "昆山市", "is_discharge": false, "dischargeDate": ""},
        {"no": 35, "confirmDate": "2020-02-01", "sex": "男", "age": 67, "area": "吴江区", "is_discharge": false, "dischargeDate": ""},
        {"no": 36, "confirmDate": "2020-02-01", "sex": "女", "age": 63, "area": "昆山市", "is_discharge": false, "dischargeDate": ""},
        {"no": 37, "confirmDate": "2020-02-01", "sex": "男", "age": 36, "area": "工业园区", "is_discharge": false, "dischargeDate": ""},
        {"no": 38, "confirmDate": "2020-02-01", "sex": "男", "age": 42, "area": "工业园区", "is_discharge": false, "dischargeDate": ""},
        {"no": 39, "confirmDate": "2020-02-02", "sex": "男", "age": 67, "area": "高新区", "is_discharge": false, "dischargeDate": ""},
        {"no": 40, "confirmDate": "2020-02-02", "sex": "女", "age": 32, "area": "工业园区", "is_discharge": false, "dischargeDate": "2020-02-10"},
        {"no": 41, "confirmDate": "2020-02-02", "sex": "男", "age": 47, "area": "工业园区", "is_discharge": false, "dischargeDate": ""},
        {"no": 42, "confirmDate": "2020-02-02", "sex": "女", "age": 37, "area": "昆山市", "is_discharge": false, "dischargeDate": ""},
        {"no": 43, "confirmDate": "2020-02-02", "sex": "男", "age": 38, "area": "太仓市", "is_discharge": false, "dischargeDate": ""},
        {"no": 44, "confirmDate": "2020-02-02", "sex": "男", "age": 44, "area": "吴中区", "is_discharge": false, "dischargeDate": ""},
        {"no": 45, "confirmDate": "2020-02-03", "sex": "男", "age": 36, "area": "高新区", "is_discharge": false, "dischargeDate": ""},
        {"no": 46, "confirmDate": "2020-02-03", "sex": "女", "age": 59, "area": "昆山市", "is_discharge": false, "dischargeDate": ""},
        {"no": 47, "confirmDate": "2020-02-03", "sex": "男", "age": 38, "area": "工业园区", "is_discharge": false, "dischargeDate": ""},
        {"no": 48, "confirmDate": "2020-02-03", "sex": "男", "age": 48, "area": "工业园区", "is_discharge": false, "dischargeDate": ""},
        {"no": 49, "confirmDate": "2020-02-03", "sex": "女", "age": 43, "area": "昆山市", "is_discharge": false, "dischargeDate": ""},
        {"no": 50, "confirmDate": "2020-02-03", "sex": "女", "age": 11, "area": "昆山市", "is_discharge": false, "dischargeDate": ""},
        {"no": 51, "confirmDate": "2020-02-03", "sex": "女", "age": 34, "area": "高新区", "is_discharge": false, "dischargeDate": ""},
        {"no": 52, "confirmDate": "2020-02-03", "sex": "男", "age": 24, "area": "吴江区", "is_discharge": false, "dischargeDate": ""},
        {"no": 53, "confirmDate": "2020-02-04", "sex": "男", "age": 30, "area": "吴江区", "is_discharge": false, "dischargeDate": ""},
        {"no": 54, "confirmDate": "2020-02-04", "sex": "男", "age": 63, "area": "工业园区", "is_discharge": false, "dischargeDate": ""},
        {"no": 55, "confirmDate": "2020-02-04", "sex": "女", "age": 64, "area": "工业园区", "is_discharge": false, "dischargeDate": ""},
        {"no": 56, "confirmDate": "2020-02-05", "sex": "女", "age": 32, "area": "昆山市", "is_discharge": false, "dischargeDate": ""},
        {"no": 57, "confirmDate": "2020-02-05", "sex": "男", "age": 65, "area": "工业园区", "is_discharge": false, "dischargeDate": ""},
        {"no": 58, "confirmDate": "2020-02-05", "sex": "女", "age": 22, "area": "工业园区", "is_discharge": false, "dischargeDate": ""},
        {"no": 59, "confirmDate": "2020-02-05", "sex": "女", "age": 46, "area": "工业园区", "is_discharge": false, "dischargeDate": ""},
        {"no": 60, "confirmDate": "2020-02-05", "sex": "男", "age": 41, "area": "昆山市", "is_discharge": false, "dischargeDate": ""},
        {"no": 61, "confirmDate": "2020-02-06", "sex": "女", "age": 24, "area": "工业园区", "is_discharge": false, "dischargeDate": ""},
        {"no": 62, "confirmDate": "2020-02-06", "sex": "女", "age": 9, "area": "工业园区", "is_discharge": false, "dischargeDate": ""},
        {"no": 63, "confirmDate": "2020-02-06", "sex": "男", "age": 38, "area": "昆山市", "is_discharge": false, "dischargeDate": ""},
        {"no": 64, "confirmDate": "2020-02-06", "sex": "女", "age": 62, "area": "常熟市", "is_discharge": false, "dischargeDate": ""},
        {"no": 65, "confirmDate": "2020-02-06", "sex": "男", "age": 41, "area": "太仓市", "is_discharge": false, "dischargeDate": ""},
        {"no": 66, "confirmDate": "2020-02-06", "sex": "女", "age": 38, "area": "昆山市", "is_discharge": false, "dischargeDate": ""},
        {"no": 67, "confirmDate": "2020-02-06", "sex": "女", "age": 32, "area": "昆山市", "is_discharge": false, "dischargeDate": ""},
        {"no": 68, "confirmDate": "2020-02-06", "sex": "男", "age": 45, "area": "吴中区", "is_discharge": false, "dischargeDate": ""},
        {"no": 69, "confirmDate": "2020-02-06", "sex": "女", "age": 37, "area": "工业园区", "is_discharge": false, "dischargeDate": ""},
        {"no": 70, "confirmDate": "2020-02-07", "sex": "男", "age": 55, "area": "高新区", "is_discharge": false, "dischargeDate": ""},
        {"no": 71, "confirmDate": "2020-02-07", "sex": "女", "age": 30, "area": "吴中区", "is_discharge": false, "dischargeDate": ""},
        {"no": 72, "confirmDate": "2020-02-07", "sex": "女", "age": 28, "area": "吴中区", "is_discharge": false, "dischargeDate": ""},
        {"no": 73, "confirmDate": "2020-02-08", "sex": "女", "age": 60, "area": "张家港市", "is_discharge": false, "dischargeDate": ""},
        {"no": 74, "confirmDate": "2020-02-08", "sex": "男", "age": 54, "area": "吴江区", "is_discharge": false, "dischargeDate": ""},
        {"no": 75, "confirmDate": "2020-02-08", "sex": "男", "age": 57, "area": "常熟市", "is_discharge": false, "dischargeDate": ""},
        {"no": 76, "confirmDate": "2020-02-09", "sex": "女", "age": 26, "area": "高新区", "is_discharge": false, "dischargeDate": ""},
        {"no": 77, "confirmDate": "2020-02-09", "sex": "女", "age": 39, "area": "太仓市", "is_discharge": false, "dischargeDate": ""}
    ];
    // 新增出院数据
    let is_use_detail_discharge = true;
    let data_discharge = [
        {"dischargeDate": "2020-01-23", "newDischargeCount": 1},
        {"dischargeDate": "2020-01-31", "newDischargeCount": 1},
        {"dischargeDate": "2020-02-02", "newDischargeCount": 1},
        {"dischargeDate": "2020-02-05", "newDischargeCount": 1},
        {"dischargeDate": "2020-02-09", "newDischargeCount": 7},
    ];
    let data_date = []; // 日期
    let data_area = []; // 区域
    let data_age = [
        { "ageSection": 0, "ageSectionName": "0+", "count": 0, "dischargeCount": 0 },
        { "ageSection": 1, "ageSectionName": "10+", "count": 0, "dischargeCount": 0 },
        { "ageSection": 2, "ageSectionName": "20+", "count": 0, "dischargeCount": 0 },
        { "ageSection": 3, "ageSectionName": "30+", "count": 0, "dischargeCount": 0 },
        { "ageSection": 4, "ageSectionName": "40+", "count": 0, "dischargeCount": 0 },
        { "ageSection": 5, "ageSectionName": "50+", "count": 0, "dischargeCount": 0 },
        { "ageSection": 6, "ageSectionName": "60+", "count": 0, "dischargeCount": 0 },
        { "ageSection": 7, "ageSectionName": "70+", "count": 0, "dischargeCount": 0 },
        { "ageSection": 8, "ageSectionName": "80+", "count": 0, "dischargeCount": 0 },
    ]; // 年龄
    let data_sex = [{
        "sex": "男",
        "count": 0,
        "dischargeCount": 0
    }, {
        "sex": "女",
        "count": 0,
        "dischargeCount": 0
    }]; // 性别
    var labelOption = {
        show: true,
        position: 'insideTop',
        distance: 0,
        align: 'middle',
        verticalAlign: 'top',
        rotate: 0,
        // formatter: '{c}  {name|{a}}',
        formatter: function (params) {
            return params.value == 0 ? '' : '' + params.value;
        },
        rich: {
            name: {
                textBorderColor: '#fff'
            }
        }
    };
    for (let p of data_suzhou) {
         // 日期
        r_date = data_date.find(function(o) {
            return o.date == p.confirmDate;
        });
        if (r_date == undefined) {
            r_date = {
                "date": p.confirmDate,
                "newCount": 1,
                "totalCount": 1,
                "newDischargeCount": 0,
                "totalDischargeCount": 0,
            };
            data_date.push(r_date);
        } else {
            r_date.newCount += 1;
            r_date.totalCount += 1;
        }
        // 详细数据中的已出院数据
        if (is_use_detail_discharge && p.is_discharge) {
            let r_data_discharge = data_date.find(function(o) {
                return o.date == p.dischargeDate;
            });
            if (r_data_discharge == undefined) {
                r_data_discharge = {
                    "date": p.dischargeDate,
                    "newCount": 0,
                    "totalCount": 0,
                    "newDischargeCount": 1,
                    "totalDischargeCount": 1,
                };
                data_date.push(r_data_discharge);
            } else {
                r_data_discharge.newDischargeCount += 1;
                r_data_discharge.totalDischargeCount += 1;
            }
        }
        // 区域
        r_area = data_area.find(function(o) {
            return o.area == p.area;
        });
        if (r_area == undefined) {
            r_area = {
                "area": p.area,
                "count": 1,
                "dischargeCount": p.is_discharge ? 1 : 0
            };
            data_area.push(r_area);
        } else {
            r_area.count += 1;
            r_area.dischargeCount += p.is_discharge ? 1 : 0;
        }
        // 年龄
        let ageSection = Math.floor(p.age/10);
        r_age = data_age.find(function(o) {
            return o.ageSection == ageSection;
        });
        if (r_age == undefined) {
        } else {
            r_age.count += 1;
            r_age.dischargeCount += p.is_discharge ? 1 : 0;
        }
        // 性别
        r_sex = data_sex.find(function(o) {
            return o.sex == p.sex;
        });
        if (r_sex == undefined) {
            r_sex = {
                "sex": p.sex,
                "count": 1,
                "dischargeCount": p.is_discharge ? 1 : 0,
            };
            data_sex.push(r_sex);
        } else {
            r_sex.count += 1;
            r_sex.dischargeCount += p.is_discharge ? 1 : 0;
        }
    }
    // 每日出院数据
    if (!is_use_detail_discharge) {
        for (i=0;i<data_date.length;i++) {
            let r_discharge = data_discharge.find(function(o) {
                return o.dischargeDate == data_date[i].date;
            });
            if (r_discharge != undefined) {
                data_date[i].newDischargeCount = r_discharge.newDischargeCount;
                data_date[i].totalDischargeCount = r_discharge.newDischargeCount;
            }
        }
    }
    // 累计日期数据
    for (i=0;i<data_date.length;i++) {
        for (j=0;j<data_date.length;j++) {
            if (data_date[i].date > data_date[j].date) {
                data_date[i].totalCount += data_date[j].newCount;
                data_date[i].totalDischargeCount += data_date[j].newDischargeCount;
            }
        }
    }
    let total_count = 0;
    for (let r_sex of data_sex) {
        total_count += r_sex.count;
    }
    for (let r_sex of data_sex) {
        r_sex.percent = r_sex.count / total_count;
    }
    // 排序
    data_date = data_date.sort((a,b) => new Date(a.date).getTime() - new Date(b.date).getTime());
    // 日期图
    window.echart_date = echarts.init(document.getElementById('ncov-suzhou-date'));
    window.echart_date.setOption({
        // title: {
        //     text: '2019-nCoV 苏州'
        // },
        tooltip: {
            trigger: 'axis'
        },
        color: ['#ffa040', '#ff6384', '#4bc0c0', '#9966ff'],
        legend: {
            data: ['新增确诊', '确诊', '已出院', '在院治疗']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: data_date.map(function(o) { return o.date; })
        },
        yAxis: {
                type: 'value'
        },
        series: [
            {
                name: '新增确诊',
                data: data_date.map(function(o) { return o.newCount; }),
                type: 'line',
                smooth: true
            }, {
                name: '确诊',
                data: data_date.map(function(o) { return o.totalCount; }),
                type: 'line',
                smooth: true
            }, {
                name: '已出院',
                data: data_date.map(function(o) { return o.totalDischargeCount; }),
                type: 'line',
                smooth: true
            }, {
                name: '在院治疗',
                data: data_date.map(function(o) { return o.totalCount - o.totalDischargeCount; }),
                type: 'line',
                smooth: true
            }]
    });
    // 区域图
    window.echart_area = echarts.init(document.getElementById('ncov-suzhou-area'));
    window.echart_area.setOption({
        color: ['#ff6384', '#4bc0c0'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['确诊', '已出院']
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
        },
        xAxis: [
            {
                type: 'category',
                axisTick: {
                    show: true
                },
                axisLabel: {
                    show: true,
                    interval: 0,
                    rotate: 45
                },
                data: data_area.map(function(o) { return o.area; })
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '确诊',
                type: 'bar',
                barGap: 0,
                label: labelOption,
                data: data_area.map(function(o) { return o.count; })
            },
            {
                name: '已出院',
                type: 'bar',
                label: labelOption,
                data: data_area.map(function(o) { return o.dischargeCount; })
            }
        ]
    });
    // 年龄图
	window.echart_age = echarts.init(document.getElementById('ncov-suzhou-age'));
    window.echart_age.setOption({
        color: ['#ff6384', '#4bc0c0'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['确诊', '已出院']
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
        },
        xAxis: [
            {
                type: 'category',
                axisTick: {show: false},
                data: data_age.map(function(o) { return o.ageSectionName; })
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '确诊',
                type: 'bar',
                barGap: 0,
                label: labelOption,
                data: data_age.map(function(o) { return o.count; })
            },
            {
                name: '已出院',
                type: 'bar',
                label: labelOption,
                data: data_age.map(function(o) { return o.dischargeCount; })
            }
        ]
    });
    // 性别
	window.echart_sex = echarts.init(document.getElementById('ncov-suzhou-sex'));
    window.echart_sex.setOption({
        color: ['#ff6384', '#4bc0c0'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['确诊', '已出院']
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
        },
        xAxis: [
            {
                type: 'category',
                axisTick: {show: false},
                data: data_sex.map(function(o) { return o.sex; })
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '确诊',
                type: 'bar',
                barGap: 0,
                label: labelOption,
                data: data_sex.map(function(o) { return o.count; })
            },
            {
                name: '已出院',
                type: 'bar',
                label: labelOption,
                data: data_sex.map(function(o) { return o.dischargeCount; })
            }
        ]
    });
})(this);
</script>