<template>
	<div class="bar-chart" ref="barChart" style="height: 400px"></div>
</template>

<script>

export default {
	name: '',
	props: {
		title: {
			type: String,
			// default: '近6个月客户增量图'
		},
		datasetProps: {
			type: Object,
			required: true,
		},
	},
	data() {
		return {
			options: {
				legend: {
					name: [],
					left: 'right',
				},
				tooltip: {},
				title: {
					text: this.title,
				},
				color: ['#5470c6', '#9a60b4', '#ea7ccc'],
				textStyle: {
					fontSize: 12,
				},
				xAxis: {
					type: 'category',
					data: [],
					// /* x轴文字 */
					axisLabel: {
						show: true,
						rotate: '40', //字体倾斜
						textStyle: {
							color: '#999', //更改坐标轴文字颜色
							fontSize: 12, //更改坐标轴文字大小
						},
					},
				},
				yAxis: {
					type: 'value',
					minInterval:1,
				},
				series: [],
			},
		};
	},
	methods: {
		drawChart() {
			const chart = this.$refs.barChart;
			if (chart) {
				const myChart = echarts.init(chart);
				const option = this.options;
				/* 设置x轴 */
				option.xAxis.data = this.datasetProps.Date;

				/* 取到key */
				const key_arr = Object.keys(this.datasetProps);
				const filterKey = key_arr.filter((item) => {
					return item !== 'Date' && item!=='Title';
				});
				/* 遍历设置列 */
				const seriesArr = [];
				filterKey.forEach((item) => {
					let obj = {
						data: this.datasetProps[item],
						type: 'bar',
						name:
							item === 'NewCompanyTotal'
								? '新签客户'
								: item === 'RenewalCompanyTotal'
								? '续约客户'
								: item === 'NotRenewalCompanyTotal'
								? '未续约客户'
								: item === 'CompanyTotal'
								? '客户数'
								: '',
					};
					seriesArr.push(obj);
				});
				option.series = seriesArr;

				myChart.setOption(option);
				window.addEventListener('resize', function () {
					myChart.resize();
				});
			}
			this.$on('hook:destroyed', () => {
				window.removeEventListener('resize', function () {
					myChart.resize();
				});
			});
		},
	},
	created() {},
	mounted() {
		this.$nextTick(() => {
			this.drawChart();
		});
	},
};
</script>
<style lang="" scoped></style>
