Song/xkrs_ms
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

环境和新图表

Browse Source
This commit is contained in:
zhanglipeng
2020-11-14 22:03:47 +08:00
parent a445cdba91
commit 8de6c6900c
15 changed files with 1415 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ruoyi-ui/src/components/HeaderSearch/index.vue
View File

@ -159,7 +159,7 @@ export default {
display: inline-block;
vertical-align: middle;
/deep/ .el-input__inner {
::v-deep .el-input__inner {
border-radius: 0;
border: 0;
padding-left: 0;

2
ruoyi-ui/src/layout/components/TagsView/ScrollPane.vue
View File

@ -73,7 +73,7 @@ export default {
position: relative;
overflow: hidden;
width: 100%;
/deep/ {
::v-deep {
.el-scrollbar__bar {
bottom: 0px;
}

25
ruoyi-ui/src/views/benyi/assessment/history.vue
View File

@ -15,6 +15,21 @@
<div>
<radar-chart :psMsg="item.dictValue" />
</div>
<div>
<radar-chart_jk :psMsg="item.dictValue" />
</div>
<div>
<radar-chart_yy :psMsg="item.dictValue" />
</div>
<div>
<radar-chart_sh :psMsg="item.dictValue" />
</div>
<div>
<radar-chart_kx :psMsg="item.dictValue" />
</div>
<div>
<radar-chart_ys :psMsg="item.dictValue" />
</div>
<div class="block">
<h2 class="block-item-title flex align-center">评估建议</h2>
<!-- <ul class="block-content">
@ -69,11 +84,21 @@ import {
import { getChildByAssessment } from "@/api/benyi/child";
import { getAssessmentDictData } from "@/api/benyi/assessmentchild";
import RadarChart from "@/views/dashboard/RadarChart";
import RadarChart_jk from "@/views/dashboard/RadarChart_jk";
import RadarChart_yy from "@/views/dashboard/RadarChart_yy";
import RadarChart_sh from "@/views/dashboard/RadarChart_sh";
import RadarChart_kx from "@/views/dashboard/RadarChart_kx";
import RadarChart_ys from "@/views/dashboard/RadarChart_ys";
export default {
name: "Assessmentstudent",
components: {
RadarChart,
RadarChart_jk,
RadarChart_yy,
RadarChart_sh,
RadarChart_kx,
RadarChart_ys,
},
data() {
return {

2
ruoyi-ui/src/views/benyi/calendarshow/index123.vue
View File

@ -211,7 +211,7 @@ $color: #45b984;
.full-calendar {
padding: 20px;
height: calc(100% - 30px);
/deep/ {
::v-deep {
.fc-unthemed thead,
.fc-unthemed .fc-content,
.fc-unthemed th,

274
ruoyi-ui/src/views/dashboard/RadarChart_jk.vue Normal file
View File

@ -0,0 +1,274 @@
<template>
<div :class="className" :style="{ height: height, width: width }" />
</template>
<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";
import { getAssessmentStatistics } from "@/api/benyi/assessmentcontent";
const animationDuration = 3000;
export default {
values: [],
mixins: [resize],
props: {
className: {
type: String,
default: "chart",
},
width: {
type: String,
default: "100%",
},
height: {
type: String,
default: "300px",
},
psMsg: {
type: String,
default: "",
}, //接收psMsg值 适用范围
},
data() {
return {
chart: null,
childId: "",
};
},
mounted() {
var childId = this.$route.params && this.$route.params.id;
this.childId = childId;
// console.log("child-chart:" + childId);
// console.log("psMsg:" + this.psMsg);
// this.$nextTick(() => {
// this.initChart();
// });
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
async getData() {
await getAssessmentStatistics(this.childId, this.psMsg).then(
(response) => {
console.log(response);
let value = [];
let len = response.statistics;
for (var j = 0; j < len.length; j++) {
console.log(len[j]);
if (len[j] == "NaN") {
value.push(0);
} else {
value.push(len[j]);
}
}
this.values = value;
//console.log(this.names);
//console.log(this.values);
}
);
},
async initChart() {
await this.getData();
this.chart = echarts.init(this.$el, "macarons");
if (this.psMsg == "3") {
this.chart.setOption({
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
},
radar: {
radius: "66%",
center: ["50%", "42%"],
splitNumber: 8,
splitArea: {
areaStyle: {
color: "rgba(127,95,132,.3)",
opacity: 1,
shadowBlur: 45,
shadowColor: "rgba(0,0,0,.5)",
shadowOffsetX: 0,
shadowOffsetY: 15,
},
},
indicator: [
{ name: "健康", max: 100 },
{ name: "语言", max: 100 },
{ name: "社会", max: 100 },
{ name: "科学", max: 100 },
{ name: "艺术", max: 100 },
],
},
legend: {
left: "center",
bottom: "10",
data: ["60-72个月幼儿测评范围值", "幼儿实际测评值"],
},
series: [
{
type: "radar",
symbolSize: 0,
areaStyle: {
normal: {
shadowBlur: 13,
shadowColor: "rgba(0,0,0,.2)",
shadowOffsetX: 0,
shadowOffsetY: 10,
opacity: 1,
},
},
data: [
{
value: [72, 72, 72, 72, 72],
name: "60-72个月幼儿测评范围值",
},
{
value: this.values,
name: "幼儿实际测评值",
},
],
animationDuration: animationDuration,
},
],
});
} else if (this.psMsg == "2") {
this.chart.setOption({
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
},
radar: {
radius: "66%",
center: ["50%", "42%"],
splitNumber: 8,
splitArea: {
areaStyle: {
color: "rgba(127,95,132,.3)",
opacity: 1,
shadowBlur: 45,
shadowColor: "rgba(0,0,0,.5)",
shadowOffsetX: 0,
shadowOffsetY: 15,
},
},
indicator: [
{ name: "健康", max: 100 },
{ name: "语言", max: 100 },
{ name: "社会", max: 100 },
{ name: "科学", max: 100 },
{ name: "艺术", max: 100 },
],
},
legend: {
left: "center",
bottom: "10",
data: ["48-60个月幼儿测评范围值", "幼儿实际测评值"],
},
series: [
{
type: "radar",
symbolSize: 0,
areaStyle: {
normal: {
shadowBlur: 13,
shadowColor: "rgba(0,0,0,.2)",
shadowOffsetX: 0,
shadowOffsetY: 10,
opacity: 1,
},
},
data: [
{
value: [60, 60, 60, 60, 60],
name: "48-60个月幼儿测评范围值",
},
{
value: this.values,
name: "幼儿实际测评值",
},
],
animationDuration: animationDuration,
},
],
});
} else if (this.psMsg == "1") {
this.chart.setOption({
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
},
radar: {
radius: "66%",
center: ["50%", "42%"],
splitNumber: 8,
splitArea: {
areaStyle: {
color: "rgba(127,95,132,.3)",
opacity: 1,
shadowBlur: 45,
shadowColor: "rgba(0,0,0,.5)",
shadowOffsetX: 0,
shadowOffsetY: 15,
},
},
indicator: [
{ name: "健康", max: 100 },
{ name: "语言", max: 100 },
{ name: "社会", max: 100 },
{ name: "科学", max: 100 },
{ name: "艺术", max: 100 },
],
},
legend: {
left: "center",
bottom: "10",
data: ["36-48个月幼儿测评范围值", "幼儿实际测评值"],
},
series: [
{
type: "radar",
symbolSize: 0,
areaStyle: {
normal: {
shadowBlur: 13,
shadowColor: "rgba(0,0,0,.2)",
shadowOffsetX: 0,
shadowOffsetY: 10,
opacity: 1,
},
},
data: [
{
value: [48, 48, 48, 48, 48],
name: "36-48个月幼儿测评范围值",
},
{
value: this.values,
name: "幼儿实际测评值",
},
],
animationDuration: animationDuration,
},
],
});
}
},
},
};
</script>

274
ruoyi-ui/src/views/dashboard/RadarChart_kx.vue Normal file
View File

@ -0,0 +1,274 @@
<template>
<div :class="className" :style="{ height: height, width: width }" />
</template>
<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";
import { getAssessmentStatistics } from "@/api/benyi/assessmentcontent";
const animationDuration = 3000;
export default {
values: [],
mixins: [resize],
props: {
className: {
type: String,
default: "chart",
},
width: {
type: String,
default: "100%",
},
height: {
type: String,
default: "300px",
},
psMsg: {
type: String,
default: "",
}, //接收psMsg值 适用范围
},
data() {
return {
chart: null,
childId: "",
};
},
mounted() {
var childId = this.$route.params && this.$route.params.id;
this.childId = childId;
// console.log("child-chart:" + childId);
// console.log("psMsg:" + this.psMsg);
// this.$nextTick(() => {
// this.initChart();
// });
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
async getData() {
await getAssessmentStatistics(this.childId, this.psMsg).then(
(response) => {
console.log(response);
let value = [];
let len = response.statistics;
for (var j = 0; j < len.length; j++) {
console.log(len[j]);
if (len[j] == "NaN") {
value.push(0);
} else {
value.push(len[j]);
}
}
this.values = value;
//console.log(this.names);
//console.log(this.values);
}
);
},
async initChart() {
await this.getData();
this.chart = echarts.init(this.$el, "macarons");
if (this.psMsg == "3") {
this.chart.setOption({
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
},
radar: {
radius: "66%",
center: ["50%", "42%"],
splitNumber: 8,
splitArea: {
areaStyle: {
color: "rgba(127,95,132,.3)",
opacity: 1,
shadowBlur: 45,
shadowColor: "rgba(0,0,0,.5)",
shadowOffsetX: 0,
shadowOffsetY: 15,
},
},
indicator: [
{ name: "健康", max: 100 },
{ name: "语言", max: 100 },
{ name: "社会", max: 100 },
{ name: "科学", max: 100 },
{ name: "艺术", max: 100 },
],
},
legend: {
left: "center",
bottom: "10",
data: ["60-72个月幼儿测评范围值", "幼儿实际测评值"],
},
series: [
{
type: "radar",
symbolSize: 0,
areaStyle: {
normal: {
shadowBlur: 13,
shadowColor: "rgba(0,0,0,.2)",
shadowOffsetX: 0,
shadowOffsetY: 10,
opacity: 1,
},
},
data: [
{
value: [72, 72, 72, 72, 72],
name: "60-72个月幼儿测评范围值",
},
{
value: this.values,
name: "幼儿实际测评值",
},
],
animationDuration: animationDuration,
},
],
});
} else if (this.psMsg == "2") {
this.chart.setOption({
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
},
radar: {
radius: "66%",
center: ["50%", "42%"],
splitNumber: 8,
splitArea: {
areaStyle: {
color: "rgba(127,95,132,.3)",
opacity: 1,
shadowBlur: 45,
shadowColor: "rgba(0,0,0,.5)",
shadowOffsetX: 0,
shadowOffsetY: 15,
},
},
indicator: [
{ name: "健康", max: 100 },
{ name: "语言", max: 100 },
{ name: "社会", max: 100 },
{ name: "科学", max: 100 },
{ name: "艺术", max: 100 },
],
},
legend: {
left: "center",
bottom: "10",
data: ["48-60个月幼儿测评范围值", "幼儿实际测评值"],
},
series: [
{
type: "radar",
symbolSize: 0,
areaStyle: {
normal: {
shadowBlur: 13,
shadowColor: "rgba(0,0,0,.2)",
shadowOffsetX: 0,
shadowOffsetY: 10,
opacity: 1,
},
},
data: [
{
value: [60, 60, 60, 60, 60],
name: "48-60个月幼儿测评范围值",
},
{
value: this.values,
name: "幼儿实际测评值",
},
],
animationDuration: animationDuration,
},
],
});
} else if (this.psMsg == "1") {
this.chart.setOption({
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
},
radar: {
radius: "66%",
center: ["50%", "42%"],
splitNumber: 8,
splitArea: {
areaStyle: {
color: "rgba(127,95,132,.3)",
opacity: 1,
shadowBlur: 45,
shadowColor: "rgba(0,0,0,.5)",
shadowOffsetX: 0,
shadowOffsetY: 15,
},
},
indicator: [
{ name: "健康", max: 100 },
{ name: "语言", max: 100 },
{ name: "社会", max: 100 },
{ name: "科学", max: 100 },
{ name: "艺术", max: 100 },
],
},
legend: {
left: "center",
bottom: "10",
data: ["36-48个月幼儿测评范围值", "幼儿实际测评值"],
},
series: [
{
type: "radar",
symbolSize: 0,
areaStyle: {
normal: {
shadowBlur: 13,
shadowColor: "rgba(0,0,0,.2)",
shadowOffsetX: 0,
shadowOffsetY: 10,
opacity: 1,
},
},
data: [
{
value: [48, 48, 48, 48, 48],
name: "36-48个月幼儿测评范围值",
},
{
value: this.values,
name: "幼儿实际测评值",
},
],
animationDuration: animationDuration,
},
],
});
}
},
},
};
</script>

274
ruoyi-ui/src/views/dashboard/RadarChart_sh.vue Normal file
View File

@ -0,0 +1,274 @@
<template>
<div :class="className" :style="{ height: height, width: width }" />
</template>
<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";
import { getAssessmentStatistics } from "@/api/benyi/assessmentcontent";
const animationDuration = 3000;
export default {
values: [],
mixins: [resize],
props: {
className: {
type: String,
default: "chart",
},
width: {
type: String,
default: "100%",
},
height: {
type: String,
default: "300px",
},
psMsg: {
type: String,
default: "",
}, //接收psMsg值 适用范围
},
data() {
return {
chart: null,
childId: "",
};
},
mounted() {
var childId = this.$route.params && this.$route.params.id;
this.childId = childId;
// console.log("child-chart:" + childId);
// console.log("psMsg:" + this.psMsg);
// this.$nextTick(() => {
// this.initChart();
// });
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
async getData() {
await getAssessmentStatistics(this.childId, this.psMsg).then(
(response) => {
console.log(response);
let value = [];
let len = response.statistics;
for (var j = 0; j < len.length; j++) {
console.log(len[j]);
if (len[j] == "NaN") {
value.push(0);
} else {
value.push(len[j]);
}
}
this.values = value;
//console.log(this.names);
//console.log(this.values);
}
);
},
async initChart() {
await this.getData();
this.chart = echarts.init(this.$el, "macarons");
if (this.psMsg == "3") {
this.chart.setOption({
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
},
radar: {
radius: "66%",
center: ["50%", "42%"],
splitNumber: 8,
splitArea: {
areaStyle: {
color: "rgba(127,95,132,.3)",
opacity: 1,
shadowBlur: 45,
shadowColor: "rgba(0,0,0,.5)",
shadowOffsetX: 0,
shadowOffsetY: 15,
},
},
indicator: [
{ name: "健康", max: 100 },
{ name: "语言", max: 100 },
{ name: "社会", max: 100 },
{ name: "科学", max: 100 },
{ name: "艺术", max: 100 },
],
},
legend: {
left: "center",
bottom: "10",
data: ["60-72个月幼儿测评范围值", "幼儿实际测评值"],
},
series: [
{
type: "radar",
symbolSize: 0,
areaStyle: {
normal: {
shadowBlur: 13,
shadowColor: "rgba(0,0,0,.2)",
shadowOffsetX: 0,
shadowOffsetY: 10,
opacity: 1,
},
},
data: [
{
value: [72, 72, 72, 72, 72],
name: "60-72个月幼儿测评范围值",
},
{
value: this.values,
name: "幼儿实际测评值",
},
],
animationDuration: animationDuration,
},
],
});
} else if (this.psMsg == "2") {
this.chart.setOption({
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
},
radar: {
radius: "66%",
center: ["50%", "42%"],
splitNumber: 8,
splitArea: {
areaStyle: {
color: "rgba(127,95,132,.3)",
opacity: 1,
shadowBlur: 45,
shadowColor: "rgba(0,0,0,.5)",
shadowOffsetX: 0,
shadowOffsetY: 15,
},
},
indicator: [
{ name: "健康", max: 100 },
{ name: "语言", max: 100 },
{ name: "社会", max: 100 },
{ name: "科学", max: 100 },
{ name: "艺术", max: 100 },
],
},
legend: {
left: "center",
bottom: "10",
data: ["48-60个月幼儿测评范围值", "幼儿实际测评值"],
},
series: [
{
type: "radar",
symbolSize: 0,
areaStyle: {
normal: {
shadowBlur: 13,
shadowColor: "rgba(0,0,0,.2)",
shadowOffsetX: 0,
shadowOffsetY: 10,
opacity: 1,
},
},
data: [
{
value: [60, 60, 60, 60, 60],
name: "48-60个月幼儿测评范围值",
},
{
value: this.values,
name: "幼儿实际测评值",
},
],
animationDuration: animationDuration,
},
],
});
} else if (this.psMsg == "1") {
this.chart.setOption({
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
},
radar: {
radius: "66%",
center: ["50%", "42%"],
splitNumber: 8,
splitArea: {
areaStyle: {
color: "rgba(127,95,132,.3)",
opacity: 1,
shadowBlur: 45,
shadowColor: "rgba(0,0,0,.5)",
shadowOffsetX: 0,
shadowOffsetY: 15,
},
},
indicator: [
{ name: "健康", max: 100 },
{ name: "语言", max: 100 },
{ name: "社会", max: 100 },
{ name: "科学", max: 100 },
{ name: "艺术", max: 100 },
],
},
legend: {
left: "center",
bottom: "10",
data: ["36-48个月幼儿测评范围值", "幼儿实际测评值"],
},
series: [
{
type: "radar",
symbolSize: 0,
areaStyle: {
normal: {
shadowBlur: 13,
shadowColor: "rgba(0,0,0,.2)",
shadowOffsetX: 0,
shadowOffsetY: 10,
opacity: 1,
},
},
data: [
{
value: [48, 48, 48, 48, 48],
name: "36-48个月幼儿测评范围值",
},
{
value: this.values,
name: "幼儿实际测评值",
},
],
animationDuration: animationDuration,
},
],
});
}
},
},
};
</script>

274
ruoyi-ui/src/views/dashboard/RadarChart_ys.vue Normal file
View File

@ -0,0 +1,274 @@
<template>
<div :class="className" :style="{ height: height, width: width }" />
</template>
<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";
import { getAssessmentStatistics } from "@/api/benyi/assessmentcontent";
const animationDuration = 3000;
export default {
values: [],
mixins: [resize],
props: {
className: {
type: String,
default: "chart",
},
width: {
type: String,
default: "100%",
},
height: {
type: String,
default: "300px",
},
psMsg: {
type: String,
default: "",
}, //接收psMsg值 适用范围
},
data() {
return {
chart: null,
childId: "",
};
},
mounted() {
var childId = this.$route.params && this.$route.params.id;
this.childId = childId;
// console.log("child-chart:" + childId);
// console.log("psMsg:" + this.psMsg);
// this.$nextTick(() => {
// this.initChart();
// });
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
async getData() {
await getAssessmentStatistics(this.childId, this.psMsg).then(
(response) => {
console.log(response);
let value = [];
let len = response.statistics;
for (var j = 0; j < len.length; j++) {
console.log(len[j]);
if (len[j] == "NaN") {
value.push(0);
} else {
value.push(len[j]);
}
}
this.values = value;
//console.log(this.names);
//console.log(this.values);
}
);
},
async initChart() {
await this.getData();
this.chart = echarts.init(this.$el, "macarons");
if (this.psMsg == "3") {
this.chart.setOption({
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
},
radar: {
radius: "66%",
center: ["50%", "42%"],
splitNumber: 8,
splitArea: {
areaStyle: {
color: "rgba(127,95,132,.3)",
opacity: 1,
shadowBlur: 45,
shadowColor: "rgba(0,0,0,.5)",
shadowOffsetX: 0,
shadowOffsetY: 15,
},
},
indicator: [
{ name: "健康", max: 100 },
{ name: "语言", max: 100 },
{ name: "社会", max: 100 },
{ name: "科学", max: 100 },
{ name: "艺术", max: 100 },
],
},
legend: {
left: "center",
bottom: "10",
data: ["60-72个月幼儿测评范围值", "幼儿实际测评值"],
},
series: [
{
type: "radar",
symbolSize: 0,
areaStyle: {
normal: {
shadowBlur: 13,
shadowColor: "rgba(0,0,0,.2)",
shadowOffsetX: 0,
shadowOffsetY: 10,
opacity: 1,
},
},
data: [
{
value: [72, 72, 72, 72, 72],
name: "60-72个月幼儿测评范围值",
},
{
value: this.values,
name: "幼儿实际测评值",
},
],
animationDuration: animationDuration,
},
],
});
} else if (this.psMsg == "2") {
this.chart.setOption({
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
},
radar: {
radius: "66%",
center: ["50%", "42%"],
splitNumber: 8,
splitArea: {
areaStyle: {
color: "rgba(127,95,132,.3)",
opacity: 1,
shadowBlur: 45,
shadowColor: "rgba(0,0,0,.5)",
shadowOffsetX: 0,
shadowOffsetY: 15,
},
},
indicator: [
{ name: "健康", max: 100 },
{ name: "语言", max: 100 },
{ name: "社会", max: 100 },
{ name: "科学", max: 100 },
{ name: "艺术", max: 100 },
],
},
legend: {
left: "center",
bottom: "10",
data: ["48-60个月幼儿测评范围值", "幼儿实际测评值"],
},
series: [
{
type: "radar",
symbolSize: 0,
areaStyle: {
normal: {
shadowBlur: 13,
shadowColor: "rgba(0,0,0,.2)",
shadowOffsetX: 0,
shadowOffsetY: 10,
opacity: 1,
},
},
data: [
{
value: [60, 60, 60, 60, 60],
name: "48-60个月幼儿测评范围值",
},
{
value: this.values,
name: "幼儿实际测评值",
},
],
animationDuration: animationDuration,
},
],
});
} else if (this.psMsg == "1") {
this.chart.setOption({
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
},
radar: {
radius: "66%",
center: ["50%", "42%"],
splitNumber: 8,
splitArea: {
areaStyle: {
color: "rgba(127,95,132,.3)",
opacity: 1,
shadowBlur: 45,
shadowColor: "rgba(0,0,0,.5)",
shadowOffsetX: 0,
shadowOffsetY: 15,
},
},
indicator: [
{ name: "健康", max: 100 },
{ name: "语言", max: 100 },
{ name: "社会", max: 100 },
{ name: "科学", max: 100 },
{ name: "艺术", max: 100 },
],
},
legend: {
left: "center",
bottom: "10",
data: ["36-48个月幼儿测评范围值", "幼儿实际测评值"],
},
series: [
{
type: "radar",
symbolSize: 0,
areaStyle: {
normal: {
shadowBlur: 13,
shadowColor: "rgba(0,0,0,.2)",
shadowOffsetX: 0,
shadowOffsetY: 10,
opacity: 1,
},
},
data: [
{
value: [48, 48, 48, 48, 48],
name: "36-48个月幼儿测评范围值",
},
{
value: this.values,
name: "幼儿实际测评值",
},
],
animationDuration: animationDuration,
},
],
});
}
},
},
};
</script>

274
ruoyi-ui/src/views/dashboard/RadarChart_yy.vue Normal file
View File

@ -0,0 +1,274 @@
<template>
<div :class="className" :style="{ height: height, width: width }" />
</template>
<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";
import { getAssessmentStatistics } from "@/api/benyi/assessmentcontent";
const animationDuration = 3000;
export default {
values: [],
mixins: [resize],
props: {
className: {
type: String,
default: "chart",
},
width: {
type: String,
default: "100%",
},
height: {
type: String,
default: "300px",
},
psMsg: {
type: String,
default: "",
}, //接收psMsg值 适用范围
},
data() {
return {
chart: null,
childId: "",
};
},
mounted() {
var childId = this.$route.params && this.$route.params.id;
this.childId = childId;
// console.log("child-chart:" + childId);
// console.log("psMsg:" + this.psMsg);
// this.$nextTick(() => {
// this.initChart();
// });
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
async getData() {
await getAssessmentStatistics(this.childId, this.psMsg).then(
(response) => {
console.log(response);
let value = [];
let len = response.statistics;
for (var j = 0; j < len.length; j++) {
console.log(len[j]);
if (len[j] == "NaN") {
value.push(0);
} else {
value.push(len[j]);
}
}
this.values = value;
//console.log(this.names);
//console.log(this.values);
}
);
},
async initChart() {
await this.getData();
this.chart = echarts.init(this.$el, "macarons");
if (this.psMsg == "3") {
this.chart.setOption({
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
},
radar: {
radius: "66%",
center: ["50%", "42%"],
splitNumber: 8,
splitArea: {
areaStyle: {
color: "rgba(127,95,132,.3)",
opacity: 1,
shadowBlur: 45,
shadowColor: "rgba(0,0,0,.5)",
shadowOffsetX: 0,
shadowOffsetY: 15,
},
},
indicator: [
{ name: "健康", max: 100 },
{ name: "语言", max: 100 },
{ name: "社会", max: 100 },
{ name: "科学", max: 100 },
{ name: "艺术", max: 100 },
],
},
legend: {
left: "center",
bottom: "10",
data: ["60-72个月幼儿测评范围值", "幼儿实际测评值"],
},
series: [
{
type: "radar",
symbolSize: 0,
areaStyle: {
normal: {
shadowBlur: 13,
shadowColor: "rgba(0,0,0,.2)",
shadowOffsetX: 0,
shadowOffsetY: 10,
opacity: 1,
},
},
data: [
{
value: [72, 72, 72, 72, 72],
name: "60-72个月幼儿测评范围值",
},
{
value: this.values,
name: "幼儿实际测评值",
},
],
animationDuration: animationDuration,
},
],
});
} else if (this.psMsg == "2") {
this.chart.setOption({
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
},
radar: {
radius: "66%",
center: ["50%", "42%"],
splitNumber: 8,
splitArea: {
areaStyle: {
color: "rgba(127,95,132,.3)",
opacity: 1,
shadowBlur: 45,
shadowColor: "rgba(0,0,0,.5)",
shadowOffsetX: 0,
shadowOffsetY: 15,
},
},
indicator: [
{ name: "健康", max: 100 },
{ name: "语言", max: 100 },
{ name: "社会", max: 100 },
{ name: "科学", max: 100 },
{ name: "艺术", max: 100 },
],
},
legend: {
left: "center",
bottom: "10",
data: ["48-60个月幼儿测评范围值", "幼儿实际测评值"],
},
series: [
{
type: "radar",
symbolSize: 0,
areaStyle: {
normal: {
shadowBlur: 13,
shadowColor: "rgba(0,0,0,.2)",
shadowOffsetX: 0,
shadowOffsetY: 10,
opacity: 1,
},
},
data: [
{
value: [60, 60, 60, 60, 60],
name: "48-60个月幼儿测评范围值",
},
{
value: this.values,
name: "幼儿实际测评值",
},
],
animationDuration: animationDuration,
},
],
});
} else if (this.psMsg == "1") {
this.chart.setOption({
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
},
radar: {
radius: "66%",
center: ["50%", "42%"],
splitNumber: 8,
splitArea: {
areaStyle: {
color: "rgba(127,95,132,.3)",
opacity: 1,
shadowBlur: 45,
shadowColor: "rgba(0,0,0,.5)",
shadowOffsetX: 0,
shadowOffsetY: 15,
},
},
indicator: [
{ name: "健康", max: 100 },
{ name: "语言", max: 100 },
{ name: "社会", max: 100 },
{ name: "科学", max: 100 },
{ name: "艺术", max: 100 },
],
},
legend: {
left: "center",
bottom: "10",
data: ["36-48个月幼儿测评范围值", "幼儿实际测评值"],
},
series: [
{
type: "radar",
symbolSize: 0,
areaStyle: {
normal: {
shadowBlur: 13,
shadowColor: "rgba(0,0,0,.2)",
shadowOffsetX: 0,
shadowOffsetY: 10,
opacity: 1,
},
},
data: [
{
value: [48, 48, 48, 48, 48],
name: "36-48个月幼儿测评范围值",
},
{
value: this.values,
name: "幼儿实际测评值",
},
],
animationDuration: animationDuration,
},
],
});
}
},
},
};
</script>