<template>
  <view class="content">
    <uniChart :option="person.option" />
  </view>
</template>

<script setup>
import { reactive, shallowRef, onMounted, nextTick } from 'vue'
import * as echarts from "@/components/uniapp-echarts/static/echarts.min.js";
import uniChart from "@/components/uniapp-echarts/components/uni-chart/uni-chart.vue";

const props = defineProps({
    id: {
        type: String,
        required: true
    },
    datas:{
        type: Array,
        required: true
    },
	studentName:{
		type: String,
		required: true
	}
})
let person=reactive({
	userScore:[],
	userAvgScore:[],
	xTime:[], // x轴数据
	max: 0, // 最大数值
    option: {}
})

onMounted(()=>{
    load()
    GetEchar()
})
const load=()=>{
    // 指定配置项和数据
    person.userScore = props.datas.map(f => { return f.Score })
    person.userAvgScore = props.datas.map(f => { return f.AvgScore })
    person.xTime = props.datas.map(f => { return f.Name })
	person.max = Math.max.apply(null,props.datas.map(f => { return f.TotalScore }));
}

const GetEchar = () => {
	person.option = {
	  tooltip: {
		show: false,
		trigger: 'axis',
		formatter: function (params) {
		  return params[0].name+'\n'
		  +person.option.legend.data[0].name+'：'+person.userScore[params[0].dataIndex]+'分\n'
		  +person.option.legend.data[1].name+'：'+person.userAvgScore[params[0].dataIndex]+'分'
		}
	  },
	  legend: {
		data: [
		  { name: '学生/'+props.studentName },
		  { name: '年级平均' }
		],
		icon: 'circle',
		y: 'bottom',
		itemWidth: 20, //宽度
		itemHeight: 20, //高度
		itemGap: 30, //间距
		textStyle: {
		  color: '#333',
		  fontSize: 40
		}
	  },
	  grid: {
		top: '3%',
		left: '3%',
		right: '5%',
		bottom: '10%',
		containLabel: true
	  },
	  xAxis: [
		{
		  type: 'category',
		  axisTick: {
			show:false
		  },
		  axisLine: {
			onZero: false,
			lineStyle: {
			  color: '#2A2A2A',
			  width: 4
			}
		  },
		  axisLabel: {
			//坐标轴刻度标签的相关设置。
			textStyle: {
			  color: '#6F6F70',
			  fontSize: 40
			},
			formatter: function (params) {
			  return params;
			}
		  },
		  data: person.xTime
		}
	  ],
	  yAxis: [
		{
		  type: 'value',
		  axisTick: {
			show:false
		  },
		  axisLine: {
			show:false
		  },
		  max: person.max,
		  min: 0,
		  // y轴文字颜色
		  axisLabel: {
			textStyle: {
			  color: '#6F6F70',
			  fontSize: 40
			}
		  },
		  splitLine: {
			show: true,
			lineStyle: {
			  color: ['#5E5E5E'],
			  width: 2,
			  type: 'dashed'
			}
		  }
		}
	  ],
	  series: [
		{
		  name: '学生/'+props.studentName,
		  type: 'line',
		  symbol: 'circle', //拐点样式
		  symbolSize: 8, //拐点大小
		  // 折线拐点的样式
		  itemStyle: {
			normal: {
			  // 静止时：
			  color: '#6B86FF',
			  borderColor: '#6B86FF', //拐点的边框颜色
			  borderWidth: 4
			},
			emphasis: {
			  // 鼠标经过时：
			  color: '#fff'
			}
		  },
		  data: person.userScore
		},
		{
		  name: '年级平均',
		  type: 'line',
		  symbol: 'circle', //拐点样式
		  symbolSize: 8, //拐点大小
		  // 折线拐点的样式
		  itemStyle: {
			normal: {
			  // 静止时：
			  color: '#FFA755',
			  borderColor: '#FFA755', //拐点的边框颜色
			  borderWidth: 4
			},
			emphasis: {
			  // 鼠标经过时：
			  color: '#fff'
			}
		  },
		  data: person.userAvgScore
		}
	  ]
	};
}
</script>
<style>
.content {
    width: 98%;
    height: 260px;
}
</style>