<template>
	<view class="">
		<view class="charts" ref="chartRef" id="main">

		</view>

	</view>
</template>

<script>
	import * as echarts from 'echarts';
	export default {
		data() {
			return {}
		},
		props: {
			tochild: Number
		},
		created() {},
		methods: {
			//画图方法
			renderChart() {
				// 基于准备好的dom，初始化echarts实例
				let myChart = echarts.init(document.getElementById('main'));
				// 绘制图表
				let option = {
					title: {
						// text: 'Stacked Line'
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['订单笔数', '订单金额', '退货单数', '退货金额']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					dataZoom: [{
							type: "slider", //slider表示有滑动块的，
							show: true,
							xAxisIndex: [0], //表示x轴折叠
							start: 1, //数据窗口范围的起始百分比,表示1%
							end: 35, //数据窗口范围的结束百分比,表示35%坐标
							bottom: "20",
						},

					],



					//x轴
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ["1日", "2日", "3日", "4日", "5日", "6日", "7日", "8日", "9日", "10日", "11日", "12日", "13日", "14日",
							"15日", "16日", "17日", "18日", "19日", "20日", "21日", "22日", "23日", "24日", "25日", "26日",
							"27日", "28日", "29日", "30日", "31日"
						]
					},
					//y轴
					yAxis: [{
							type: 'value',
							name: '单数',
							min: 0,
							max: 5,
							interval: 1,
							splitNumber: 6, //设置坐标轴的分割段数
						},
						{
							type: 'value',
							name: '金额',
							min: 0,
							max: 200,
							interval: 25,
							splitNumber: 6, //设置坐标轴的分割段数
						}
					],
					series: [{
							name: '订单笔数',
							type: 'bar',
							stack: 'Total',
							yAxisIndex: 0,
							data: [15, 45, 15, 45, 15, 45, 15, 45, 15, 45, 15, 45, 15, 45, 15, 45, 15, 45, 15, 45,
								15, 45, 15, 45, 15, 45, 15, 45, 15, 45, 15
							]
						},
						{
							name: '订单金额',
							type: 'line',
							stack: 'Total',
							yAxisIndex: 1,
							data: [80, 90, 55, 85, 55, 85, 55, 85, 55, 85, 55, 85, 55, 85, 55, 85, 55, 85, 55, 85,
								55, 85, 55, 85, 55, 85, 55, 85, 55, 85, 17
							]
						},
						{
							name: '退货单数',
							type: 'bar',
							stack: 'Total',
							yAxisIndex: 0,
							data: [95, 12, 95, 125, 95, 125, 95, 125, 95, 125, 95, 125, 95, 125, 95, 125, 95, 125,
								95, 125, 95, 125, 95, 125, 95, 125, 95, 125, 95, 125, 19
							]
						},
						{
							name: '退货金额',
							type: 'line',
							stack: 'Total',
							yAxisIndex: 1,
							data: [80, 90, 95, 125, 115, 125, 90, 25, 95, 125, 115, 125, 90, 25, 95, 125, 115, 125,
								90, 25, 95, 125, 115, 125, 90, 25, 95, 125, 115, 125, 24
							]
						}
					]
				};
				myChart.setOption(option);
			}
		},
		mounted() {
			this.renderChart()
		}
	}
</script>

<style lang="scss">
	.charts {
		width: 100%;
		height: 600rpx;
		// margin-top: 80rpx;
	}
</style>
