pull/4/head
parent
bbf7cc3692
commit
d76bff73ae
@ -0,0 +1,119 @@ |
||||
<template> |
||||
<view> |
||||
<u-navbar title="本次成绩" @rightClick="rightClick" :autoBack="true"></u-navbar> |
||||
<view style="margin-top: 100px;" class="p14 wp100"> |
||||
<GradesChart color="#FF6E02" titleName="32分" :actualValue="0.32" /> |
||||
<view class="top_box flex jc-c" style="flex-direction: column;"> |
||||
<view class="wp100 text-center" style="margin-top: -153rpx;"> |
||||
<text>太棒了！正确率很高了！</text> |
||||
<button class="centerBtn">马上提分</button> |
||||
<view class="flex ai-c jc-c mt10"> |
||||
<view class="text-center wp33"> |
||||
<view>99</view> |
||||
<text>未做题</text> |
||||
</view> |
||||
<view class="text-center wp33"> |
||||
<view>12</view> |
||||
<text>看错题</text> |
||||
</view> |
||||
<view class="text-center wp33 flex jc-c ai-c" style="flex-direction: column;"> |
||||
<u-icon name="edit-pen" size="28"></u-icon> |
||||
<text>重新考试</text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="p14"> |
||||
<view class="bc-fff p14" style="border-radius: 20rpx;"> |
||||
<view class="flex ai-c jc-sb"> |
||||
<text class="fs18 cor-000 fw600">考试情况</text> |
||||
</view> |
||||
<view class="charts-box"> |
||||
<qiun-data-charts type="line" :opts="opts" :chartData="chartData" /> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import GradesChart from "./components/GradesChart.vue" |
||||
export default { |
||||
components: { |
||||
GradesChart |
||||
}, |
||||
data() { |
||||
return { |
||||
chartData: {}, |
||||
//您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。 |
||||
opts: { |
||||
color: ["#FAC858"], |
||||
padding: [15, 10, 0, 15], |
||||
enableScroll: false, |
||||
legend: {}, |
||||
xAxis: { |
||||
disableGrid: true |
||||
}, |
||||
yAxis: { |
||||
gridType: "dash", |
||||
dashLength: 2 |
||||
}, |
||||
extra: { |
||||
line: { |
||||
type: "straight", |
||||
width: 2, |
||||
activeType: "hollow" |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
}, |
||||
onReady() { |
||||
this.getServerData(); |
||||
}, |
||||
methods: { |
||||
getServerData() { |
||||
//模拟从服务器获取数据时的延时 |
||||
setTimeout(() => { |
||||
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接 |
||||
let res = { |
||||
categories: [], |
||||
series: [{ |
||||
data: [32] |
||||
}, |
||||
] |
||||
}; |
||||
this.chartData = JSON.parse(JSON.stringify(res)); |
||||
}, 500); |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.top_box { |
||||
padding: 15px; |
||||
background-color: #fdfdfd; |
||||
border-radius: 20rpx; |
||||
} |
||||
|
||||
.centerBtn { |
||||
width: 349rpx; |
||||
height: 76rpx; |
||||
background: #DEEFE5; |
||||
border-radius: 38rpx; |
||||
line-height: 76rpx; |
||||
text-align: center; |
||||
color: #00B74F; |
||||
margin-top: 10px |
||||
} |
||||
|
||||
.charts-box { |
||||
width: 100%; |
||||
height: 346rpx; |
||||
background-color: #fdfdfd; |
||||
border-radius: 20rpx; |
||||
ppadding-top: 20rpx; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue