<template>
	<view class="zhuti">
		<view class="futi">
			<view class="saleTian">上报线下销售数据</view>
			<view style="margin: 20px 0 10px 0;">线下销售数据</view>
			<view class="cardMu">
				<view class="cardOne">
					<view class="">
						今日销售金额
					</view>
					<view class="num">18264.00</view>
					<view>同比昨日上升1000</view>
				</view>
				<view class="cardOne">
					<view class="">
						今日销售金额
					</view>
					<view class="num">18264.00</view>
					<view>同比昨日上升1000</view>
				</view>
			</view>
			<view style="margin: 20px 0 10px 0;">营业额趋势</view>
			<view  style="height: 300px;width: 100%;">
				<qiun-data-charts 
				      type="line"
				      :opts="opts"
				      :chartData="chartData"
				    />
			</view>
			<view style="margin: 20px 0 10px 0;">销量排名</view>
			<view  style="height: 300px;width: 100%;">
			<qiun-data-charts 
			      type="bar"
			      :opts="opts1"
			      :chartData="chartData1"
			    />
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
 chart: null,
 chartData: {},
       opts: {
         color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
         padding: [15,10,0,15],
         enableScroll: false,
         legend: {},
         xAxis: {
           disableGrid: true
         },
         yAxis: {
           gridType: "dash",
           dashLength: 2
         },
         extra: {
           line: {
             type: "straight",
             width: 2,
             activeType: "hollow"
           }
         }
       },
	    chartData1:{},
	         opts1: {
	           color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
	           padding: [15,30,0,5],
	           enableScroll: false,
	           legend: {},
	           xAxis: {
	             boundaryGap: "justify",
	             disableGrid: false,
	             min: 0,
	             axisLine: false,
	             max: 70
	           },
	           yAxis: {},
	           extra: {
	             bar: {
	               type: "stack",
	               width: 30,
	               meterBorde: 1,
	               meterFillColor: "#FFFFFF",
	               activeBgColor: "#000000",
	               activeBgOpacity: 0.08,
	               categoryGap: 2
	             }
	           }
	         }
			}
		},
		 onReady() {
		    this.getServerData();
		  },
		mounted() {
	
		},
		methods: {
			getServerData() {
			      //模拟从服务器获取数据时的延时
			      setTimeout(() => {
			        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
			        let res = {
			            categories: ["2018","2019","2020","2021","2022","2023"],
			            series: [
			              {
			                name: "成交量A",
			                data: [35,8,25,37,4,20]
			              },
			              {
			                name: "成交量B",
			                data: [70,40,65,100,44,68]
			              },
			              {
			                name: "成交量C",
			                data: [100,80,95,150,112,132]
			              }
			            ]
			          };
			        this.chartData = JSON.parse(JSON.stringify(res));
			      }, 500);
				  
				    setTimeout(() => {
				          //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				          let res = {
				              categories: ["2018","2019","2020","2021","2022","2023"],
				              series: [
				                {
				                  name: "目标值",
				                  data: [35,36,31,33,13,34]
				                },
				                {
				                  name: "完成量",
				                  data: [18,27,21,24,6,28]
				                }
				              ]
				            };
				          this.chartData1 = JSON.parse(JSON.stringify(res));
				        }, 500);
			    }

		}
	}
</script>

<style lang="scss" scoped>
	@import 'salesReporting.scss';
</style>