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

<script>
	import {
		ref,
		reactive,
		toRefs,
		toRef,
		getCurrentInstance,
		watch,
		computed,
		onMounted,
	} from "vue";
	export default {
		props: {
			DifficultyList:[]
		},
		setup(props) {
			let data = reactive({
				chartData: {},
				opts: {
					color: ["#E53F4E", "#282828"],
					padding: [0, 40, 6, 40],
					legend: {
						show: true,
						position: "top",
						lineHeight: 25,
						fontColor:"#282828",
						itemGap:30
					},
					xAxis: {
						disableGrid: true,
						axisLine:false,
						fontColor:"#CE8086"
					},
					yAxis: {
						disableGrid: true,
						gridColor:"#FFF",
						data: [{
							title:"",
							min: 0,
							max:50,
							position:'left',
							axisLine:false,
							fontColor:'#CE8086'
						},{
							min: 0,
							max:100,
							title:"",
							position:'right',
							axisLine:false,
							fontColor:'#CE8086'
						}]
					},
					extra: {
						mix:{
							column: {
								width: 30,
								barBorderCircle: true
							}
						}
					}
				}
			})
			let methods = {
				getServerData() {
					//模拟从服务器获取数据时的延时
					setTimeout(() => {
						//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
						let cate =[];
						let serNum =[];
						let serScore=[];
						props.DifficultyList.forEach(item=>{
							cate.push(item.Difficulty);
							serNum.push(item.Count);
							serScore.push(item.Score);
						});
						let res = {
							categories: cate,
							series: [{
									name: "题目数量",
									data: serNum,
									textColor:"#CE8086",
									type: "column",
									index:0,
									
								},
								{
									name: "题目分数",
									type: "line",
									color: "#282828",
									textColor:"#282828",
									index:1,
									data: serScore,
									textOffset:-20
								  }
							]
						};
						data.chartData = JSON.parse(JSON.stringify(res));
					}, 500);
				}
			}
			onMounted(() => {
				methods.getServerData()
			})
			return {
				...toRefs(data),
				...methods
			};
		},
	};
</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>
