105 lines
2.0 KiB
Vue
105 lines
2.0 KiB
Vue
<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>
|