bigScreenShow/page/bigData/component/death-cause.js

(function() {
//<img src="../images/icon.png" class="icon-img">
	Vue.component('death-cause', {
		template: '<div style="height: 100%;">\
						<h4 class="c-b5e1fc c-f16 c-t-center div-common-title">死亡原因</h4>\
						<div class="" style="height: 85%;">\
							<div id="div-shiwang-echart" class="ml20"></div>\
							<div class="div-siwang-type" v-if="causeData.length>0">\
								<div class="div-webkit-box">\
									<div class="c-b5e1fc div-webkit-box-flex1 c-f14">\
										<label class="bgc-00e6f3 bar-a"></label>\
										<label class="ml10">恶性肿瘤</label>\
										<label class="ml20">{{causeData[0].value}}</label>\
									</div>\
								</div>\
								<div class="div-webkit-box">\
									<div class="c-b5e1fc div-webkit-box-flex1 c-f14">\
										<label class="bgc-ff616f bar-a"></label>\
										<label class="ml10">心脏病</label>\
										<label class="ml20">{{causeData[2].value}}</label>\
									</div>\
								</div>\
								<div class="div-webkit-box">\
									<div class="c-b5e1fc div-webkit-box-flex1 c-f14">\
										<label class="bgc-6576e0 bar-a"></label>\
										<label class="ml10">损伤和中毒</label>\
										<label class="ml20">{{causeData[4].value}}</label>\
									</div>\
								</div>\
								<div class="div-webkit-box">\
									<div class="c-b5e1fc div-webkit-box-flex1 c-f14">\
										<label class="bgc-03fa6c bar-a"></label>\
										<label class="ml10">脑血管疾病</label>\
										<label class="ml20">{{causeData[1].value}}</label>\
									</div>\
								</div>\
								<div class="div-webkit-box">\
									<div class="c-b5e1fc div-webkit-box-flex1 c-f14">\
										<label class="bgc-0fa5f2 bar-a"></label>\
										<label class="ml10">呼吸系统疾病</label>\
										<label class="ml20">{{causeData[3].value}}</label>\
									</div>\
								</div>\
								<div class="div-webkit-box">\
									<div class="c-b5e1fc div-webkit-box-flex1 c-f14">\
										<label class="bgc-da0ff2 bar-a"></label>\
										<label class="ml10">消化系统疾病</label>\
										<label class="ml20">{{causeData[5].value}}</label>\
									</div>\
								</div>\
								<div class="div-webkit-box">\
									<div class="c-b5e1fc div-webkit-box-flex1 c-f14">\
										<label class="bgc-f24a0f bar-a"></label>\
										<label class="ml10">内分泌、营养和代谢疾病</label>\
										<label class="ml20">{{causeData[6].value}}</label>\
									</div>\
								</div>\
								<div class="div-webkit-box">\
									<div class="c-b5e1fc div-webkit-box-flex1 c-f14">\
										<label class="bgc-ebff61 bar-a"></label>\
										<label class="ml10">泌尿生殖系统疾病</label>\
										<label class="ml20">{{causeData[7].value}}</label>\
									</div>\
								</div>\
								<div class="div-webkit-box">\
									<div class="c-b5e1fc div-webkit-box-flex1 c-f14">\
										<label class="bgc-fea92f bar-a"></label>\
										<label class="ml10">其他疾病</label>\
										<label class="ml20">{{causeData[8].value}}</label>\
									</div>\
								</div>\
							</div>\
						</div>\
					</div>',
		props: ["data"],
		data: function() {
			return {
				causeData: []
			}
		},
		mounted: function() {
			var vm = this;
			setTimeout(function(){
				vm.initData();
			},50)
		},
		watch:{
			data:function(data){
				this.data = data;
				this.initData();
			}
		},
		methods: {
			formatCauseData:function(){
				this.causeData = _.map(this.causeData,function(item,idx){
					switch(idx){
						case 0: item.color = "bgc-00e6f3"; break;
						case 1: item.color = "bgc-03fa6c"; break;
						case 2: item.color = "bgc-ff616f"; break;
						case 3: item.color = "bgc-0fa5f2"; break;
						case 4: item.color = "bgc-6576e0"; break;
						case 5: item.color = "bgc-da0ff2"; break;
						case 6: item.color = "bgc-f24a0f"; break;
						case 7: item.color = "bgc-ebff61"; break;
						case 8: item.color = "bgc-fea92f"; break;
						default:break;
					}
					return item;
				})
			},
			initData:function(){//死亡原因
				this.causeData = this.data["死亡原因"].series[0].data;
				this.formatCauseData();
				var myChart = echarts.init(document.getElementById('div-shiwang-echart'));
				var option = {
					//      "title": {
					//          "text": "性别分布",
					//          "subtext": "性别分布",
					//          "x": "center"
					//      },
					"tooltip": {
						"trigger": "item"
					},
					color: ["#00e6f3","#03fa6c","#ff616f","#0fa5f2","#6576e0","#da0ff2","#f24a0f","#ebff61","#fea92f"],
					"series": [{
						"center": [
							"50%",
							"50%"
						],
						radius: ['50%', '70%'],
						"name": "",
						"type": "pie",
						"itemStyle": {
							"normal": {
								"label": {
									"show": false
								},
								"labelLine": {
									"show": false
								}
							}
						},
						"data": this.causeData
					}]
				}
				if(myChart){
					myChart.clear();
				}
				myChart.setOption(option);
			}
		}
		
	})

})()