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

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>

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",
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: "助理级" },
],
},
// { // {
// name: "",
// type: "pie", // type: "pie",
// clockWise: false, //
// hoverAnimation: false, //
// center: ["50%", "50%"], // center: ["50%", "50%"],
// radius: ["75%", "75%"], // radius: ["50%", "82%"],
// label: { // hoverAnimation: false,
// normal: { // clockWise: false,
// show: false,
// },
// },
// data: [
// {
// value: 9,
// name: "",
// itemStyle: { // itemStyle: {
// normal: { // normal: {
// borderWidth: 1,
// borderWidth: 2, // borderColor: "rgba(193, 229, 255, .1)",
// borderColor: "#61bad3", // 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 = () => { 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;

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>

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>

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>

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>

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>

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>

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 >

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 >

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 >

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;