xiangshan
/
ggfwjsc
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

gx

This commit is contained in:
duanxiaohai 2024-04-18 11:52:01 +08:00
parent b8f001f213
commit 9e6537e2c5
12 changed files with 192 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/view/echarts_education/edCSR.vue
View File

@ -1,5 +1,5 @@
<template>
<div ref="chart" style="width: 100%;height: calc(100% - 70px);min-height: 205px"></div>
<div ref="chart" style="width: 100%;height: 250px"></div>
</template>
<script setup>

317
src/view/echarts_education/edXX.vue
View File

@ -1,8 +1,5 @@
<template>
<div
ref="chart"
style="width: 100%; height: calc(100% - 126px); min-height: 205px"
></div>
<div ref="chart" style="width: 100%; height: 250px"></div>
</template>
<script setup>
@ -38,7 +35,7 @@ const data = reactive({
list: [],
option: {},
value: 18,
namea:'',
namea: "",
});
// const datas = {
@ -48,29 +45,6 @@ var colors = ["#4EC2FF", "#FF805C", "#12F7D5", "#268FFF", "#FFE986"];
const getOption = () => {
data.option = {
color: colors,
// legend: {
// orient: "vertical",
// top: "center",
// right: "6%",
// icon: "circle",
// itemGap: 20,
// itemWidth: 10,
// itemHeight: 10,
// textStyle: {
// color: "#fff",
// fontSize: 18,
// },
// // formatter: function (name) {
// // var target;
// // for (var i = 0, l = data.list.length; i < l; i++) {
// // if (data.list[i].name == name) {
// // target = data.list[i].value;
// // }
// // }
// // return ` ${name} ${target} `;
// // },
// },
tooltip: {
trigger: "item",
// formatter: "{a} <br/>{b} : {c} ({d}%)",
@ -78,22 +52,62 @@ const getOption = () => {
series: [
/*内心原型图，展示整体数据概览*/
{
name: "测评分析",
name: data.namea,
type: "pie",
radius: ["20%", "70%"],
center: ["30%", "50%"],
roseType: "radius",
radius: ["30%", "60%"],
center: ["50%", "50%"],
roundCap: true,
clockWise: true,
startAngle: 180,
minShowLabelAngle: 30,
// hoverAnimation: false,
label: {
show: false,
//文字部分 显示内容为{b}：{c}可以换自己像显示的
//最外面的{a|}必要，不然位置有偏差，可以根据rich a微调
//{hr|}为圆点显示内容
formatter: "{hr|} {a|{b} {c}}\n\n",
color: "#fffdef", //折线图文字颜色
borderWidth: 10,
borderRadius: 4,
padding: [90, -60],
rich: {
//圆点位置大小配置
hr: {
//auto自定义
backgroundColor: "auto",
borderRadius: 3,
width: 3,
height: 3,
padding: [3, 3, 0, -12],
},
a: {
padding: [-12, 10, -20, 15],
},
},
textStyle: {
color: "white", // 改变标示文字的颜色
fontSize: 13, //文字大小
},
},
labelLine: {
show: true, //数据标签引导线
normal: {
length: 20, // 改变标示线的长度
length2: 40,
lineStyle: {
color: "white", // 改变标示线的颜色
},
},
},
data: data.list,
},
// 内圈背景
// 外圈
{
type: "pie",
center: ["30%", "50%"],
radius: ["20%", "26%"],
center: ["50%", "50%"],
radius: ["50%", "82%"],
hoverAnimation: false,
clockWise: false,
itemStyle: {
@ -114,126 +128,126 @@ const getOption = () => {
],
};
};
let option = {
legend: {
bottom: 10,
left: "center",
data: ["CityA", "CityB", "CityD", "CityC", "CityE"],
},
tooltip: {
trigger: "item",
},
series: [
// 外圈背景
{
type: "pie",
center: ["50%", "50%"],
radius: ["50%", "82%"],
hoverAnimation: false,
clockWise: false,
itemStyle: {
normal: {
borderWidth: 1,
borderColor: "rgba(193, 229, 255, .1)",
color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
{
offset: 1,
color: "rgba(127, 242, 255, .2)",
},
{
offset: 0,
color: "rgba(109, 195, 255, 0)",
},
]),
},
},
tooltip: {
show: false,
},
label: {
show: false,
},
data: [100],
},
/*内心原型图，展示整体数据概览*/
{
name: "城镇",
type: "pie",
roundCap: true,
clockWise: true,
startAngle: 180,
labelLine: {
show: true, //数据标签引导线
// length: 30,
lineStyle: {
width: 1,
type: "solid",
color: "#fffdef",
},
},
label: {
//文字部分 显示内容为{b}：{c}可以换自己像显示的
//最外面的{a|}必要，不然位置有偏差，可以根据rich a微调
//{hr|}为圆点显示内容
formatter: "{a|{b}：{c}}\n{hr|}",
//折线图文字颜色
color: "#fffdef",
rich: {
//圆点位置大小配置
hr: {
//auto自定义
backgroundColor: "auto",
borderRadius: 3,
width: 3,
height: 3,
padding: [3, 3, 0, -12],
},
a: {
padding: [-12, 10, -20, 15],
},
},
},
radius: ["30%", "60%"],
hoverAnimation: false,
center: ["50%", "50%"],
data: [
{ value: 44, name: "副高级" },
{ value: 44, name: "正高级" },
{ value: 44, name: "未定级" },
{ value: 44, name: "员级" },
{ value: 41, name: "中级" },
{ value: 30, name: "助理级" },
],
},
// let option = {
// legend: {
// bottom: 10,
// left: "center",
// data: ["CityA", "CityB", "CityD", "CityC", "CityE"],
// },
// tooltip: {
// trigger: "item",
// },
// series: [
// // 外圈背景
// {
// name: "外边框",
// type: "pie",
// clockWise: false, //顺时加载
// hoverAnimation: false, //鼠标移入变大
// center: ["50%", "50%"],
// radius: ["75%", "75%"],
// label: {
// normal: {
// show: false,
// },
// },
// data: [
// {
// value: 9,
// name: "",
// radius: ["50%", "82%"],
// hoverAnimation: false,
// clockWise: false,
// itemStyle: {
// normal: {
// borderWidth: 2,
// borderColor: "#61bad3",
// borderWidth: 1,
// borderColor: "rgba(193, 229, 255, .1)",
// color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
// {
// offset: 1,
// color: "rgba(127, 242, 255, .2)",
// },
// {
// offset: 0,
// color: "rgba(109, 195, 255, 0)",
// },
// ]),
// },
// },
// tooltip: {
// show: false,
// },
// label: {
// show: false,
// },
// data: [100],
// },
// /*内心原型图，展示整体数据概览*/
// {
// name: "城镇",
// type: "pie",
// roundCap: true,
// clockWise: true,
// startAngle: 180,
// labelLine: {
// show: true, //数据标签引导线
// // length: 30,
// lineStyle: {
// width: 1,
// type: "solid",
// color: "#fffdef",
// },
// },
// label: {
// //文字部分 显示内容为{b}：{c}可以换自己像显示的
// //最外面的{a|}必要，不然位置有偏差，可以根据rich a微调
// //{hr|}为圆点显示内容
// formatter: "{a|{b}：{c}}\n{hr|}",
// //折线图文字颜色
// color: "#fffdef",
// rich: {
// //圆点位置大小配置
// hr: {
// //auto自定义
// backgroundColor: "auto",
// borderRadius: 3,
// width: 3,
// height: 3,
// padding: [3, 3, 0, -12],
// },
// a: {
// padding: [-12, 10, -20, 15],
// },
// },
// },
// radius: ["30%", "60%"],
// center: ["50%", "50%"],
// hoverAnimation: false,
// data: [
// { value: 44, name: "副高级" },
// { value: 44, name: "正高级" },
// { value: 44, name: "未定级" },
// { value: 44, name: "员级" },
// { value: 41, name: "中级" },
// { value: 30, name: "助理级" },
// ],
// },
],
};
// // {
// // name: "外边框",
// // type: "pie",
// // clockWise: false, //顺时加载
// // hoverAnimation: false, //鼠标移入变大
// // center: ["50%", "50%"],
// // radius: ["75%", "75%"],
// // label: {
// // normal: {
// // show: false,
// // },
// // },
// // data: [
// // {
// // value: 9,
// // name: "",
// // itemStyle: {
// // normal: {
// // borderWidth: 2,
// // borderColor: "#61bad3",
// // },
// // },
// // },
// // ],
// // },
// ],
// };
const setChart = () => {
// Vue3中： 需要引入
@ -248,13 +262,20 @@ watch(
data.list = newVal;
getOption();
setChart();
console.log("学校", newVal, oldVal);
// console.log("学校", newVal, oldVal);
}
);
watch(
() => props.active,
(newVal, oldVal) => {
data.namea = newVal;
getOption();
setChart();
}
);
// 使用生命钩子
onMounted(() => {
console.log("学校11", props.list,props.active);
data.list = props.list;
data.namea = props.active;

2
src/view/echarts_education/pie.vue
View File

@ -1,7 +1,7 @@
<template>
<div
ref="chart"
style="width: 50%; height: calc(100% - 46px); min-height: 205px"
style="width: 50%;height: 280px"
></div>
</template>

2
src/view/echarts_education/pie1.vue
View File

@ -1,5 +1,5 @@
<template>
<div ref="chart" style="width: 50%; height:50%;min-height:205px;"></div>
<div ref="chart" style="width: 50%;height: 220px;"></div>
</template>
<script setup>

2
src/view/echarts_education/pie2.vue
View File

@ -1,5 +1,5 @@
<template>
<div ref="chart" style="width: 50%; height:50%;min-height:205px;"></div>
<div ref="chart" style="width: 50%;height: 220px;"></div>
</template>
<script setup>

2
src/view/echarts_education/pie3.vue
View File

@ -1,5 +1,5 @@
<template>
<div ref="chart" style="width: 50%; height: 50%;min-height:205px;"></div>
<div ref="chart" style="width: 50%; height: 220px;"></div>
</template>
<script setup>

2
src/view/echarts_education/pie4.vue
View File

@ -1,5 +1,5 @@
<template>
<div ref="chart" style="width: 50%; height: 50%;min-height:205px;"></div>
<div ref="chart" style="width: 50%;height: 220px;"></div>
</template>
<script setup>

2
src/view/echarts_education/pieRose.vue
View File

@ -1,5 +1,5 @@
<template>
<div ref="chart" style="width: 100%; height:calc(100% - 126px);min-height:205px;"></div>
<div ref="chart" style="width: 100%; height:370px;"></div>
</template>
<script setup>

2
src/view/echarts_yl/eP2.vue
View File

@ -1,5 +1,5 @@
<template>
<div ref="chart" style="width: 100%; height: calc(100% - 46px);min-height:205px;"></div>
<div ref="chart" style="width: 100%; height:250px;"></div>
</template>
<script setup >

2
src/view/echarts_yl/eP3.vue
View File

@ -1,5 +1,5 @@
<template>
<div ref="chart" style="width: 100%; height: calc(100% - 46px);min-height:205px;"></div>
<div ref="chart" style="width: 100%; height:300px;"></div>
</template>
<script setup >

2
src/view/echarts_yl/pie.vue
View File

@ -1,5 +1,5 @@
<template>
<div ref="chart" style="width: 100%; height: calc(100% - 46px);min-height:205px;"></div>
<div ref="chart" style="width: 100%; height:250px;"></div>
</template>
<script setup >

8
src/view/education.vue
View File

@ -105,7 +105,6 @@
<div
style="
width: 100%;
height: calc(100% - 46px);
display: flex;
flex-wrap: wrap;
"
@ -883,7 +882,8 @@ onBeforeMount(() => {
.czr-bj {
width: 529px;
height: calc(100% - 26px);
// height: calc(100% - 26px);
// height: 200px;
background: rgba(0, 103, 165, 0.18);
box-shadow: inset 0px 0px 58px 0px rgba(37, 175, 252, 0.47);
border-radius: 2px;
@ -891,7 +891,7 @@ onBeforeMount(() => {
// box-sizing: border-box;
.czrBox {
height: 7vh;
height: 104px;
.column {
height: calc(100% - 26px);
overflow-y: auto;
@ -1065,7 +1065,7 @@ onBeforeMount(() => {
}
.rolling {
width: 100%;
height: 14vh;
height: 200px;
// height: calc(100% - 26px);
overflow-y: auto;
display: flex;