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 v-show="!hasData" class="no-result-panel">\
                            <div class="no-result-img">\
                                <img src="../images/noData.png">\
                            </div>\
                            <div class="no-result-text">暂无数据！</div>\
                        </div>\
						<div v-show="hasData" style="height: 85%;">\
							<div id="div-shiwang-echart" class="ml10"></div>\
							<div class="div-siwang-type" v-if="causeData.length>0">\
								<div class="div-webkit-box" v-for="(cause, idx) in causeData">\
									<div class="c-b5e1fc div-webkit-box-flex1 c-f14">\
										<label class="bar-a" v-bind:class="idx | formatData"></label>\
										<label class="ml10">{{cause.name}}</label>\
										<label class="ml20">{{cause.value}}</label>\
									</div>\
								</div>\
							</div>\
						</div>\
					</div>',
		props: ["data"],
		data: function() {
			return {
				causeData: [],
				hasData:true,
				newData:null
			}
		},
		mounted: function() {
			
		},
		watch:{
			data:function(data){
				if(data){
					this.newData = data.successFlg?data.obj.viewInfos&&JSON.parse(data.obj.viewInfos[0].options[0].option):{};
					if(this.newData.series&&this.newData.series[0].data){
						this.hasData = true;
						this.initData();
					}else{
						this.hasData = false;
					}
				}
			}
		},
		filters:{
			formatData:function(index){
				var colorArr = ["bgc-00e6f3","bgc-03fa6c","bgc-ff616f","bgc-0fa5f2","bgc-6576e0","bgc-da0ff2","bgc-f24a0f","bgc-ebff61","bgc-fea92f"];
				return colorArr[index];
			}
		},
		methods: {
			initData:function(){//死亡原因
				this.causeData = this.newData.series[0].data;
				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);
			}
		}
		
	})

})()