mirror of
https://gitee.com/lvyeyou/DaShuJuZhiDaPingZhanShi.git
synced 2025-08-01 20:37:28 +08:00
618 lines
16 KiB
JavaScript
618 lines
16 KiB
JavaScript
|
|
$(function(){
|
|
|
|
|
|
init();
|
|
|
|
})
|
|
function init(){
|
|
|
|
|
|
|
|
var myColor = ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6'];
|
|
|
|
//各医院门诊人次
|
|
var histogramChart1 = echarts.init(document.getElementById('histogramChart1'));
|
|
histogramChart1.setOption({
|
|
|
|
grid: {
|
|
top: '20%',
|
|
left: '32%'
|
|
},
|
|
xAxis: {
|
|
show: false
|
|
},
|
|
yAxis: [{
|
|
show: true,
|
|
data: ['厦门第一医院','厦门中山医院','厦门中医院','厦门第五医院',],
|
|
inverse: true,
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
color: '#fff',
|
|
formatter: (value, index) => {
|
|
return [
|
|
|
|
`{lg|${index+1}} ` + '{title|' + value + '} '
|
|
].join('\n')
|
|
},
|
|
rich: {
|
|
lg: {
|
|
backgroundColor: '#339911',
|
|
color: '#fff',
|
|
borderRadius: 15,
|
|
// padding: 5,
|
|
align: 'center',
|
|
width: 15,
|
|
height: 15
|
|
},
|
|
}
|
|
},
|
|
|
|
|
|
}, {
|
|
show: true,
|
|
inverse: true,
|
|
data: [4000, 3000, 2000, 1000],
|
|
axisLabel: {
|
|
textStyle: {
|
|
fontSize: 12,
|
|
color: '#fff',
|
|
},
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
|
|
}],
|
|
series: [{
|
|
name: '条',
|
|
type: 'bar',
|
|
yAxisIndex: 0,
|
|
data: [40, 30, 20, 10],
|
|
barWidth: 10,
|
|
itemStyle: {
|
|
normal: {
|
|
barBorderRadius: 20,
|
|
color: function(params) {
|
|
var num = myColor.length;
|
|
return myColor[params.dataIndex % num]
|
|
},
|
|
}
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'inside',
|
|
formatter: '{c}%'
|
|
}
|
|
},
|
|
}, {
|
|
name: '框',
|
|
type: 'bar',
|
|
yAxisIndex: 1,
|
|
barGap: '-100%',
|
|
data: [100, 100, 100, 100],
|
|
barWidth: 15,
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'none',
|
|
borderColor: '#00c1de',
|
|
borderWidth: 3,
|
|
barBorderRadius: 15,
|
|
}
|
|
}
|
|
}, ]
|
|
})
|
|
|
|
//各医院住院人次
|
|
var histogramChart2 = echarts.init(document.getElementById('histogramChart2'));
|
|
histogramChart2.setOption({
|
|
|
|
grid: {
|
|
top: '20%',
|
|
left: '32%'
|
|
},
|
|
xAxis: {
|
|
show: false
|
|
},
|
|
yAxis: [{
|
|
show: true,
|
|
data: ['厦门第一医院','厦门中山医院','厦门中医院','厦门第五医院',],
|
|
inverse: true,
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
color: '#fff',
|
|
formatter: (value, index) => {
|
|
return [
|
|
|
|
`{lg|${index+1}} ` + '{title|' + value + '} '
|
|
].join('\n')
|
|
},
|
|
rich: {
|
|
lg: {
|
|
backgroundColor: '#339911',
|
|
color: '#fff',
|
|
borderRadius: 15,
|
|
// padding: 5,
|
|
align: 'center',
|
|
width: 15,
|
|
height: 15
|
|
},
|
|
}
|
|
},
|
|
|
|
|
|
}, {
|
|
show: true,
|
|
inverse: true,
|
|
data: [2200, 2400, 2600, 2800],
|
|
axisLabel: {
|
|
textStyle: {
|
|
fontSize: 12,
|
|
color: '#fff',
|
|
},
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
|
|
}],
|
|
series: [{
|
|
name: '条',
|
|
type: 'bar',
|
|
yAxisIndex: 0,
|
|
data: [22, 24, 26, 28],
|
|
barWidth: 10,
|
|
itemStyle: {
|
|
normal: {
|
|
barBorderRadius: 20,
|
|
color: function(params) {
|
|
var num = myColor.length;
|
|
return myColor[params.dataIndex % num]
|
|
},
|
|
}
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'inside',
|
|
formatter: '{c}%'
|
|
}
|
|
},
|
|
}, {
|
|
name: '框',
|
|
type: 'bar',
|
|
yAxisIndex: 1,
|
|
barGap: '-100%',
|
|
data: [100, 100, 100, 100],
|
|
barWidth: 15,
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'none',
|
|
borderColor: '#00c1de',
|
|
borderWidth: 3,
|
|
barBorderRadius: 15,
|
|
}
|
|
}
|
|
}, ]
|
|
})
|
|
|
|
//手术工作量
|
|
var pieChart1 = echarts.init(document.getElementById('pieChart1'));
|
|
pieChart1.setOption({
|
|
color:["#87cefa","#ff7f50","#32cd32","#da70d6",],
|
|
tooltip : {
|
|
trigger: 'item',
|
|
formatter: "{a}<br/>{b}<br/>{c}台"
|
|
},
|
|
calculable : true,
|
|
series : [
|
|
{
|
|
name:'手术工作量',
|
|
type:'pie',
|
|
radius : [30, 110],
|
|
center : ['50%', '50%'],
|
|
roseType : 'area',
|
|
x: '50%',
|
|
max: 40,
|
|
sort : 'ascending',
|
|
data:[
|
|
{value:10, name:'厦门第一医院'},
|
|
{value:5, name:'厦门中山医院'},
|
|
{value:15, name:'厦门中医院'},
|
|
{value:25, name:'厦门第五医院'},
|
|
]
|
|
}
|
|
]
|
|
})
|
|
|
|
//医疗费用
|
|
var lineChart1 = echarts.init(document.getElementById('lineChart1'));
|
|
lineChart1.setOption( {
|
|
color:["#87cefa","#ff7f50","#32cd32","#da70d6",],
|
|
tooltip : {
|
|
trigger: 'item',
|
|
formatter: "{a}<br/>{b}<br/>{c}元"
|
|
},
|
|
legend: {
|
|
data:['厦门第一医院','厦门中山医院','厦门中医院','厦门第五医院',],
|
|
y: 'bottom',
|
|
x:'center',
|
|
textStyle:{
|
|
color:'#fff',
|
|
fontSize:12
|
|
}
|
|
},
|
|
grid:{
|
|
left: '5%',
|
|
right: '5%',
|
|
bottom: '10%',
|
|
containLabel: true
|
|
},
|
|
calculable : true,
|
|
xAxis : [
|
|
{
|
|
type : 'category',
|
|
boundaryGap : false,
|
|
data : ['周一','周二','周三','周四','周五','周六','周日'],
|
|
axisLine:{
|
|
lineStyle:{
|
|
color: '#87cefa'
|
|
},
|
|
},
|
|
axisLabel : {
|
|
interval:0,
|
|
rotate:40,
|
|
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize:13
|
|
}
|
|
}
|
|
}
|
|
],
|
|
yAxis : [
|
|
{
|
|
type : 'value',
|
|
axisLine:{
|
|
lineStyle:{
|
|
color: '#87cefa'
|
|
},
|
|
},
|
|
splitLine: {
|
|
"show": false
|
|
},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#fff'
|
|
},
|
|
formatter: function (value) {
|
|
return value + "元"
|
|
},
|
|
},
|
|
}
|
|
],
|
|
series : [
|
|
{
|
|
name:'厦门第一医院',
|
|
type:'line',
|
|
smooth:true,
|
|
itemStyle: {normal: {areaStyle: {type: 'default'}}},
|
|
data:[10, 12, 21, 54, 260, 830, 710]
|
|
},
|
|
{
|
|
name:'厦门中山医院',
|
|
type:'line',
|
|
smooth:true,
|
|
itemStyle: {normal: {areaStyle: {type: 'default'}}},
|
|
data:[30, 182, 434, 791, 390, 30, 10]
|
|
},
|
|
{
|
|
name:'厦门中医院',
|
|
type:'line',
|
|
smooth:true,
|
|
itemStyle: {normal: {areaStyle: {type: 'default'}}},
|
|
data:[1320, 1132, 601, 234, 120, 90, 20]
|
|
},
|
|
{
|
|
name:'厦门第五医院',
|
|
type:'line',
|
|
smooth:true,
|
|
itemStyle: {normal: {areaStyle: {type: 'default'}}},
|
|
data:[320, 132, 61, 34, 20, 9, 2]
|
|
}
|
|
]
|
|
|
|
})
|
|
|
|
//体检人次
|
|
var lineChart2 = echarts.init(document.getElementById('lineChart2'));
|
|
lineChart2.setOption( {
|
|
color:["#87cefa","#ff7f50","#32cd32","#da70d6",],
|
|
tooltip : {
|
|
trigger: 'item',
|
|
formatter: "{a}<br/>{b}<br/>{c}人"
|
|
},
|
|
legend: {
|
|
data:['厦门第一医院','厦门中山医院','厦门中医院','厦门第五医院',],
|
|
y: 'bottom',
|
|
x:'center',
|
|
textStyle:{
|
|
color:'#fff',
|
|
fontSize:12
|
|
}
|
|
},
|
|
grid:{
|
|
left: '5%',
|
|
right: '5%',
|
|
bottom: '10%',
|
|
containLabel: true
|
|
},
|
|
calculable : true,
|
|
xAxis : [
|
|
{
|
|
type : 'category',
|
|
boundaryGap : false,
|
|
data : ['周一','周二','周三','周四','周五','周六','周日'],
|
|
axisLine:{
|
|
lineStyle:{
|
|
color: '#87cefa'
|
|
},
|
|
},
|
|
axisLabel : {
|
|
interval:0,
|
|
rotate:40,
|
|
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize:13
|
|
}
|
|
}
|
|
}
|
|
],
|
|
yAxis : [
|
|
{
|
|
type : 'value',
|
|
axisLine:{
|
|
lineStyle:{
|
|
color: '#87cefa'
|
|
},
|
|
},
|
|
splitLine: {
|
|
"show": false
|
|
},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#fff'
|
|
},
|
|
formatter: function (value) {
|
|
return value + "人"
|
|
},
|
|
},
|
|
}
|
|
],
|
|
series : [
|
|
{
|
|
name:'厦门第一医院',
|
|
type:'line',
|
|
smooth:true,
|
|
itemStyle: {normal: {areaStyle: {type: 'default'}}},
|
|
data:[120, 122, 221, 524, 460, 530, 610]
|
|
},
|
|
{
|
|
name:'厦门中山医院',
|
|
type:'line',
|
|
smooth:true,
|
|
itemStyle: {normal: {areaStyle: {type: 'default'}}},
|
|
data:[130, 682, 534, 691, 490, 130, 110]
|
|
},
|
|
{
|
|
name:'厦门中医院',
|
|
type:'line',
|
|
smooth:true,
|
|
itemStyle: {normal: {areaStyle: {type: 'default'}}},
|
|
data:[320, 132, 161, 134, 112, 190, 120]
|
|
},
|
|
{
|
|
name:'厦门第五医院',
|
|
type:'line',
|
|
smooth:true,
|
|
itemStyle: {normal: {areaStyle: {type: 'default'}}},
|
|
data:[320, 132, 461, 34, 202, 93, 222]
|
|
}
|
|
]
|
|
|
|
})
|
|
|
|
//床位数量分布
|
|
var pieChart2 = echarts.init(document.getElementById('pieChart2'));
|
|
pieChart2.setOption({
|
|
color:["#87cefa","#ff7f50","#32cd32","#da70d6",],
|
|
tooltip : {
|
|
trigger: 'item',
|
|
formatter: "{a}<br/>{b}<br/>{c}床"
|
|
},
|
|
calculable : true,
|
|
series : [
|
|
{
|
|
name:'床位数量分布',
|
|
type:'pie',
|
|
radius : [30, 110],
|
|
center : ['45%', '50%'],
|
|
roseType : 'area',
|
|
x: '50%',
|
|
max: 40,
|
|
sort : 'ascending',
|
|
data:[
|
|
{value:700, name:'厦门第一医院'},
|
|
{value:500, name:'厦门中山医院'},
|
|
{value:105, name:'厦门中医院'},
|
|
{value:250, name:'厦门第五医院'},
|
|
]
|
|
}
|
|
]
|
|
})
|
|
|
|
//药占比
|
|
var histogramChart3 = echarts.init(document.getElementById('histogramChart3'));
|
|
histogramChart3.setOption( {
|
|
|
|
color:['#87cefa'],
|
|
grid:{
|
|
left: '5%',
|
|
right: '5%',
|
|
bottom: '5%',
|
|
containLabel: true
|
|
},
|
|
tooltip : {
|
|
trigger: 'item',
|
|
formatter: "{a}<br/>{b}<br/>{c}%"
|
|
},
|
|
calculable : true,
|
|
xAxis : [
|
|
{
|
|
type : 'category',
|
|
data : ['厦门第一医院','厦门中山医院','厦门中医院','厦门第五医院',],
|
|
axisLine:{
|
|
lineStyle:{
|
|
color: '#87cefa'
|
|
},
|
|
},
|
|
axisLabel : {
|
|
interval:0,
|
|
rotate:40,
|
|
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize:13
|
|
}
|
|
}
|
|
}
|
|
],
|
|
yAxis : [
|
|
{
|
|
type : 'value',
|
|
axisLine:{
|
|
lineStyle:{
|
|
color: '#87cefa'
|
|
},
|
|
},
|
|
splitLine: {
|
|
"show": false
|
|
},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#fff'
|
|
},
|
|
formatter: function (value) {
|
|
return value + "%"
|
|
},
|
|
},
|
|
}
|
|
],
|
|
series : [
|
|
{
|
|
name:'药占比',
|
|
type:'bar',
|
|
barWidth:30,
|
|
data:[60,80,70,50],
|
|
},
|
|
]
|
|
});
|
|
|
|
//平均住院天数
|
|
var histogramChart4 = echarts.init(document.getElementById('histogramChart4'));
|
|
histogramChart4.setOption( {
|
|
color:['#87cefa'],
|
|
grid:{
|
|
left: '5%',
|
|
right: '5%',
|
|
bottom: '5%',
|
|
containLabel: true
|
|
},
|
|
tooltip : {
|
|
trigger: 'item',
|
|
formatter: "{a}<br/>{b}<br/>{c}天"
|
|
},
|
|
calculable : true,
|
|
xAxis : [
|
|
{
|
|
type : 'category',
|
|
data : ['厦门第一医院','厦门中山医院','厦门中医院','厦门第五医院',],
|
|
axisLine:{
|
|
lineStyle:{
|
|
color: '#87cefa'
|
|
},
|
|
},
|
|
axisLabel : {
|
|
interval:0,
|
|
rotate:40,
|
|
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize:13
|
|
}
|
|
}
|
|
}
|
|
],
|
|
yAxis : [
|
|
{
|
|
type : 'value',
|
|
axisLine:{
|
|
lineStyle:{
|
|
color: '#87cefa'
|
|
},
|
|
},
|
|
splitLine: {
|
|
"show": false
|
|
},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#fff'
|
|
},
|
|
formatter: function (value) {
|
|
return value + "天"
|
|
},
|
|
},
|
|
}
|
|
],
|
|
series : [
|
|
{
|
|
name:'平均住院天数',
|
|
type:'bar',
|
|
barWidth:30,
|
|
data:[6,8,7,5],
|
|
},
|
|
]
|
|
});
|
|
|
|
}
|