front-end/admin-update/src/components/echarts/trend.vue

<template>
	<e-charts :options="options"></e-charts>
</template>

<script>
import ECharts from 'vue-echarts';
import 'echarts/lib/chart/line';

export default {
	name: 'echart',
	components: {
		ECharts
	},
	props: {
		chartData: {
			type: Object
		}
	},
	data() {
		return {
			chart: null,
			options: {
				// tooltip: {
				// 	trigger: 'axis'
				// },
				// grid: {
				// 	left: '3%',
				// 	right: '3%',
				// 	top: '30',
				// 	bottom: '0',
				// 	containLabel: true
				// },
				// xAxis: [
				// 	{
				// 		type: 'category',
				// 		data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
				// 		axisLine: {
				// 			lineStyle: {
				// 				color: '#999'
				// 			}
				// 		}
				// 	}
				// ],
				// yAxis: [
				// 	{
				// 		type: 'value',
				// 		splitNumber: 4,
				// 		splitLine: {
				// 			lineStyle: {
				// 				type: 'dashed',
				// 				color: '#DDD'
				// 			}
				// 		},
				// 		axisLine: {
				// 			show: false,
				// 			lineStyle: {
				// 				color: '#333'
				// 			}
				// 		},
				// 		nameTextStyle: {
				// 			color: '#999'
				// 		},
				// 		splitArea: {
				// 			show: false
				// 		}
				// 	}
				// ],
				// series: [
				// 	{
				// 		name: '统计',
				// 		type: 'line',
				// 		data: [820, 932, 901, 934, 1290, 1330, 1320],
				// 		lineStyle: {
				// 			normal: {
				// 				width: 8,
				// 				color: {
				// 					type: 'linear',
				// 					colorStops: [
				// 						{
				// 							offset: 0,
				// 							color: '#A9F387'
				// 						},
				// 						{
				// 							offset: 1,
				// 							color: '#48D8BF'
				// 						}
				// 					],
				// 					globalCoord: false
				// 				},
				// 				shadowColor: 'rgba(72,216,191, 0.3)',
				// 				shadowBlur: 10,
				// 				shadowOffsetY: 20
				// 			}
				// 		},
				// 		itemStyle: {
				// 			normal: {
				// 				color: '#fff',
				// 				borderWidth: 10,
				// 				borderColor: '#A9F387'
				// 			}
				// 		},
				// 		smooth: true
				// 	}
				// ]
			}
		};
	},
	watch: {
		chartData: {
			deep: true,
			handler: function(val) {
				if (!this.chart) {
					return false;
				}
				// let chartData = JSON.parse(JSON.stringify(val));
				this.initChart();
				// this.setOptions(chartData);
			}
		}
	},
	methods: {
		initChart() {
			// this.chart = echarts.init(this.$el, 'macarons')
			this.chart = true;
			if (this.$util.isEmpty(this.chartData)) return false;
			let chartData = JSON.parse(JSON.stringify(this.chartData));
			let nameData = [];
			let numData = [];
			for (let i in chartData) {
				nameData.push(i);
				numData.push(chartData[i]);
			}
			this.setOptions({ nameData: nameData, numData: numData });
		},
		setOptions(data) {
			this.options = {
				tooltip: {
					trigger: 'axis'
				},
				grid: {
					left: '3%',
					right: '3%',
					top: '30',
					bottom: '0',
					containLabel: true
				},
				xAxis: [
					{
						type: 'category',
						data: data.nameData,
						axisLine: {
							lineStyle: {
								color: '#999'
							}
						}
					}
				],
				yAxis: [
					{
						type: 'value',
						splitNumber: 4,
						splitLine: {
							lineStyle: {
								type: 'dashed',
								color: '#DDD'
							}
						},
						axisLine: {
							show: false,
							lineStyle: {
								color: '#333'
							}
						},
						nameTextStyle: {
							color: '#999'
						},
						splitArea: {
							show: false
						}
					}
				],
				series: [
					{
						name: '统计',
						type: 'line',
						data: data.numData,
						lineStyle: {
							normal: {
								width: 8,
								color: {
									type: 'linear',

									colorStops: [
										{
											offset: 0,
											color: '#A9F387'
										},
										{
											offset: 1,
											color: '#48D8BF'
										}
									],
									globalCoord: false
								},
								shadowColor: 'rgba(72,216,191, 0.3)',
								shadowBlur: 10,
								shadowOffsetY: 20
							}
						},
						itemStyle: {
							normal: {
								color: '#fff',
								borderWidth: 10,
								borderColor: '#A9F387'
							}
						},
						smooth: true
					}
				]
			};
		}
	}
};
</script>

<style lang="stylus" scoped>
.echarts {
	width: 100%;
}
</style>