<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
<script
src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"
type="text/javascript"
></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
/>
<style type="text/css">
html,
body {
margin: 0;
}
#app {
display: flex;
flex-direction: column;
}
#app .mydata-header {
display: flex;
height: 65px;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgb(182, 172, 172);
background: #fff;
padding: 0 10px;
}
#app .mydata-header .header-left {
font-weight: 600;
font-size: 16px;
}
#app .mydata-header .header-right {
display: flex;
}
#app .mydata-header .header-right .el-form {
display: flex;
align-items: center;
}
#app .mydata-header .header-right .el-form-item {
margin-bottom: 0;
}
#app .mydata-header .header-right .el-form-item:nth-of-type(2) {
margin: 0 5px;
}
#app .section-left {
width: 100%;
}
#app .section-left .content-item {
border-bottom: 1px solid #d3d1d1;
font-size: 16px;
background: #fff;
}
#app .section-left .content-item .item-header {
font-weight: bolder;
padding: 15px;
border-bottom: 1px solid #d3d1d1;
}
#app .section-left .content-item .item-chart {
width: 100%;
}
#app .section-left .content-item .item-chart .item-one {
display: flex;
justify-content: space-around;
padding: 20px 0;
}
#app .section-left .content-item .item-chart .item-one .item-desc {
display: flex;
flex-direction: column;
align-items: center;
}
#app .section-left .content-item .item-chart .word-item {
width: 100%;
height: 352px;
margin: 0 auto;
font-size: 20px;
text-align: center;
position: relative;
}
#app .section-left .content-item .item-chart .word-item .wdList {
position: absolute;
}
</style>
<title>诊断报告</title>
</head>
<body>
<div id="app">
<!-- <div class="mydata-header">
<div class="header-right">
<el-form>
<el-form-item>
<el-select v-model="mydataForm.report">
<el-option label="诊断数据" value="诊断数据"></el-option>
<el-option
label="教学质量诊断"
value="教学质量诊断"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-select v-model="mydataForm.date" placeholder="请选择月份">
<el-option :label=item.name :value=item.value v-for="item in monthDay" :key="item.id"></el-option>
</el-select>
<el-select v-model="mydataForm.date" placeholder="请选择月份">
<el-option label="近一个月" value="近一个月"></el-option>
<el-option label="近二个月" value="近二个月"></el-option>
<el-option label="近三个月" value="近三个月"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button
style="background:#3B88F3;border:none;color:#fff"
@click="searchEvent"
>查询</el-button
>
</el-form-item>
</el-form>
</div>
</div> -->
<div class="section-left">
<div class="content-item">
<div class="item-header">
评课累计时长
</div>
<div class="item-chart">
<div class="item-one">
<div class="item-desc">
<span style="font-weight:bold;">
<span style="color:#FF0000">{{ myTotalClassCount }}</span
>节课</span
>
<span>本人 <span>本月</span>累计</span>
</div>
<div class="item-desc">
<span style="font-weight: bold;">
<span>{{ AllTotalClassCount }}</span
>节课</span
>
<span>{{ allName }} <span>本月</span>累计</span>
</div>
</div>
<div
style="text-align:center;font-size:18px;font-weight:bold;margin-bottom:10px"
>
第{{ topNum }}名
</div>
<div style="display:flex;justify-content:center;">
<span style="margin-right:10px">{{ allName }}排名</span>
<el-progress
:text-inside="true"
style="width:50%"
color="#8e71c7"
:stroke-width="18"
:percentage="topPerc"
></el-progress>
</div>
<div id="chartLine" style="width:100%; height:300px;"></div>
</div>
</div>
<div class="content-item">
<div class="item-header">
课堂综合评价均分
</div>
<div class="item-chart">
<div id="chartgauge" style="width:98%; height:307px;"></div>
</div>
</div>
<div class="content-item">
<div class="item-header">
主要课堂类型
</div>
<div class="item-chart">
<div style="width:100%; height:300px;">
<div
id="chartradar"
style="width:100%; height:300px;margin:0 auto"
></div>
</div>
<div style="width:100%;display:flex;flex-direction: column">
<div style="margin:5px 15px;font-weight:bold">类型占比</div>
<div style="margin:5px 15px;color:#777879;">
<div style="color:#000;font-weight:bold">{{allName}}：</div>
<span>教师主导型:{{parseInt(AllCountTypeFloatList[0])}}%</span>
<span>学生主体型:{{parseInt(AllCountTypeFloatList[1])}}%</span>
<span>师生互动型:{{parseInt(AllCountTypeFloatList[2])}}%</span>
</div>
<div style="margin:5px 15px;color:#777879">
<div style="color:#000;font-weight:bold">本人：</div>
<span>教师主导型:{{parseInt(myCountTypeFloatList[0])}}%</span>
<span>学生主体型:{{parseInt(myCountTypeFloatList[1])}}%</span>
<span>师生互动型:{{parseInt(myCountTypeFloatList[2])}}%</span>
</div>
</div>
</div>
</div>
<div class="content-item">
<div class="item-header">
师生互动行为类型分布
</div>
<div class="item-chart">
<div id="chartpie" style="width:100%;height:480px" v-if="oneShow"></div>
<div id="chartpie" style="width:100%;height:480px;display:flex;justify-content: center;align-items: center;" v-if="!oneShow"><span>暂无数据</span></div>
</div>
</div>
<div class="content-item">
<div class="item-header">
各维度评价得分
</div>
<div class="item-chart">
<div id="GradeRight" style="width:98%; height:300px;"></div>
</div>
</div>
<div class="content-item">
<div class="item-header">
一级指标评价得分
</div>
<div class="item-chart">
<div id="Firstlevel" style="width:95%; height:350px;"></div>
</div>
</div>
<div class="content-item">
<div class="item-header">
二级指标评价得分
</div>
<div class="item-chart">
<div id="Secondlevel" style="width:95%; height:400px;" v-if="treeShow"></div>
<div id="Secondlevel" style="width:95%; height:400px;display:flex;justify-content: center;align-items: center;" v-if="!treeShow">
<span>暂无数据</span>
</div>
</div>
</div>
<div class="content-item">
<div class="item-header">
指标关注
</div>
<div class="item-chart">
<div id="pieGrade" style="width:95%; height:480px;margin:0 auto" v-if="twoShow"></div>
<div id="pieGrade" style="width:95%; height:480px;margin:0 auto;display:flex;justify-content: center;align-items: center;"
v-if="!twoShow">
<span>暂无数据</span>
</div>
</div>
</div>
<div class="content-item">
<div class="item-header">
各堂课综合评分趋势
</div>
<div class="item-chart">
<div
id="LineGrade"
style="width:95%; height:350px;margin:0 auto"
></div>
</div>
</div>
<div class="content-item">
<div
class="item-header"
style="display:flex;justify-content: space-between;"
>
<span>评语词云</span>
<span v-if="textData.length>0">本月关键词：
<span style="color:#E52C3C" v-if="textData.length>0">{{textData[0].name}}</span>
</span>
</div>
<div class="item-chart">
<div class="word-item" v-if="textData.length>0">
<p
class="wdList"
v-for="item in textData"
:style="item.style"
:key="item.id"
>
{{ item.name }}
</p>
</div>
<div class="word-item" v-else style="display:flex;justify-content: center;align-items: center;">
<span>暂无数据</span>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
new Vue({
el: "#app",
data: function() {
return {
mydataForm: {
report: "诊断数据",
date: "近一个月"
},
userType: 2,
textData: [],
monthDay: [],
allName: "全市",
myTotalClassCount: 0,
AllTotalClassCount: 0,
topNum: 0,
topPerc: 0,
myCountTypeFloatList: [0, 0, 0], //个人各课堂类型的占比
AllCountTypeFloatList: [0, 0, 0], //其他各课堂类型的占比
oneShow: true,
twoShow: true,
treeShow: true
};
},
methods: {
getData() {
var that = this;
$.ajax({
url: "https://evaluation.nnyun.net/getSelfQualityReport",
// url: "https://cepingtest.nnyun.net/getSelfQualityReport",
data: {
userId: that.getQueryString("userId")
},
dataType: "json",
type: "get",
success: function(res) {
if (res) {
// 各堂课综合评分趋势
that.drawLineGrade(
res.myEvaluationTrend,
res.roomEvaluationTrend
);
if (res.type == 1) {
that.allName = "全市";
// 全市
//评课累计时长
that.drawchartLine(
res.myClassCount,
res.myTotalClassCount,
res.topNum,
res.cityClassCount,
res.cityTotalClassCount
);
//主要课堂类型
that.drawchartRadar(
res.myCountTypeList,
res.myTotalCountType,
res.myCountTypeFloatList,
res.cityCountTypeList,
res.cityTotalCountType,
res.cityCountTypeFloatList
);
// 课堂综合评价均分
that.darawchartGauge(
res.myEvaluationResult,
res.cityEvaluationResult
);
//师生互动行为类型分布
if (
that.objectIsNull(res.myInteractionType) &&
that.objectIsNull(res.cityInteractionType)
) {
that.oneShow = false;
} else {
that.drawchartPie(
res.myInteractionType,
res.cityInteractionType
);
}
// 指标关注
if (
that.objectIsNull(res.myLabel) &&
that.objectIsNull(res.cityLabel)
) {
that.twoShow = false;
} else {
that.drawpieGrade(res.myLabel, res.cityLabel);
}
// 各维度评价得分
that.drawGradeRight(
res.myDimensionality,
res.myDimensionalityAvg,
res.cityDimensionality,
res.cityDimensionalityAvg
);
// 一级指标评价得分
that.drawFirstlevel(
res.myFirstLabel,
res.myFirstLabelAvg,
res.cityFirstLabel,
res.cityFirstLabelAvg
);
// 二级指标评价得分
if (
that.objectIsNull(res.mySecondLabel) &&
that.objectIsNull(res.citySecondLabel)
) {
that.treeShow = false;
} else {
that.drawSecondlevel(
res.mySecondLabel,
res.mySecondLabelAvg,
res.citySecondLabel,
res.citySecondLabelAvg
);
}
} else {
that.allName = "学校";
//学校
//评课累计时长
that.drawchartLine(
res.myClassCount,
res.myTotalClassCount,
res.topNum,
res.schoolClassCount,
res.schoolTotalClassCount
);
//主要课堂类型
that.drawchartRadar(
res.myCountTypeList,
res.myTotalCountType,
res.myCountTypeFloatList,
res.schoolCountTypeList,
res.schoolTotalCountType,
res.schoolCountTypeFloatList
);
// 课堂综合评价均分
that.darawchartGauge(
res.myEvaluationResult,
res.schoolEvaluationResult
);
//师生互动行为类型分布
if (
that.objectIsNull(res.myInteractionType) &&
that.objectIsNull(res.schoolInteractionType)
) {
that.oneShow = false;
} else {
that.drawchartPie(
res.myInteractionType,
res.schoolInteractionType
);
}
// 指标关注
if (
that.objectIsNull(res.myLabel) &&
that.objectIsNull(res.schoolLabel)
) {
that.twoShow = false;
} else {
that.drawpieGrade(res.myLabel, res.schoolLabel);
}
// 各维度评价得分
that.drawGradeRight(
res.myDimensionality,
res.myDimensionalityAvg,
res.schoolDimensionality,
res.schoolDimensionalityAvg
);
// 一级指标评价得分
that.drawFirstlevel(
res.myFirstLabel,
res.myFirstLabelAvg,
res.schoolFirstLabel,
res.schoolFirstLabelAvg
);
// 二级指标评价得分
if (
that.objectIsNull(res.mySecondLabel) &&
that.objectIsNull(res.schoolSecondLabel)
) {
that.treeShow = false;
} else {
that.drawSecondlevel(
res.mySecondLabel,
res.mySecondLabelAvg,
res.schoolSecondLabel,
res.schoolSecondLabelAvg
);
}
}
that.drawWordList(res.myWordList); // 评语词云
} else {
that.$message({
type: "info",
message: "接口失败"
});
}
}
});
},
GetRandomNum: function(Min, Max) {
var Range = Max - Min;
var Rand = Math.random();
return Min + Math.round(Rand * Range);
},
objectIsNull(object) {
if (JSON.stringify(object) == "{}") {
return true;
} else {
return false;
}
},
ObjectValue(arr, object) {
for (const key in object) {
arr.push(object[key].toFixed(2));
}
return arr;
},
ObjectName(arr, object) {
for (const key in object) {
arr.push(key);
}
return arr;
},
ObjectArr(arr, object) {
for (const key in object) {
arr.push({
name: key,
value: object[key].toFixed(2)
});
}
return arr;
},
searchEvent: function() {
console.log(this.mydataForm);
},
// 评课累计时长
drawchartLine(
myClassCount,
myTotalClassCount,
topNum,
AllClassCount,
AllTotalClassCount
) {
this.myTotalClassCount = myTotalClassCount;
this.AllTotalClassCount = AllTotalClassCount;
this.topNum = topNum;
this.topPerc = parseInt((myTotalClassCount / AllTotalClassCount) * 100)
var ClassCountName = [],
myClassCountData = [],
AllClassCountData = [];
ClassCountName = this.ObjectName(ClassCountName, AllClassCount);
myClassCountData = this.ObjectValue(myClassCountData, myClassCount);
AllClassCountData = this.ObjectValue(
AllClassCountData,
AllClassCount
);
this.chartLine = echarts.init(document.getElementById("chartLine"));
this.chartLine.setOption({
tooltip: {
trigger: "axis"
},
legend: {
top: "12",
data: ["本人累计", `${this.allName}累计`]
},
grid: {
left: "16%"
},
xAxis: {
type: "category",
boundaryGap: false,
axisLabel: {
rotate: 40
},
data: ClassCountName
},
yAxis: {
type: "value"
},
series: [
{
name: "本人累计",
type: "line",
data: myClassCountData
},
{
name: `${this.allName}累计`,
type: "line",
data: AllClassCountData
}
]
});
},
// 课堂综合评价均分
darawchartGauge(myEvaluationResult, AllEvaluationResult) {
this.chartgauge = echarts.init(document.getElementById("chartgauge"));
this.chartgauge.setOption({
tooltip: {
trigger: "item",
formatter: "{b} : {c}分"
},
series: [
{
name: "本人",
type: "gauge",
axisLine: {
// 坐标轴线
lineStyle: {
// 属性lineStyle控制线条样式
width: 12
}
},
splitLine: {
// 分隔线
length: 15, // 属性length控制线长
lineStyle: {
// 属性lineStyle（详见lineStyle）控制线条样式
color: "auto"
}
},
axisLabel: {
fontSize: 10
},
pointer: {
width: 2
},
title: {
offsetCenter: ["0", "100%"]
},
radius: "45%",
center: ["25%", "50%"],
detail: {
formatter: "{value}分",
fontSize: 12,
color: "#000",
offsetCenter: [0, 42]
},
data: [{ value: myEvaluationResult, name: "本人" }]
},
{
name: `${this.allName}`,
radius: "45%",
pointer: {
width: 1
},
type: "gauge",
title: {
offsetCenter: ["0", "100%"]
},
axisLabel: {
fontSize: 10
},
axisLine: {
// 坐标轴线
lineStyle: {
// 属性lineStyle控制线条样式
width: 12
}
},
center: ["75%", "50%"],
detail: {
formatter: "{value}分",
fontSize: 12,
color: "#000",
offsetCenter: [0, 42]
},
data: [{ value: AllEvaluationResult, name: `${this.allName}` }]
}
]
});
},
//主要课堂类型
drawchartRadar(
myCountTypeList,
myTotalCountType,
myCountTypeFloatList,
AllCountTypeList,
AllTotalCountType,
AllCountTypeFloatList
) {
this.myCountTypeFloatList = myCountTypeFloatList;
this.AllCountTypeFloatList = AllCountTypeFloatList;
this.chartradar = echarts.init(document.getElementById("chartradar"));
this.chartradar.setOption({
tooltip: {},
legend: {
top: "20",
data: [`${this.allName}`, "本人"]
},
radar: {
center: ["50%", "70%"],
name: {
textStyle: {
color: "#000"
}
},
indicator: [
{ name: "教师主导型", max: AllTotalCountType },
{ name: "学生主体型", max: AllTotalCountType },
{ name: "师生互动型", max: AllTotalCountType }
]
},
color: ["#003333", "#E52C3C"],
series: [
{
name: "",
type: "radar",
data: [
{
value: AllCountTypeList,
name: `${this.allName}`
},
{
value: myCountTypeList,
name: "本人"
}
],
areaStyle: {
normal: {
opacity: 0.5
}
}
}
]
});
},
//师生互动行为类型分布
drawchartPie(myInteractionType, AllInteractionType) {
var myInteractionTypeData = [],
AllInteractionTypeData = [];
myInteractionTypeData = this.ObjectArr(
myInteractionTypeData,
myInteractionType
);
AllInteractionTypeData = this.ObjectArr(
AllInteractionTypeData,
AllInteractionType
);
this.chartpie = echarts.init(document.getElementById("chartpie"));
this.chartpie.setOption({
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
title: [
{
text: `${this.allName}`,
x: "50%",
y: "2%",
textAlign: "center",
textStyle: {
fontSize: 16
}
},
{
text: "个人",
x: "50%",
y: "50%",
textAlign: "center",
textStyle: {
fontSize: 16
}
}
],
series: [
{
name: `${this.allName}`,
type: "pie",
radius: [30, 45],
center: ["50%", "25%"],
label: {
normal: {
show: true,
fontSize: 8
},
emphasis: {
show: false
}
},
data: AllInteractionTypeData
},
{
name: "",
type: "pie",
radius: [30, 45],
center: ["50%", "75%"],
label: {
normal: {
show: true,
fontSize: 8
},
emphasis: {
show: false
}
},
data: myInteractionTypeData
}
]
});
},
// 各维度评价得分
drawGradeRight(
myDimensionality,
myDimensionalityAvg,
AllDimensionality,
AllDimensionalityAvg
) {
var DimensionalityName = [], // x轴
myDimensionalityData = [], // 个人各一级指标的关注情况
myDimensionalityAvgData = [], //个人各一级指标的关注情况的均值
AllDimensionalityData = [], //学校/市各一级指标的关注情况
AllDimensionalityAvgData = []; //学校/市各一级指标的关注情况的均值
DimensionalityName = this.ObjectName(
DimensionalityName,
AllDimensionality
);
myDimensionalityData = this.ObjectValue(
myDimensionalityData,
myDimensionality
);
myDimensionalityAvgData = this.ObjectValue(
myDimensionalityAvgData,
myDimensionalityAvg
);
AllDimensionalityData = this.ObjectValue(
AllDimensionalityData,
AllDimensionality
);
AllDimensionalityAvgData = this.ObjectValue(
AllDimensionalityAvgData,
AllDimensionalityAvg
);
this.GradeRight = echarts.init(document.getElementById("GradeRight"));
this.GradeRight.setOption({
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
},
legend: {
top: 10,
data: [
`${this.allName}`,
"本人",
`${this.allName}平均值`,
"本人平均值"
]
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
xAxis: {
type: "category",
data: DimensionalityName
},
yAxis: {
type: "value",
boundaryGap: [0, 0.01]
},
series: [
{
name: `${this.allName}`,
type: "bar",
data: AllDimensionalityData
},
{
name: "本人",
type: "bar",
data: myDimensionalityData
},
{
name: `${this.allName}平均值`,
type: "line",
data: AllDimensionalityAvgData
},
{
name: "本人平均值",
type: "line",
data: myDimensionalityAvgData
}
]
});
},
// 一级指标评价得分
drawFirstlevel(
myFirstLabel,
myFirstLabelAvg,
AllFirstLabel,
AllFirstLabelAvg
) {
var FirstLabelName = [], // x轴
myFirstLabelData = [], // 个人各一级指标的关注情况
myFirstLabelAvgData = [], //个人各一级指标的关注情况的均值
AllFirstLabelData = [], //学校/市各一级指标的关注情况
AllFirstLabelAvgData = []; //学校/市各一级指标的关注情况的均值
FirstLabelName = this.ObjectName(FirstLabelName, AllFirstLabel);
myFirstLabelData = this.ObjectValue(myFirstLabelData, myFirstLabel);
myFirstLabelAvgData = this.ObjectValue(
myFirstLabelAvgData,
myFirstLabelAvg
);
AllFirstLabelData = this.ObjectValue(
AllFirstLabelData,
AllFirstLabel
);
AllFirstLabelAvgData = this.ObjectValue(
AllFirstLabelAvgData,
AllFirstLabelAvg
);
this.Firstlevel = echarts.init(document.getElementById("Firstlevel"));
this.Firstlevel.setOption({
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
},
legend: {
top: 10,
data: [
`${this.allName}`,
"本人",
`${this.allName}平均值`,
"本人平均值"
]
},
grid: {
bottom: "3%",
containLabel: true
},
xAxis: {
type: "category",
boundaryGap: true,
nameGap: 30,
splitArea: {
show: false
},
axisLabel: {
show: true,
interval: 0,
formatter: function(params) {
var newParamsName = "";
var paramsNameNumber = params.length;
var provideNumber = 1; //一行显示几个字
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
if (paramsNameNumber > provideNumber) {
for (var p = 0; p < rowNumber; p++) {
var tempStr = "";
var start = p * provideNumber;
var end = start + provideNumber;
if (p == rowNumber - 1) {
tempStr = params.substring(start, paramsNameNumber);
} else {
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr;
}
} else {
newParamsName = params;
}
return newParamsName;
},
textStyle: {
color: "#000" //文字颜色
}
},
splitLine: {
show: false
},
data: FirstLabelName
},
yAxis: {
type: "value",
boundaryGap: [0, 0.01]
},
series: [
{
name: `${this.allName}`,
type: "bar",
data: AllFirstLabelData
},
{
name: "本人",
type: "bar",
data: myFirstLabelData
},
{
name: `${this.allName}平均值`,
type: "line",
data: AllFirstLabelAvgData
},
{
name: "本人平均值",
type: "line",
data: myFirstLabelAvgData
}
]
});
},
// 二级指标评价得分
drawSecondlevel(
mySecondLabel,
mySecondLabelAvg,
AllSecondLabel,
AllSecondLabelAvg
) {
var SecondLevelName = this.ObjectName([], AllSecondLabel), // x轴
mySecondLabelData = this.ObjectValue([], mySecondLabel), // 个人各二级指标的关注情况
mySecondLabelAvgData = this.ObjectValue([], mySecondLabelAvg), //个人各二级指标的关注情况的均值
AllSecondLabelData = this.ObjectValue([], AllSecondLabel), //学校/市各二级指标的关注情况
AllSecondLabelAvgData = this.ObjectValue([], AllSecondLabelAvg); //学校/市各二级指标的关注情况的均值
this.Secondlevel = echarts.init(
document.getElementById("Secondlevel")
);
this.Secondlevel.setOption({
tooltip: {
trigger: "item",
axisPointer: {
type: "shadow"
}
},
legend: {
top: 10,
data: [
`${this.allName}`,
"本人",
`${this.allName}平均值`,
"本人平均值"
]
},
grid: {
bottom: "3%",
containLabel: true
},
xAxis: {
type: "category",
boundaryGap: true,
nameGap: 30,
splitArea: {
show: false
},
axisLabel: {
show: true,
interval: 0,
formatter: function(params) {
var newParamsName = "";
var paramsNameNumber = params.length;
var provideNumber = 1; //一行显示几个字
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
if (paramsNameNumber > provideNumber) {
for (var p = 0; p < rowNumber; p++) {
var tempStr = "";
var start = p * provideNumber;
var end = start + provideNumber;
if (p == rowNumber - 1) {
tempStr = params.substring(start, paramsNameNumber);
} else {
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr;
}
} else {
newParamsName = params;
}
return newParamsName;
},
textStyle: {
color: "#000" //文字颜色
}
},
splitLine: {
show: false
},
data: SecondLevelName
},
yAxis: {
type: "value",
boundaryGap: [0, 0.01]
},
series: [
{
name: `${this.allName}`,
type: "bar",
data: AllSecondLabelData
},
{
name: "本人",
type: "bar",
data: mySecondLabelData
},
{
name: `${this.allName}平均值`,
type: "line",
data: AllSecondLabelAvgData
},
{
name: "本人平均值",
type: "line",
data: mySecondLabelAvgData
}
]
});
},
// 各堂课综合评分趋势
drawLineGrade(myEvaluationTrend, roomEvaluationTrend) {
var EvaluationTrendName = [],
myEvaluationTrendData = [],
roomEvaluationTrendData = [];
EvaluationTrendName = this.ObjectName(
EvaluationTrendName,
roomEvaluationTrend
);
myEvaluationTrendData = this.ObjectValue(
myEvaluationTrendData,
myEvaluationTrend
);
roomEvaluationTrendData = this.ObjectValue(
roomEvaluationTrendData,
roomEvaluationTrend
);
this.LineGrade = echarts.init(document.getElementById("LineGrade"));
this.LineGrade.setOption({
tooltip: {
trigger: "item",
formatter: "{a}:{c}分"
},
legend: {
data: ["本人", `房间评课者`],
top: 10
},
xAxis: {
show: false,
type: "category",
boundaryGap: false,
data: EvaluationTrendName
},
yAxis: {
type: "value"
},
series: [
{
name: "本人",
type: "line",
data: myEvaluationTrendData
},
{
name: `房间评课者`,
type: "line",
data: roomEvaluationTrendData
}
]
});
},
// 指标关注
drawpieGrade(myLabel, AllLabel) {
var myLabelData = [],
AllLabelData = [];
myLabelData = this.ObjectArr(myLabelData, myLabel);
AllLabelData = this.ObjectArr(AllLabelData, AllLabel);
this.pieGrade = echarts.init(document.getElementById("pieGrade"));
this.pieGrade.setOption({
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
title: [
{
text: `${this.allName}`,
x: "50%",
y: "2%",
textAlign: "center",
textStyle: {
fontSize: 14
}
},
{
text: "个人",
x: "50%",
y: "50%",
textAlign: "center"
}
],
series: [
{
name: `${this.allName}`,
type: "pie",
radius: "25%",
center: ["50%", "25%"],
label: {
normal: {
show: true,
fontSize: 12
},
emphasis: {
show: false
}
},
data: AllLabelData
},
{
name: "个人",
type: "pie",
radius: " 25%",
center: ["50%", "75%"],
label: {
normal: {
show: true,
fontSize: 12
},
emphasis: {
show: false
}
},
data: myLabelData
}
]
});
},
// 评语词云
drawWordList(myWordList) {
var textData = [];
myWordList.forEach((element, index) => {
var element = {
name: element,
style: {
top: index * 4 + "%",
left: this.GetRandomNum(5, 50) + "%",
fontSize: this.GetRandomNum(10, 22) + "px",
color:
"rgba(" +
this.GetRandomNum(0, 255) +
"," +
this.GetRandomNum(0, 255) +
"," +
this.GetRandomNum(0, 255) +
",0.8)",
opacity: (Math.random() * 1).toFixed(1)
}
};
textData.push(element);
});
this.textData = textData;
},
// 获取地址栏参数
getQueryString: function(name) {
var url = window.location.search;
console.log(url);
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = url.substr(1).match(reg);
if (r != null) return decodeURI(r[2]);
return null;
}
},
mounted: function() {
this.getData(); //获取数据的接口
}
});
</script>
</html>
h5-vue页面通过其它页面跳转过来获取参数并渲染echarts
最新推荐文章于 2023-07-07 10:15:12 发布
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
