<!-- 统计图1 -->
<template>
	<div class="echarts-div" id="bar-chart" ref="bar-chart" style="height: 220px;"></div>
</template>

<script>
module.exports = {
	props: {
		chartData: {
			type: Array,
			required: true
		},
		type: {
			type: String,
			default: 'bar'
		}
	},
	data() {
		return {};
	},
	watch: {
		chartData: {
			deep: true,
			handler(val) {
				this.setOptions(val);
			}
		},
		type: {
			deep: true,
			handler(val) {
				this.setOptions(this.chartData);
			}
		}
	},
	created() {
		// 刷新所有图标数据
		this.$nextTick(() => {
			this.setOptions(this.chartData);
		});
	},
	methods: {
		// 刷新柱状图
		setOptions: function (chartData) {
			let xAxisData = [];
			let seriesData = [];
			if (chartData) {
				chartData.forEach((item, index) => {
					xAxisData.push(item.name + '月份');
					seriesData.push(item.value);
				});
			}
			//开始渲染
			var ele = this.$refs['bar-chart'];
			var myChart = echarts.init(ele);
			var option = {
				color: ['rgba(37, 97, 239, 1)'],
				tooltip: {
					trigger: 'axis',
					formatter: '{b} 交易额：{c}',
					axisPointer: {
						type: 'shadow'
					}
				},
				grid: { x: 50, y: 30, x2: 25, y2: 25 }, //设置canvas内部表格的内距
				xAxis: [
					{
						type: 'category',
						data: xAxisData,
						axisTick: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: '#e6e6e6'
							}
						},
						axisLabel: {
							show: true,
							textStyle: {
								color: '#545555',
								fontSize: '14'
							}
						}
					}
				],
				yAxis: [
					{
						type: 'value',
						minInterval: 1,
						axisTick: {
							show: false
						},
						splitArea: {
							show: false
						},
						splitLine: {
							lineStyle: {
								color: '#e6e6e6',
								width: 0.7
							}
						},
						axisLine: {
							lineStyle: {
								color: '#e6e6e6'
							}
						},
						axisLabel: {
							textStyle: {
								color: '#545555'
							}
						}
					}
				],
				series: [
					{
						type: this.type,
						barWidth: '40%',
						data: seriesData,
						smooth: true,
						itemStyle: {
							normal: {
								opacity: 1,
								barBorderRadius: [3, 3, 0, 0],
								areaStyle: {
									color: '#8fc3f8'
								},
								label: {
									show: true,
									position: 'top',
									textStyle: {
										color: '#545555',
										fontSize: 14
									}
								}
							}
						}
					}
				]
			};
			myChart.setOption(option);
			window.myChartList.push(myChart);
		}
	}
};
</script>

<style scoped></style>