183 lines
3.4 KiB
Vue
183 lines
3.4 KiB
Vue
<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> |