效果预览
组件代码
<template>
<div class="chart-box">
<div id="report-chart"></div>
<div class="detail">
<ul>
<li v-for="(item,index) in rightData" :key="index">
<i></i>
<span :style="{color:colorArr[index]}" class="t1">{{item.quotaNme}}</span>
<span class="t2">{{item.score}}分</span>
<Poptip placement="top" width="350">
<button type="ghost" class="t3">查看得分详情 >></button>
<div class="tooltips-box" slot="content">
<div class="tooltips-title">{{item.quotaNme}}</div>
<div class="tooltips-list">
<div class="tooltips-item" v-for="(sItem,i) in item.list" :key="i">
<div class="left">
<img src="~@static/images/report-tooltips-icon.png" alt="">
<span>{{sItem.pointName}}</span>
</div>
<div class="right">
<span>{{sItem.score}}</span>
</div>
</div>
</div>
</div>
</Poptip>
</li>
</ul>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
props: {
userId:{
type:String,
default () {
return '';
}
},
planBid:{
type:String,
default () {
return '';
}
}
},
data () {
return {
type: '',
icon: require('@static/images/report-chart-icon.png'),
icon1: require('@static/images/report-chart-icon-1.png'),
icon2: require('@static/images/report-chart-icon-2.png'),
icon3: require('@static/images/report-chart-icon-3.png'),
icon4: require('@static/images/report-chart-icon-4.png'),
icon5: require('@static/images/report-chart-icon-5.png'),
chartData:[],
newIndicator:[],
typeName:[],
type1:[],
type2:[],
type3:[],
colorArr: ['#00C145', '#F1A700', '#00C5C9', '#7867FF', '#00B3FF'],
fullScore:[],
rightData:'',
};
},
watch: {
planBid: {
handler (to) {
this.getData();
},
deep: true
},
},
components: {
},
methods: {
dataInit(){
this.chartData=[];
this.newIndicator=[];
this.typeName=[];
this.type1=[];
this.type2=[];
this.type3=[];
this.fullScore=[];
this.rightData=[];
},
getData () {
let _this = this;
_this.dataInit();
_this.$httpServer.get(_this.$api.GET_EVALUATE_RESULT, {
userId:this.userId,
planBid:this.planBid,
type:'1' //type 统计类型 个人--1 班级 --2 年级---3
}).then(res=>{
_this.chartData = res.data.data;
console.log('getChartData',res,this.chartData);
_this.rightData = res.data.data.type1;
res.data.data.type1.forEach(ele => {
_this.typeName.push(ele.quotaNme);
_this.type1.push(parseFloat(ele.score).toFixed(1) );
_this.fullScore.push(parseFloat(ele.fullScore).toFixed(0));
let str = ele.quotaNme;
if(str.length>8){
str = str.substring(0,8)+'...'
}
let obj = {
name:str,
max:parseFloat(ele.fullScore).toFixed(1)
}
_this.newIndicator.push(obj)
});
res.data.data.type2.forEach(ele => {
_this.type2.push(parseFloat(ele.score).toFixed(1) )
});
res.data.data.type3.forEach(ele => {
_this.type3.push(parseFloat(ele.score).toFixed(1) )
});
console.log(_this.type1,_this.type2,_this.type3,_this.typeName);
this.$forceUpdate();
this.initEcha1();
})
},
initEcha1 () {
let _this = this;
let myChart = echarts.init(document.getElementById('report-chart'));
let i = -1;
var arr = _this.fullScore;
const option = {
backgroundColor: '#FFFFFF',
color: ['#368FFF', '#25B865', '#9E65FF'],
tooltip: {
show: true, // 弹层数据去掉
formatter:function(params){
// console.log(params);
var showHtm="<span>"+params.name+"</span><br>";
var toolData='';
switch (params.name) {
case '个人':
toolData = _this.chartData.type1;
break;
case '班级':
toolData = _this.chartData.type2;
break;
case '年级':
toolData = _this.chartData.type3;
break;
default:
break;
}
for(let i=0;i<toolData.length;i++){
let str = toolData[i].quotaNme;
if(str.length>8){
str = str.substring(0,8)+'...'
}
let name = str;
let score = toolData[i].score;
showHtm+= name+ '：' + score+'分<br>'
}
return showHtm;
}
},
legend: {
icon: 'line',
itemHeight: 5,
// left: '47%',
top: '95%',
show: true,
padding: [3, 5],
// right: '50',
y: '1',
center: 0,
itemWidth: 30,
itemHeight: 10,
itemGap: 26,
z: 3,
// orient: 'horizontal',
data: ['个人', '班级', '年级'],
textStyle: {
fontSize: 12,
},
},
radar: {
center: ['50%', '50%'], // 外圆的位置
radius: '55%',
name: {
textStyle: {
color: '#333333',
fontSize: 16,
fontWeight: 400,
fontFamily: 'PingFangSC-Regular,PingFang SC',
fontStyle: 'normal',
},
formatter: function (params) {
i++
var str = '';
var cTxt = ''
switch (i) {
case 0:
// code
cTxt = '{icon1|} ' + params + '\n{c1|(' + _this.fullScore[i] + '分)}'
break;
case 1:
// code
cTxt = '{icon2|} ' + params + '\n{c2|(' + _this.fullScore[i] + '分)}'
break;
case 2:
// code
cTxt = '{icon3|} ' + params + '\n{c3|(' + _this.fullScore[i] + '分)}'
break;
case 3:
// code
cTxt = '{icon4|} ' + params + '\n{c4|(' + _this.fullScore[i] + '分)}'
break;
case 4:
// code
cTxt = '{icon5|} ' + params + '\n{c5|(' + arr[i] + '分)}'
break;
default:
// code
}
return cTxt;
},
rich: {
icon1: {
width: 18,
height: 18,
align: 'center',
backgroundColor: {
image: _this.icon1
}
},
icon2: {
width: 18,
height: 18,
align: 'center',
backgroundColor: {
image: _this.icon2
}
},
icon3: {
width: 18,
height: 18,
align: 'center',
backgroundColor: {
image: _this.icon3
}
},
icon4: {
width: 18,
height: 18,
align: 'center',
backgroundColor: {
image: _this.icon4
}
},
icon5: {
width: 18,
height: 18,
align: 'center',
backgroundColor: {
image: _this.icon5
}
},
a: {
height: 30,
width: 20,
fontSize: 16,
},
c1: {
height: 30,
width: 20,
fontSize: 16,
align:'center',
color: '#00C145'
},
c2: {
height: 30,
width: 20,
fontSize: 16,
align:'center',
color: '#F1A700'
},
c3: {
height: 30,
width: 20,
fontSize: 16,
align:'center',
color: '#00C5C9'
},
c4: {
height: 30,
width: 20,
fontSize: 16,
align:'center',
color: '#7867FF'
},
c5: {
height: 30,
width: 20,
fontSize: 16,
align:'center',
color: '#00B3FF'
},
},
},
// TODO:
indicator: _this.newIndicator,
splitArea: {
// 坐标轴在 grid 区域中的分隔区域，默认不显示。
show: true,
areaStyle: {
color: ['#C3E6FF', '#ffffff'],
// 图表背景网格的颜色
},
},
axisLine: {
// 指向外圈文本的分隔线样式
lineStyle: {
color: '#eeeeee',
type: 'dashed',
},
},
splitLine: {
lineStyle: {
type: 'solid',
color: '#eeeeee', // 分隔线颜色
width: 1, // 分隔线线宽
},
},
},
series: [
{
type: 'radar',
symbolSize: 5,
data: [
{
// TODO:
value: _this.type1,
name: '个人',
areaStyle: {
normal: {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [
{
offset: 0,
color: 'rgba(46,203,255, 0.14)', // 0% 处的颜色
},
{
offset: 0.15,
color: 'rgba(46,203,255, 0.14)', // 100% 处的颜色
},
{
offset: 0.75,
color: 'rgba(46,203,255, 0.4)', // 100% 处的颜色
},
{
offset: 1,
color: 'rgba(46,203,255, 0.5)', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
},
itemStyle: {
// 折线拐点标志的样式。
normal: {
// 普通状态时的样式
lineStyle: {
width: 1,
},
opacity: 1,
},
emphasis: {
// 高亮时的样式
lineStyle: {
width: 2,
},
},
},
},
{
// TODO:
value: _this.type2,
name: '班级',
// areaStyle: {
// opacity:0,
// },
itemStyle: {
// 折线拐点标志的样式。
normal: {
// 普通状态时的样式
lineStyle: {
width: 1,
},
opacity: 0,
},
emphasis: {
// 高亮时的样式
lineStyle: {
width: 2,
type: 'dashed',
},
},
},
lineStyle: {
normal: {
type: 'dashed',
},
},
},
{
// TODO:
value: _this.type3,
name: '年级',
// areaStyle: {
// color: '#ffffff00',
// },
itemStyle: {
// 折线拐点标志的样式。
normal: {
// 普通状态时的样式
lineStyle: {
width: 1,
},
opacity: 0,
},
emphasis: {
// 高亮时的样式
lineStyle: {
width: 2,
type: 'dashed',
},
opacity: 0,
},
},
lineStyle: {
normal: {
type: 'dashed',
},
},
},
],
},
],
};
myChart.setOption(option,true);
const sizeFun = function () {
myChart.resize();
};
myChart.on('legendselectchanged', (e) => {
console.log(e);
switch (e.name) {
case '个人':
if (e.selected[e.name]) {
console.log('开启个人')
}
break;
case '班级':
if (e.selected[e.name]) {
console.log('开启班级')
}
break;
case '年级':
if (e.selected[e.name]) {
console.log('开启年级')
}
break;
default:
break;
}
})
window.addEventListener('resize', sizeFun);
}
},
mounted () {
if(this.userId && this.planBid){
this.getData();
}else{
this.chartData=[];
this.rightData = '';
}
},
};
</script>
数据模型
{
"flag": true,
"flagMsg": "操作成功",
"data": {
"type1": [
{
"quotaId": "9e69b84855e14503b4356352dcd1183b",
"quotaNme": "测试3",
"score": 0.0,
"fullScore": 11111.0,
"toolName": null,
"list": [
{
"firstQuotaBid": "9e69b84855e14503b4356352dcd1183b",
"firstQuotaName": "测试3",
"pointBid": null,
"pointName": null,
"planToolBid": null,
"toolName": "333",
"score": "0"
}
]
},
{
"quotaId": "4eabb4b2e0824191b826b2d045eac6af",
"quotaNme": "测试1",
"score": 0.0,
"fullScore": 22.0,
"toolName": null,
"list": [
{
"firstQuotaBid": "4eabb4b2e0824191b826b2d045eac6af",
"firstQuotaName": "测试1",
"pointBid": null,
"pointName": null,
"planToolBid": null,
"toolName": "111",
"score": "0"
}
]
},
{
"quotaId": "133536e9bd6e4606ba3f9d5642772871",
"quotaNme": "三好学生",
"score": 0.0,
"fullScore": 22.0,
"toolName": null,
"list": [
{
"firstQuotaBid": "133536e9bd6e4606ba3f9d5642772871",
"firstQuotaName": "三好学生",
"pointBid": null,
"pointName": null,
"planToolBid": null,
"toolName": "三好学生工具名称",
"score": "0"
}
]
},
{
"quotaId": "d8e541b8edb049c0945af64a883d13a0",
"quotaNme": "思想品德",
"score": 0.0,
"fullScore": 67.0,
"toolName": null,
"list": [
{
"firstQuotaBid": "d8e541b8edb049c0945af64a883d13a0",
"firstQuotaName": "思想品德",
"pointBid": null,
"pointName": null,
"planToolBid": null,
"toolName": "111",
"score": "0"
},
{
"firstQuotaBid": "d8e541b8edb049c0945af64a883d13a0",
"firstQuotaName": "思想品德",
"pointBid": null,
"pointName": null,
"planToolBid": null,
"toolName": "222",
"score": "0"
}
]
},
{
"quotaId": "fbaf338fb26f4c63b00bb45e99e420fd",
"quotaNme": "测试2",
"score": 0.0,
"fullScore": 33.0,
"toolName": null,
"list": [
{
"firstQuotaBid": "fbaf338fb26f4c63b00bb45e99e420fd",
"firstQuotaName": "测试2",
"pointBid": null,
"pointName": null,
"planToolBid": null,
"toolName": "222",
"score": "0"
}
]
}
],
"type2": [],
"type3": []
}
}
Comments | NOTHING