app-big-data/page/bigData/component/high-incidence-disease.js

(function() {
//<img src="../images/icon.png" class="icon-img">
	Vue.component('high-incidence-disease', {
		template: '<div style="height: 100%;">\
						<h4 class="c-b5e1fc c-f16 c-t-center div-common-title">本月高发疾病排行</h4>\
						<div data-toggle="buttons" class="btn-group">\
							<label class="btn btn-default" :class="{active: index1 == 0}" @click="btnClick1(0)">\
								<input type="radio">全部\
							</label>\
							<label class="btn btn-default" :class="{active: index1 == 1}" @click="btnClick1(1)">\
								<input type="radio">住院\
							</label>\
							<label class="btn btn-default" :class="{active: index1 == 2}" @click="btnClick1(2)">\
								<input type="radio">门诊\
							</label>\
						</div>\
						<div data-toggle="buttons" class="btn-group fr mr20" style="margin-left: 0;">\
							<label class="btn btn-default" :class="{active: index2 == 0}" @click="btnClick2(0)">\
								<input type="radio">本月\
							</label>\
							<label class="btn btn-default" :class="{active: index2 == 1}" @click="btnClick2(1)">\
								<input type="radio">本季\
							</label>\
							<label class="btn btn-default" :class="{active: index2 == 2}" @click="btnClick2(2)">\
								<input type="radio">本年\
							</label>\
						</div>\
						<div id="div-gaofa-disease-chart" class="ml30"></div>\
					</div>',
		props: ["data"],
		data: function() {
			return {
				index1:0,
				index2:0
			}
		},
		mounted: function() {
			var vm = this;
			setTimeout(function(){
				vm.initData();
			},50)
		},
		methods: {
			btnClick1:function(idx){
				this.index1 = idx;
			},
			btnClick2:function(idx){
				this.index2 = idx;
			},
			initData:function(){
				//高发疾病
				var gaoFaChart = echarts.init(document.getElementById('div-gaofa-disease-chart'));
				var gaofaOption = {
					"tooltip": {
						"trigger": "axis"
					},
					grid: {top: 40, bottom: 30, left: 80},
					"yAxis": [{
						"type": "category",
						"name": "人次",
						"data": [
							"大肠杆菌性肠炎",
							"感染性腹泻",
							"胃肠炎",
							"糖尿病",
							"高血压病",
							"脑结核瘤",
							"骨结核",
							"肾结核",
							"心脏病",
							"急性脑膜炎球菌血症"
						],
						axisPointer: {
							type: 'shadow'
						},
						axisTick: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: '#095f8e'
							}
						},
						axisLabel: {
							color: '#b5e1fc'
						},
						nameTextStyle:{color: '#b5e1fc'}
					}],
					"xAxis": [{
						"type": "value",
						axisPointer: {
							type: 'shadow'
						},
						axisTick: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: '#095f8e'
							}
						},
						axisLabel: {
							color: '#fff'
						},
						splitLine: {
							show: false // 不显示坐标轴刻度
						}
					}],
					"series": [{
							"smooth": true,
							"name": "住院情况",
							"type": "bar",
							stack: '高发疾病',
							barWidth: 20,
							"label": {
								show: false,
								position: "right"
							},
							"itemStyle": {
								"normal": {
									"lineStyle": {
										"shadowColor": "rgba(0,0,0,0.4)"
									},
									color: '#6576e0'
								}
							},
							"data": [
								"100",
								"2435",
								"1102",
								"544",
								"520",
								"446",
								"408",
								"315",
								"225",
								"101"
							]
						},
						{
							"smooth": true,
							"name": "门诊情况",
							"type": "bar",
							stack: '高发疾病',
							"label": {
								show: true,
								position: "right",
								formatter:function(param){
	                                return "100+100";
	                           },
							},
							"itemStyle": {
								"normal": {
									"lineStyle": {
										"shadowColor": "rgba(0,0,0,0.4)"
									},
									barBorderRadius: [0, 8, 8, 0],
									color: '#00e6f3'
								}
							},
							"data": [
								"200",
								"3435",
								"1302",
								"684",
								"600",
								"546",
								"521",
								"463",
								"325",
								"301"
							]
						}
					]
				}
				gaoFaChart.setOption(gaofaOption);
			}
		},
		
	})

})()