<template>
	<div class="redrcd-charts">
		<charts :options="chartOption"></charts>
	</div>
</template>
<script>
import charts from "./charts.vue"
require("echarts/lib/chart/funnel");
import * as option from "./options"
export default {
	name: "redrcd-chart",
	data () {
		return {
			chartOption: option.funnel,
			funnelData: [],
			orgCls1: [
				{ "name": "党委", "value": 5422 },
				{ "name": "党总支", "value": 18585 },
				{ "name": "党支部", "value": 166872 }
			],
		}
	},
	methods: {
		initFunnel () {
			let total = 0;
			this.orgCls1 && this.orgCls1.forEach((n, i) => {
				total += n.value;
				if (n.name === '党委') {
					this.funnelData[0] = { name: '党委', value: 30, count: n.value }
				} else if (n.name === '党总支') {
					this.funnelData[1] = { name: '党总支', value: 60, count: n.value }
				} else {
					this.funnelData[2] = { name: '党支部', value: 90, count: n.value }
				}
			})
			if (this.funnelData.length) {
				this.funnelData[0].total = total;
				this.funnelData[1].total = total;
				this.funnelData[2].total = total;
			}
			this.chartOption.series[0].data = this.funnelData || [];
		}
	},
	components: {
		charts
	},
	mounted () {
		this.initFunnel();
	}
}
</script>
<style>
.redrcd-charts { height: 500px; width: 500px;  }
</style>