<template>
	<view class="charts-box-line">
		 <qiun-data-charts 
		      type="line"
		      :opts="opts"
			  :canvasId="canId" 
			   :canvas2d="true"
			   :ontouch='true'
		      :chartData="chartData"
		    />
	</view>
</template>

<script>
	import {
		ref,
		reactive,
		toRefs,
		toRef,
		getCurrentInstance,
		watch,
		computed,
		onMounted,
	} from "vue";
	export default {
		props: ['ScoreList'],
		setup(props) {
			let data = reactive({
			  chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
				  enableScroll:true,
				  color: ["#E53F4E","#FCE3D4"],
				  padding: [15,10,0,15],
				  legend: {
				  	show: true,
				  	position: "top",
				  	lineHeight: 25,
				  	fontColor:"#282828",
				  	itemGap:30
				  },
				  dataLabel:false,
				  dataPointShape:false,
				  xAxis: {
					disableGrid: false,
					gridType:'dash',
					gridColor:'#F0F0F0',
					scrollShow:true,
					itemCount:6
				  },
				  yAxis: {
					gridType: "dash",
					dashLength: 2,
					disableGrid: true
				  },
				  extra: {
					line: {
					  type: "curve",
					  width: 2
					}
				  }
				}
			})
			let methods = {
				randomCoding(){
				    var arr = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
				    var idvalue ='';
				    let n = 8;
					for(let i=0; i<n; i++){
						idvalue+=arr[Math.floor(Math.random()*26)];
					}
				    return idvalue;
				},
				getServerData() {
				      //模拟从服务器获取数据时的延时
					  let myscore=[]
					  let avgScore=[]
					  let xlable=[]
					  props.ScoreList.forEach((x,i)=>{
						  myscore.push(x.Score)
						  avgScore.push(x.AvgScore)
						  xlable.push('第'+(i+1)+'次')
					  })
				        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				        let res = {
				            categories: xlable,
				            series: [
				              {
				                name: "个人得分",
				                data: myscore,
								legendShape:'circle'
				              },
				              {
				                name: "平均得分",
				                data: avgScore,
								legendShape:'circle'
				              }
				            ]
				          };
				        this.chartData = JSON.parse(JSON.stringify(res));
				    },
			}
			data.canId=methods.randomCoding()
			onMounted(() => {
				methods.getServerData()
			})
			return {
				...toRefs(data),
				...methods
			};
		},
		onReady() {
		    this.getServerData();
		},
	};
</script>

<style scoped>
	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	/* .charts-box-line {
		width: 100%;
		height: 555rpx;
		background-image: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653559819000_509.png');
		background-position: 0px -57rpx;
		background-repeat: no-repeat;
		background-size: 100% auto;
	} */
</style>
