<template>
	<div class="homeMain">
		<el-row>
			<el-col :span="8">
				<div id="myChart1" :style="{width: '500px', height: '300px'}"></div>
			</el-col>
			<el-col :span="8">
				<div id="myChart2" :style="{width: '500px', height: '300px'}"></div>
			</el-col>
		</el-row>


		<el-row>
			<el-col :span="8">
				<div id="myChart3" :style="{width: '500px', height: '300px'}"></div>
			</el-col>
			<el-col :span="8">
				<div id="myChart4" :style="{width: '500px', height: '300px'}"></div>
			</el-col>
		</el-row>


	</div>
</template>
<script>
	export default {
		data() {
			return {

			}
		},
		mounted() {
			this.drawLine1()
			this.drawLine2()
			this.drawLine3()
			this.drawLine4()
			//this.clearInterval()
		},
		methods: {
			drawLine1() {
				let myChart1 = this.$echarts.init(document.getElementById('myChart1'), 'default')
				myChart1.setOption({
					title: {
						text: '年度总收入',
						// subtext: '纯属虚构'
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['库存费用']
					},
					// toolbox: {
					// 	show: true,
					// 	feature: {
					// 		mark: {
					// 			show: true
					// 		},
					// 		dataView: {
					// 			show: true,
					// 			readOnly: false
					// 		},
					// 		magicType: {
					// 			show: true,
					// 			type: ['line', 'bar']
					// 		},
					// 		restore: {
					// 			show: true
					// 		},
					// 		saveAsImage: {
					// 			show: true
					// 		}
					// 	}
					// },
					calculable: true,
					xAxis: [{
						type: 'category',
						boundaryGap: false,
						data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
					}],
					yAxis: [{
						type: 'value',
						axisLabel: {
							formatter: '{value}'
						}
					}],
					series: [{
							name: '收入',
							type: 'line',
							data: [11, 11, 15, 13, 12, 13, 10, 8, 16, 15, 12, 14],
							markPoint: {
								data: [{
										type: 'max',
										name: '最大值'
									},
									{
										type: 'min',
										name: '最小值'
									}
								]
							},
							markLine: {
								data: [{
									type: 'average',
									name: '平均值'
								}]
							}
						},

					]
				});
			},


			drawLine2() {
				let myChart2 = this.$echarts.init(document.getElementById('myChart2'), 'default')
				myChart2.setOption({

					title: {
						text: '当前库存',
						subtext: ' ',
						x: 'center'
					},
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					// legend: {
					// 	orient: 'vertical',
					// 	x: 'left',
					// 	data: ['钢板', '钢卷', '螺纹', '盘螺']
					// },
					toolbox: {
						show: true,
						feature: {
							mark: {
								show: true
							},
							dataView: {
								show: true,
								readOnly: false
							},
							magicType: {
								show: true,
								type: ['pie', 'funnel'],
								option: {
									funnel: {
										x: '25%',
										width: '50%',
										funnelAlign: 'left',
										max: 1548
									}
								}
							},
							restore: {
								show: true
							},
							saveAsImage: {
								show: true
							}
						}
					},
					calculable: true,
					series: [{
						name: '访问来源',
						type: 'pie',
						radius: '55%',
						center: ['50%', '60%'],
						data: [{
								value: 335,
								name: '钢板'
							},
							{
								value: 310,
								name: '钢卷'
							},
							{
								value: 234,
								name: '螺纹'
							},
							{
								value: 135,
								name: '盘螺'
							}
						]
					}]


				});
			},
			drawLine3() {
				let myChart3 = this.$echarts.init(document.getElementById('myChart3'), 'default')
				myChart3.setOption({
					title: {
						text: '年入库量和出库量',
						subtext: ''
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['入库量', '出库量']
					},
					toolbox: {
						show: true,
						feature: {
							mark: {
								show: true
							},
							dataView: {
								show: true,
								readOnly: false
							},
							magicType: {
								show: true,
								type: ['line', 'bar']
							},
							restore: {
								show: true
							},
							saveAsImage: {
								show: true
							}
						}
					},
					calculable: true,
					xAxis: [{
						type: 'category',
						data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
					}],
					yAxis: [{
						type: 'value'
					}],
					series: [{
							name: '入库量',
							type: 'bar',
							data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
							markPoint: {
								data: [{
										type: 'max',
										name: '最大值'
									},
									{
										type: 'min',
										name: '最小值'
									}
								]
							},
							markLine: {
								data: [{
									type: 'average',
									name: '平均值'
								}]
							}
						},
						{
							name: '出库量',
							type: 'bar',
							data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
							markPoint: {
								data: [{
										name: '年最高',
										value: 182.2,
										xAxis: 7,
										yAxis: 183,
										symbolSize: 18
									},
									{
										name: '年最低',
										value: 2.3,
										xAxis: 11,
										yAxis: 3
									}
								]
							},
							markLine: {
								data: [{
									type: 'average',
									name: '平均值'
								}]
							}
						}
					]

				});
			},




			drawLine4() {
				let myChart4 = this.$echarts.init(document.getElementById('myChart4'), 'default')
				myChart4.setOption({

					tooltip: {
						formatter: "{a} <br/>{b} : {c}%"
					},
					toolbox: {
						show: true,
						feature: {
							mark: {
								show: true
							},
							restore: {
								show: true
							},
							saveAsImage: {
								show: true
							}
						}
					},
					series: [{
						name: '业务指标',
						type: 'gauge',
						detail: {
							formatter: '{value}%'
						},
						data: [{
							value: 50,
							name: '库存占用率'
						}]
					}]

				});
			},



		}
	}
</script>
<style>
	.homeMain {
		margin: 50px;
	}
</style>
