First ECharts
🏷️ ECharts
页面地址
点击查看页面代码
html
<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>