哈尔滨每日新增死亡人数echarts 饼配置项内容和展示
数据来源：《东三省疫事报告书》 奉天防疫总局，1911年
配置项如下
var color = ['#d73027', '#f46d43', '#fdae61', '#fee090', '#ffffbf', '#e0f3f8', '#abd9e9', '#74add1', '#4575b4'];
option = {
backgroundColor: '#363636',
title: {
text: '滨江厅(哈尔滨)每日新增死亡人数',
subtext: '数据来源：《东三省疫事报告书》 奉天防疫总局，1911年',
x: 'center',
top: '3%',
textStyle: {
color: '#fff',
fontSize: 25
},
subtextStyle: {
fontSize: 15
}
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c}"
},
grid: {
borderColor: "#fff",
borderWidth: 0,
containLabel: false,
height: "75%",
left: "5%",
show: false,
bottom: "10%",
width: "92%"
},
legend: {
x: 'center',
bottom: 8,
data: ['每日新增死亡人数'],
textStyle: {
color: '#fff',
fontSize: 15,
fontWeight: 'bold'
},
},
xAxis: [{
type: 'category',
data: [
'1910-11-8',
'1910-11-9',
'1910-11-10',
'1910-11-12',
'1910-11-13',
'1910-11-14',
'1910-11-15',
'1910-11-16',
'1910-11-17',
'1910-11-18',
'1910-11-19',
'1910-11-20',
'1910-11-21',
'1910-11-22',
'1910-11-23',
'1910-11-24',
'1910-11-25',
'1910-11-26',
'1910-11-27',
'1910-11-28',
'1910-11-29',
'1910-11-30',
'1910-12-1',
'1910-12-2',
'1910-12-3',
'1910-12-4',
'1910-12-5',
'1910-12-6',
'1910-12-7',
'1910-12-8',
'1910-12-9',
'1910-12-10',
'1910-12-11',
'1910-12-12',
'1910-12-13',
'1910-12-14',
'1910-12-15',
'1910-12-17',
'1910-12-18',
'1910-12-19',
'1910-12-20',
'1910-12-21',
'1910-12-22',
'1910-12-23',
'1910-12-24',
'1910-12-25',
'1910-12-26',
'1910-12-27',
'1910-12-28',
'1910-12-29',
'1910-12-30',
'1910-12-31',
'1911-1-1',
'1911-1-2',
'1911-1-3',
'1911-1-4',
'1911-1-5',
'1911-1-6',
'1911-1-7',
'1911-1-8',
'1911-1-9',
'1911-1-10',
'1911-1-11',
'1911-1-12',
'1911-1-13',
'1911-1-14',
'1911-1-15',
'1911-1-16',
'1911-1-17',
'1911-1-18',
'1911-1-19',
'1911-1-20',
'1911-1-21',
'1911-1-22',
'1911-1-23',
'1911-1-24',
'1911-1-25',
'1911-1-26',
'1911-1-27',
'1911-1-28',
'1911-1-29',
'1911-1-30',
'1911-1-31',
'1911-2-1',
'1911-2-2',
'1911-2-3',
'1911-2-4',
'1911-2-5',
'1911-2-6',
'1911-2-7',
'1911-2-8',
'1911-2-9',
'1911-2-10',
'1911-2-11',
'1911-2-12',
'1911-2-13',
'1911-2-14',
'1911-2-15',
'1911-2-16',
'1911-2-17',
'1911-2-18',
'1911-2-19',
'1911-2-20',
'1911-2-21',
'1911-2-22',
'1911-2-23',
'1911-2-24',
'1911-2-25',
'1911-2-26',
'1911-2-27',
'1911-2-28',
'1911-3-1',
'1911-3-2',
'1911-3-3',
'1911-3-4',
'1911-3-5',
'1911-3-6',
'1911-3-7',
'1911-3-8',
'1911-3-9',
'1911-3-10',
'1911-3-11',
],
axisLine: {
show: true,
lineStyle: {
color: "#fff",
width: 1,
type: "solid"
}
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
textStyle: {
color: "#fff",
}
},
}],
yAxis: [{
type: 'value',
axisLabel: {
formatter: '{value}'
},
axisTick: {
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: "#fff",
width: 1,
type: "solid"
},
},
splitLine: {
lineStyle: {
type: 'dashed',
color: '#6E7783'
}
}
}],
series: [{
name: '每月新增死亡人数',
type: 'pie',
center: ['28%', '50%'],
radius: ['28%', '38%'],
label: {
normal: {
formatter: function(params) {
return params.data.name + ":" + params.data.value + "人";
},
}
},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(255, 255,255, 0.5)'
}
},
data: [{
value: 20,
name: '1910年11月',
itemStyle: {
color: '#c7e9c0',
borderColor: "#363636",
}
},
{
value: 411,
name: '1910年12月',
itemStyle: {
color: '#c6dbef',
borderColor: "#363636",
borderWidth: 2
}
},
{
value: 3958,
name: '1911年1月',
itemStyle: {
color: '#fff7bc',
borderColor: "#363636",
borderWidth: 2
}
},
{
value: 289,
name: '1911年2月',
itemStyle: {
color: '#fee391',
borderColor: "#363636",
borderWidth: 2
}
},
{
value: 15,
name: '1911年2月',
itemStyle: {
color: '#a1d99b',
borderColor: "#363636",
}
}
]
}, {
name: '每日新增死亡人数',
type: 'bar',
data: [3, 2, , , , 1, , 1, 1, , 3, , , , , , 4, 2, , , , , 3, , 1, , 3, 5, 2, 1, 5, 1, , 7, 5, 16, 12, 14, 12, 11, 18, 13, 10, 13, 17, 17, 19, 30, 32, 23, 10, 28, 37, 36, 56, 53, 49, 91, 84, 96, 78, 103, 90, 123, 90, 123, 115, 104, 123, 135, 135, 129, 125, 156, 179, 141, 161, 156, 168, 157, 139, 154, 151, 182, 143, 96, 119, 125, 114, 114, 88, 94, 111, 85, 90, 80, 60, 43, 38, 45, 33, 33, 27, 14, 18, 14, 5, 16, 6, 1, 5, 2, 5, 4, , 3, 4, 1, , , , 2, , 2, 1],
barWidth: 3, //柱子宽度
//barGap: 0.5, //柱子之间间距
itemStyle: {
normal: {
color: '#C9E6FF',
barBorderRadius: [5, 5, 0, 0],
}
}
}, ]
};
截图如下
