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

<script>

export default {
	name: '',
	components: {},
	props: {
		title: {
			type: String,
			// default: '近6个月收入统计图',
		},
		datasetProps: {
			type: Object,
		},
	},
	data() {
		return {
			options: {
				title: {
					text: this.title,
				},
				legend: {
					name: '',
					left: 'right',
				},
				tooltip: {},
				grid: {
					// top:'10%',//距上边距
					left: '1%', //距离左边距
					right: '2%', //距离右边距
					containLabel: true,
				},
				color: ['#fc8452', '#9a60b4', '#ea7ccc'],
				textStyle: {
					fontSize: 12,
				},
				xAxis: [
					{
						type: 'category',
						data: [],
						// x轴线
						axisLine: {
							show: true,
							linStyle: {
								color: '#999',
								width: 1,
								type: 'solid',
							},
						},
						axisTick: {
							alignWithLabel: true,
						},
						/* x轴文字 */
						axisLabel: {
							show: true,
							textStyle: {
								color: '#999', //更改坐标轴文字颜色
								fontSize: 12, //更改坐标轴文字大小
							},
						},
					},
				],
				yAxis: [
					{
						yAxisIndex: 0,
						type: 'value',
						name: '合同数',
						minInterval:1,
						nameTextStyle: {
							color: '#999',
						},
						// y轴线
						axisLine: {
							show: false
						},
						//y轴刻度
						axisTick: {
							show: false,
						},
						splitLine:{
   							show:false     //去掉网格线
						}
					},
					{
						yAxisIndex: 1,
						type: 'value',
						name: '合同金额/元',
						minInterval:1,
						nameTextStyle: {
							color: '#999',
						},
						// y轴线
						axisLine: {
							show: false,
						},
						//y轴刻度
						axisTick: {
							show: false,
						},
						splitLine:{
   							show:false     //去掉网格线
						}
					},
				],
				series: [
					{
						data: [],
						type: 'line',
						name: '合同数',
						yAxisIndex: 0,
						//折线颜色
						lineStyle: {
							color: '#CD5C5C', //线条渐变色
						},
					},
					{
						name: '',
						type: 'line',
						name: '合同金额',
						yAxisIndex: 1,
						itemStyle: {
							normal: {
								color: '#25DEDB', //折线点的颜色
								lineStyle: {
									color: '#25DEDB', //折线的颜色
								},
							},
						},
						data: [],
					},
				],
			},
		};
	},
	methods: {
		drawChart() {
			const chart = this.$refs.lineChart;
			if (chart) {
				const myChart = echarts.init(chart);
				const option = this.options;
				/* 设置x轴 */
				option.xAxis[0].data = this.datasetProps.Date;
				/* 设置y轴 */
				option.series[0].data = this.datasetProps.ContractTotal;
				option.series[1].data = this.datasetProps.MoneyTotal;

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