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> <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> </template>
<script setup> <script setup>

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,5 +1,5 @@
<template> <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> </template>
<script setup> <script setup>

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

@ -1,5 +1,5 @@
<template> <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> </template>
<script setup > <script setup >

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

@ -1,5 +1,5 @@
<template> <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> </template>
<script setup > <script setup >

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

@ -1,5 +1,5 @@
<template> <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> </template>
<script setup > <script setup >

8
src/view/education.vue
View File

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