This commit is contained in:
duanxiaohai
parent
a3e1315885
commit
51b59a86ff
|
|
@ -41,7 +41,7 @@ const color = [
|
||||||
const option = {
|
const option = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: "axis",
|
trigger: "axis",
|
||||||
formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
|
formatter: "{b0}:{c0}",
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: "cross",
|
type: "cross",
|
||||||
label: {
|
label: {
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,119 @@
|
||||||
<template>
|
<template>
|
||||||
<div ref="chart" style="width: 100%; height: 50%; min-height: 205px"></div>
|
<div
|
||||||
|
ref="chart"
|
||||||
|
style="width: 100%; height: calc(100% - 126px); min-height: 205px"
|
||||||
|
></div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { onMounted, reactive, ref } from "vue";
|
import {
|
||||||
|
ref,
|
||||||
|
reactive,
|
||||||
|
onMounted,
|
||||||
|
watch,
|
||||||
|
defineProps,
|
||||||
|
onBeforeMount,
|
||||||
|
} from "vue";
|
||||||
// 局部引入echarts核心模块
|
// 局部引入echarts核心模块
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
list: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return [];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
active: {
|
||||||
|
type: String,
|
||||||
|
default: () => {
|
||||||
|
return [];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
const chart = ref(); // 创建DOM引用
|
const chart = ref(); // 创建DOM引用
|
||||||
|
|
||||||
const datas = {
|
const data = reactive({
|
||||||
|
list: [],
|
||||||
|
option: {},
|
||||||
value: 18,
|
value: 18,
|
||||||
// text: "留 守 儿 童",
|
namea:'',
|
||||||
};
|
});
|
||||||
|
|
||||||
|
// const datas = {
|
||||||
|
// value: 18,
|
||||||
|
// };
|
||||||
|
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}%)",
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
/*内心原型图，展示整体数据概览*/
|
||||||
|
{
|
||||||
|
name: "测评分析",
|
||||||
|
type: "pie",
|
||||||
|
radius: ["20%", "70%"],
|
||||||
|
center: ["30%", "50%"],
|
||||||
|
roseType: "radius",
|
||||||
|
minShowLabelAngle: 30,
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
data: data.list,
|
||||||
|
},
|
||||||
|
// 内圈背景
|
||||||
|
{
|
||||||
|
type: "pie",
|
||||||
|
center: ["30%", "50%"],
|
||||||
|
radius: ["20%", "26%"],
|
||||||
|
hoverAnimation: false,
|
||||||
|
clockWise: false,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: "rgba(193, 229, 255, .1)",
|
||||||
|
color: "rgba(14, 59, 123, 0.60)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
data: [100],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
};
|
||||||
let option = {
|
let option = {
|
||||||
legend: {
|
legend: {
|
||||||
bottom: 10,
|
bottom: 10,
|
||||||
|
|
@ -21,7 +121,7 @@ let option = {
|
||||||
data: ["CityA", "CityB", "CityD", "CityC", "CityE"],
|
data: ["CityA", "CityB", "CityD", "CityC", "CityE"],
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item'
|
trigger: "item",
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
// 外圈背景
|
// 外圈背景
|
||||||
|
|
@ -57,84 +157,46 @@ let option = {
|
||||||
},
|
},
|
||||||
/*内心原型图，展示整体数据概览*/
|
/*内心原型图，展示整体数据概览*/
|
||||||
{
|
{
|
||||||
name: "pie",
|
name: "城镇",
|
||||||
type: "pie",
|
type: "pie",
|
||||||
roundCap: true,
|
roundCap: true,
|
||||||
clockWise: true,
|
clockWise: true,
|
||||||
startAngle: 180,
|
startAngle: 180,
|
||||||
labelLine: {
|
labelLine: {
|
||||||
show: false,
|
show: true, //数据标签引导线
|
||||||
|
// length: 30,
|
||||||
|
lineStyle: {
|
||||||
|
width: 1,
|
||||||
|
type: "solid",
|
||||||
|
color: "#fffdef",
|
||||||
},
|
},
|
||||||
radius: ["50%", "70%"],
|
},
|
||||||
|
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,
|
hoverAnimation: false,
|
||||||
center: ["50%", "50%"],
|
center: ["50%", "50%"],
|
||||||
data: [
|
data: [
|
||||||
// {
|
|
||||||
// value: datas.value,
|
|
||||||
// label: {
|
|
||||||
// normal: {
|
|
||||||
// // formatter: '{d}{cell|%}\n{text|' + datas.text + '}',
|
|
||||||
// position: "center",
|
|
||||||
// show: true,
|
|
||||||
// textStyle: {
|
|
||||||
// fontSize: "24",
|
|
||||||
// fontWeight: "normal",
|
|
||||||
// color: "#fff",
|
|
||||||
// lineHeight: 30,
|
|
||||||
// rich: {
|
|
||||||
// cell: {
|
|
||||||
// fontSize: "24",
|
|
||||||
// fontWeight: "normal",
|
|
||||||
// color: "#fff",
|
|
||||||
// },
|
|
||||||
// text: {
|
|
||||||
// fontSize: 16,
|
|
||||||
// fontFamily: "FZLanTingHeiS-L-GB",
|
|
||||||
// color: "#fff",
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// itemStyle: {
|
|
||||||
// normal: {
|
|
||||||
// color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
|
|
||||||
// {
|
|
||||||
// offset: 0,
|
|
||||||
// color: "rgba(0, 255, 250, 0.29)",
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// offset: 0.5,
|
|
||||||
// color: "rgba(0, 255, 250, 0.8)",
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// offset: 1,
|
|
||||||
// color: "rgba(0, 255, 250, 1)",
|
|
||||||
// },
|
|
||||||
// ]),
|
|
||||||
// shadowColor: "rgba(1,1,1,0.5)",
|
|
||||||
// shadowBlur: 1,
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// value: 100 - datas.value,
|
|
||||||
// name: "",
|
|
||||||
// itemStyle: {
|
|
||||||
// normal: {
|
|
||||||
// color: "#095b9b", // 未完成的圆环的颜色
|
|
||||||
// label: {
|
|
||||||
// show: false,
|
|
||||||
// },
|
|
||||||
// labelLine: {
|
|
||||||
// show: false,
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// emphasis: {
|
|
||||||
// color: "#095b9b", // 未完成的圆环的颜色
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
{ value: 44, name: "副高级" },
|
{ value: 44, name: "副高级" },
|
||||||
{ value: 44, name: "正高级" },
|
{ value: 44, name: "正高级" },
|
||||||
{ value: 44, name: "未定级" },
|
{ value: 44, name: "未定级" },
|
||||||
|
|
@ -143,24 +205,64 @@ let option = {
|
||||||
{ value: 30, 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 = () => {
|
||||||
onMounted(() => {
|
|
||||||
// 基于准备好的dom，初始化echarts实例
|
|
||||||
// var myChart = echarts.init(document.getElementById('main'));
|
|
||||||
// Vue3中： 需要引入
|
// Vue3中： 需要引入
|
||||||
var myChart = echarts.init(chart.value);
|
var myChart = echarts.init(chart.value);
|
||||||
|
|
||||||
// init(); // vue3.2没有this
|
|
||||||
// 使用刚指定的配置项和数据显示图表。
|
// 使用刚指定的配置项和数据显示图表。
|
||||||
myChart.setOption(option);
|
myChart.setOption(data.option);
|
||||||
|
};
|
||||||
|
|
||||||
// 单图表响应式: 跟随浏览器大小改变
|
watch(
|
||||||
// window.addEventListener("resize", () => {
|
() => props.list,
|
||||||
// myChart.resize();
|
(newVal, oldVal) => {
|
||||||
// });
|
data.list = newVal;
|
||||||
|
getOption();
|
||||||
|
setChart();
|
||||||
|
console.log("学校", newVal, oldVal);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// 使用生命钩子
|
||||||
|
onMounted(() => {
|
||||||
|
console.log("学校11", props.list,props.active);
|
||||||
|
data.list = props.list;
|
||||||
|
data.namea = props.active;
|
||||||
|
|
||||||
|
getOption();
|
||||||
|
setChart();
|
||||||
|
|
||||||
|
// var myChart = echarts.init(chart.value);
|
||||||
|
// myChart.setOption(option);
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -112,16 +112,25 @@
|
||||||
>
|
>
|
||||||
<edie></edie>
|
<edie></edie>
|
||||||
<div class="rating">
|
<div class="rating">
|
||||||
<edXX></edXX>
|
<edXX :list="selectData.list1" :active="selectData.active "></edXX>
|
||||||
<div class="ratingBtn">
|
<div class="ratingBtn">
|
||||||
<div class="onImg" id="img1">
|
<div
|
||||||
<span>城市</span>
|
class="onImg"
|
||||||
|
:class="{ ratingImg: selectData.active === '城市' }"
|
||||||
|
>
|
||||||
|
<span @click="ratingBtn('城市')">城市</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="onImg">
|
<div
|
||||||
<span>县镇</span>
|
class="onImg"
|
||||||
|
:class="{ ratingImg: selectData.active === '县镇' }"
|
||||||
|
>
|
||||||
|
<span @click="ratingBtn('县镇')">县镇</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="onImg">
|
<div
|
||||||
<span>农村</span>
|
class="onImg"
|
||||||
|
:class="{ ratingImg: selectData.active === '农村' }"
|
||||||
|
>
|
||||||
|
<span @click="ratingBtn('农村')">农村</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -259,6 +268,8 @@ const selectData = reactive({
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
list: [],
|
list: [],
|
||||||
|
active: "城市",
|
||||||
|
list1: [],
|
||||||
});
|
});
|
||||||
var roseData1 = ref([
|
var roseData1 = ref([
|
||||||
{
|
{
|
||||||
|
|
@ -326,6 +337,31 @@ var roseData3 = ref([
|
||||||
value: 78,
|
value: 78,
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
var schoolData = ref([
|
||||||
|
{ name: "副高级", value: 44 },
|
||||||
|
{ name: "正高级", value: 22 },
|
||||||
|
{ name: "未定级", value: 11 },
|
||||||
|
{ name: "员级", value: 12 },
|
||||||
|
{ name: "中级", value: 54 },
|
||||||
|
{ name: "助理级", value: 74 },
|
||||||
|
]);
|
||||||
|
var schoolData1 = ref([
|
||||||
|
{ name: "副高级", value: 11 },
|
||||||
|
{ name: "正高级", value: 22 },
|
||||||
|
{ name: "未定级", value: 11 },
|
||||||
|
{ name: "员级", value: 12 },
|
||||||
|
{ name: "中级", value: 22 },
|
||||||
|
{ name: "助理级", value: 74 },
|
||||||
|
]);
|
||||||
|
var schoolData2 = ref([
|
||||||
|
{ name: "副高级", value: 22 },
|
||||||
|
{ name: "正高级", value: 22 },
|
||||||
|
{ name: "未定级", value: 11 },
|
||||||
|
{ name: "员级", value: 33 },
|
||||||
|
{ name: "中级", value: 54 },
|
||||||
|
{ name: "助理级", value: 74 },
|
||||||
|
]);
|
||||||
|
|
||||||
const selectChange1 = () => {
|
const selectChange1 = () => {
|
||||||
if (selectData.value1 == "111") {
|
if (selectData.value1 == "111") {
|
||||||
selectData.list = roseData1.value;
|
selectData.list = roseData1.value;
|
||||||
|
|
@ -337,8 +373,25 @@ const selectChange1 = () => {
|
||||||
selectData.list = roseData1.value;
|
selectData.list = roseData1.value;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
const ratingBtn = (item) => {
|
||||||
|
selectData.active = item; // 设置当前选中的项目
|
||||||
|
switch (selectData.active) {
|
||||||
|
case "城市":
|
||||||
|
selectData.list1 = schoolData.value;
|
||||||
|
break;
|
||||||
|
case "县镇":
|
||||||
|
selectData.list1 = schoolData1.value;
|
||||||
|
break;
|
||||||
|
case "农村":
|
||||||
|
selectData.list1 = schoolData2.value;
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
onBeforeMount(() => {
|
onBeforeMount(() => {
|
||||||
selectData.list = roseData1.value;
|
selectData.list = roseData1.value;
|
||||||
|
selectData.list1 = schoolData.value;
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -1050,13 +1103,7 @@ onBeforeMount(() => {
|
||||||
.ratingBtn {
|
.ratingBtn {
|
||||||
display: flex;
|
display: flex;
|
||||||
// align-items: center;
|
// align-items: center;
|
||||||
.ratingImg {
|
|
||||||
width: 62px;
|
|
||||||
height: 29px;
|
|
||||||
background-image: url(@/assets/eduImg/jyImg18.png);
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
.onImg {
|
.onImg {
|
||||||
width: 62px;
|
width: 62px;
|
||||||
height: 29px;
|
height: 29px;
|
||||||
|
|
@ -1065,6 +1112,14 @@ onBeforeMount(() => {
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
cursor: pointer; /* 添加指针样式以指示可点击 */
|
cursor: pointer; /* 添加指针样式以指示可点击 */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ratingImg {
|
||||||
|
width: 62px;
|
||||||
|
height: 29px;
|
||||||
|
background-image: url(@/assets/eduImg/jyImg18.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
.onImg.active {
|
.onImg.active {
|
||||||
width: 62px;
|
width: 62px;
|
||||||
height: 29px;
|
height: 29px;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue