(function() { // Vue.component('high-incidence-disease', { template: '
\

本月高发疾病排行

\
\ \ \ \
\
\ \ \ \
\
\
', props: ["data"], data: function() { return { index1:0, index2:0, gaoBingFaData:null, isInit:true } }, mounted: function() { }, watch:{ data:function(data){ this.data = data; this.formatData(); this.refreshData(); } }, methods: { btnClick1:function(idx){ this.index1 = idx; this.refreshData(); }, btnClick2:function(idx){ this.index2 = idx; this.refreshData(); }, formatData:function(){ //全部.本月 this.data["本月高发疾病排行"].全部.本月.xAxis[0].data = (this.data["本月高发疾病排行"].全部.本月.xAxis[0].data).reverse(); this.data["本月高发疾病排行"].全部.本月.series[0].data = (this.data["本月高发疾病排行"].全部.本月.series[0].data).reverse(); this.data["本月高发疾病排行"].全部.本月.series[1].data = (this.data["本月高发疾病排行"].全部.本月.series[1].data).reverse(); //全部.本季 this.data["本月高发疾病排行"].全部.本季.xAxis[0].data = (this.data["本月高发疾病排行"].全部.本季.xAxis[0].data).reverse(); this.data["本月高发疾病排行"].全部.本季.series[0].data = (this.data["本月高发疾病排行"].全部.本季.series[0].data).reverse(); this.data["本月高发疾病排行"].全部.本季.series[1].data = (this.data["本月高发疾病排行"].全部.本季.series[1].data).reverse(); //全部.本年 this.data["本月高发疾病排行"].全部.本年.xAxis[0].data = (this.data["本月高发疾病排行"].全部.本年.xAxis[0].data).reverse(); this.data["本月高发疾病排行"].全部.本年.series[0].data = (this.data["本月高发疾病排行"].全部.本年.series[0].data).reverse(); this.data["本月高发疾病排行"].全部.本年.series[1].data = (this.data["本月高发疾病排行"].全部.本年.series[1].data).reverse(); //住院.本月 this.data["本月高发疾病排行"].住院[0].本月.xAxis[0].data = (this.data["本月高发疾病排行"].住院[0].本月.xAxis[0].data).reverse(); this.data["本月高发疾病排行"].住院[0].本月.series[0].data = (this.data["本月高发疾病排行"].住院[0].本月.series[0].data).reverse(); //住院.本季 this.data["本月高发疾病排行"].住院[1].本季.xAxis[0].data = (this.data["本月高发疾病排行"].住院[1].本季.xAxis[0].data).reverse(); this.data["本月高发疾病排行"].住院[1].本季.series[0].data = (this.data["本月高发疾病排行"].住院[1].本季.series[0].data).reverse(); //住院.本年 this.data["本月高发疾病排行"].住院[2].本年.xAxis[0].data = (this.data["本月高发疾病排行"].住院[2].本年.xAxis[0].data).reverse(); this.data["本月高发疾病排行"].住院[2].本年.series[0].data = (this.data["本月高发疾病排行"].住院[2].本年.series[0].data).reverse(); //门诊.本月 this.data["本月高发疾病排行"].门诊[0].本月.xAxis[0].data = (this.data["本月高发疾病排行"].门诊[0].本月.xAxis[0].data).reverse(); this.data["本月高发疾病排行"].门诊[0].本月.series[0].data = (this.data["本月高发疾病排行"].门诊[0].本月.series[0].data).reverse(); //门诊.本季 this.data["本月高发疾病排行"].门诊[1].本季.xAxis[0].data = (this.data["本月高发疾病排行"].门诊[1].本季.xAxis[0].data).reverse(); this.data["本月高发疾病排行"].门诊[1].本季.series[0].data = (this.data["本月高发疾病排行"].门诊[1].本季.series[0].data).reverse(); //门诊.本年 this.data["本月高发疾病排行"].门诊[2].本年.xAxis[0].data = (this.data["本月高发疾病排行"].门诊[2].本年.xAxis[0].data).reverse(); this.data["本月高发疾病排行"].门诊[2].本年.series[0].data = (this.data["本月高发疾病排行"].门诊[2].本年.series[0].data).reverse(); }, refreshData:function(){ if(this.index1==0){//全部 if(this.index2==0){//本月 this.gaoBingFaData = this.data["本月高发疾病排行"].全部.本月; }else if(this.index2==1){//本季 this.gaoBingFaData = this.data["本月高发疾病排行"].全部.本季; }else if(this.index2==2){//本年 this.gaoBingFaData = this.data["本月高发疾病排行"].全部.本年; } }else if(this.index1==1){//住院 if(this.index2==0){//本月 this.gaoBingFaData = this.data["本月高发疾病排行"].住院[0].本月; }else if(this.index2==1){//本季 this.gaoBingFaData = this.data["本月高发疾病排行"].住院[1].本季; }else if(this.index2==2){//本年 this.gaoBingFaData = this.data["本月高发疾病排行"].住院[2].本年; } }else if(this.index1==2){//门诊 if(this.index2==0){//本月 this.gaoBingFaData = this.data["本月高发疾病排行"].门诊[0].本月; }else if(this.index2==1){//本季 this.gaoBingFaData = this.data["本月高发疾病排行"].门诊[1].本季; }else if(this.index2==2){//本年 this.gaoBingFaData = this.data["本月高发疾病排行"].门诊[2].本年; } } this.initData(); }, initData:function(){//高发疾病 var zhuYuanData = [],zhuYuanTitle = ""; var xAxisData = this.gaoBingFaData.xAxis[0].data; var menZhenData = this.gaoBingFaData.series[0].data; var menZhenTitle = this.gaoBingFaData.series[0].name; if(this.index1==0){//全部,显示门诊/住院数据叠加 zhuYuanData = this.gaoBingFaData.series[1].data; zhuYuanTitle = this.gaoBingFaData.series[1].name; this.geoFaMainFun(xAxisData,menZhenData,zhuYuanData,menZhenTitle,zhuYuanTitle) } else if(this.index1==1 || this.index1==2){//住院或门诊时,显示单个柱状图 this.geoFaMainFun(xAxisData,menZhenData,zhuYuanData,menZhenTitle,zhuYuanTitle) } }, geoFaMainFun:function(xAxisData,menZhenData,zhuYuanData,menZhenTitle,zhuYuanTitle){ var gaoFaChart = echarts.init(document.getElementById('div-gaofa-disease-chart')); var gaofaOption = { "tooltip": { "trigger": "axis" }, grid: {top: 40, bottom: 30, left: 100,right:80}, "yAxis": [{ "type": "category", "name": "人次", "data": xAxisData, axisPointer: { type: 'shadow' }, axisTick: { show: false }, axisLine: { lineStyle: { color: '#095f8e' } }, axisLabel: { color: '#b5e1fc', fontSize:'13' }, nameTextStyle:{color: '#b5e1fc'} }], "xAxis": [{ "type": "value", axisPointer: { type: 'shadow' }, axisTick: { show: false }, axisLine: { lineStyle: { color: '#095f8e' } }, axisLabel: { color: '#fff', fontSize:'14' }, splitLine: { show: false // 不显示坐标轴刻度 } }], "series": [{ "smooth": true, "name": menZhenTitle, "type": "bar", stack: '高发疾病', barWidth: 20, "label": { show: true, position: "right", color: '#b5e1fc' }, "itemStyle": { "normal": { "lineStyle": { "shadowColor": "rgba(0,0,0,0.4)" }, color: '#00e6f3', barBorderRadius: [0, 8, 8, 0], } }, "data": menZhenData }, ] } if(zhuYuanData.length>0){ gaofaOption.series[0].label.show = false; gaofaOption.series[0].itemStyle.normal.color = "#6576e0"; delete gaofaOption.series[0].itemStyle.normal.barBorderRadius; gaofaOption.series[1] = { "smooth": true, "name": zhuYuanTitle, "type": "bar", stack: '高发疾病', "label": { show: true, position: "right", color: '#b5e1fc', formatter:function(param){ var dataIndex = param.dataIndex,menZhenVal; _.map(menZhenData,function(item,idx){ if(idx==dataIndex){ menZhenVal = item } }) return menZhenVal+"+"+param.value; }, }, "itemStyle": { "normal": { "lineStyle": { "shadowColor": "rgba(0,0,0,0.4)" }, barBorderRadius: [0, 8, 8, 0], color: '#00e6f3' }, }, "data": zhuYuanData } }else{ gaofaOption.series = gaofaOption.series[0]; } if(gaoFaChart){ gaoFaChart.clear(); } gaoFaChart.setOption(gaofaOption); } }, }) })()