This commit is contained in:
duanxiaohai
parent
a3e1315885
commit
51b59a86ff
|
|
@ -41,7 +41,7 @@ const color = [
|
|||
const option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
|
||||
formatter: "{b0}:{c0}",
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
label: {
|
||||
|
|
|
|||
|
|
@ -1,19 +1,119 @@
|
|||
<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>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
watch,
|
||||
defineProps,
|
||||
onBeforeMount,
|
||||
} from "vue";
|
||||
// 局部引入echarts核心模块
|
||||
import * as echarts from "echarts";
|
||||
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
active: {
|
||||
type: String,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const chart = ref(); // 创建DOM引用
|
||||
|
||||
const datas = {
|
||||
const data = reactive({
|
||||
list: [],
|
||||
option: {},
|
||||
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 = {
|
||||
legend: {
|
||||
bottom: 10,
|
||||
|
|
@ -21,7 +121,7 @@ let option = {
|
|||
data: ["CityA", "CityB", "CityD", "CityC", "CityE"],
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
trigger: "item",
|
||||
},
|
||||
series: [
|
||||
// 外圈背景
|
||||
|
|
@ -57,84 +157,46 @@ let option = {
|
|||
},
|
||||
/*内心原型图，展示整体数据概览*/
|
||||
{
|
||||
name: "pie",
|
||||
name: "城镇",
|
||||
type: "pie",
|
||||
roundCap: true,
|
||||
clockWise: true,
|
||||
startAngle: 180,
|
||||
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,
|
||||
center: ["50%", "50%"],
|
||||
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: "未定级" },
|
||||
|
|
@ -143,24 +205,64 @@ let option = {
|
|||
{ 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",
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
],
|
||||
};
|
||||
|
||||
// 使用生命钩子
|
||||
onMounted(() => {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
// var myChart = echarts.init(document.getElementById('main'));
|
||||
const setChart = () => {
|
||||
// Vue3中： 需要引入
|
||||
var myChart = echarts.init(chart.value);
|
||||
|
||||
// init(); // vue3.2没有this
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option);
|
||||
myChart.setOption(data.option);
|
||||
};
|
||||
|
||||
// 单图表响应式: 跟随浏览器大小改变
|
||||
// window.addEventListener("resize", () => {
|
||||
// myChart.resize();
|
||||
// });
|
||||
watch(
|
||||
() => props.list,
|
||||
(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>
|
||||
|
||||
|
|
|
|||
|
|
@ -112,16 +112,25 @@
|
|||
>
|
||||
<edie></edie>
|
||||
<div class="rating">
|
||||
<edXX></edXX>
|
||||
<edXX :list="selectData.list1" :active="selectData.active "></edXX>
|
||||
<div class="ratingBtn">
|
||||
<div class="onImg" id="img1">
|
||||
<span>城市</span>
|
||||
<div
|
||||
class="onImg"
|
||||
:class="{ ratingImg: selectData.active === '城市' }"
|
||||
>
|
||||
<span @click="ratingBtn('城市')">城市</span>
|
||||
</div>
|
||||
<div class="onImg">
|
||||
<span>县镇</span>
|
||||
<div
|
||||
class="onImg"
|
||||
:class="{ ratingImg: selectData.active === '县镇' }"
|
||||
>
|
||||
<span @click="ratingBtn('县镇')">县镇</span>
|
||||
</div>
|
||||
<div class="onImg">
|
||||
<span>农村</span>
|
||||
<div
|
||||
class="onImg"
|
||||
:class="{ ratingImg: selectData.active === '农村' }"
|
||||
>
|
||||
<span @click="ratingBtn('农村')">农村</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -259,6 +268,8 @@ const selectData = reactive({
|
|||
},
|
||||
],
|
||||
list: [],
|
||||
active: "城市",
|
||||
list1: [],
|
||||
});
|
||||
var roseData1 = ref([
|
||||
{
|
||||
|
|
@ -326,6 +337,31 @@ var roseData3 = ref([
|
|||
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 = () => {
|
||||
if (selectData.value1 == "111") {
|
||||
selectData.list = roseData1.value;
|
||||
|
|
@ -337,8 +373,25 @@ const selectChange1 = () => {
|
|||
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(() => {
|
||||
selectData.list = roseData1.value;
|
||||
selectData.list1 = schoolData.value;
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -1050,13 +1103,7 @@ onBeforeMount(() => {
|
|||
.ratingBtn {
|
||||
display: flex;
|
||||
// align-items: center;
|
||||
.ratingImg {
|
||||
width: 62px;
|
||||
height: 29px;
|
||||
background-image: url(@/assets/eduImg/jyImg18.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.onImg {
|
||||
width: 62px;
|
||||
height: 29px;
|
||||
|
|
@ -1065,6 +1112,14 @@ onBeforeMount(() => {
|
|||
background-size: 100% 100%;
|
||||
cursor: pointer; /* 添加指针样式以指示可点击 */
|
||||
}
|
||||
|
||||
.ratingImg {
|
||||
width: 62px;
|
||||
height: 29px;
|
||||
background-image: url(@/assets/eduImg/jyImg18.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.onImg.active {
|
||||
width: 62px;
|
||||
height: 29px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue