<template>
	<view class="hole-page">
		<view class="ex-chart">
			<l-echart ref="chart" @finished='init'></l-echart>
		</view>
	</view>
</template>

<script>
	import * as echarts from 'echarts'
	import { LineChart } from 'echarts/charts'
	echarts.use([
		LineChart
	])
	export default {
		data() {
			return {
				option: {},
				score: 65
			}
		},
		methods: {
			async init () {
				const chart = await this.$refs.chart.init(echarts)
				chart.setOption(this.option)
			},
			setOp () {
				let that = this
				that.option = {
					title: [
						{
							text: that.score,
							x: 'center',
							y: '35%',
							textStyle: {
							    fontWeight: 'normal',
							    color: that.score >= 60 ? '#0297FC' : '#E53E30',
							    fontSize: '50',
								fontWeight: 'bold'
							}
						},
					    {
							text: `考试得分`,
							x: 'center',
							y: '55%',
							textStyle: {
							    fontWeight: 'normal',
							    color: '#000',
							    fontSize: '20'
							}
						}
					],
					series: [{
					    name: 'Line 1',
					    type: 'pie',
						startAngle: 90,
					    clockwise: false,
					    radius: ['60%', '66%'],
						labelLine: {
							show: false
						},
					    data: [{
					        value: that.score,
					        itemStyle: {
					            color: {
									colorStops: [{
									    offset: 0,
									    color: that.score >= 60 ? '#5decfc' : '#FFCC40' // 0% 处的颜色
									}, {
									    offset: 1,
									    color: that.score >= 60 ? '#1e92dc' : '#E53E30' // 100% 处的颜色
									}]
								}
					        }
					    }, {
					        value: 100 - that.score,
							itemStyle: {
								color: '#fff'
							}
					    }]
					}]
				}
			}
		},
		onShow() {
			this.setOp()
		}
	}
</script>

<style lang="scss">
	.hole-page{
		width: 100vw;
		height: 100vh;
		background-color: #f7fbfe;
		.ex-chart{
			box-sizing: border-box;
			padding: 3vw;
			background-color: #fff;
			width: 80%;
			margin: 5vh auto;
		}
	}
</style>
