This commit is contained in:
duanxiaohai
parent
716144f4e8
commit
ef8b9f73cd
|
|
@ -3,10 +3,33 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import {
|
||||
onMounted,
|
||||
onBeforeMount,
|
||||
ref,
|
||||
reactive,
|
||||
defineProps,
|
||||
nextTick,
|
||||
} from "vue";
|
||||
// 局部引入echarts核心模块
|
||||
import * as echarts from "echarts";
|
||||
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
});
|
||||
const chart = ref(); // 创建DOM引用
|
||||
|
||||
const data = reactive({
|
||||
list: [],
|
||||
list1: [],
|
||||
option: {},
|
||||
});
|
||||
|
||||
// const data = [150, 230, 224, 218, 135, 147];
|
||||
const data1 = ["中职", "高中", "初中", "小学", "幼儿园", "特殊教育"];
|
||||
const data2 = [
|
||||
|
|
@ -18,176 +41,193 @@ const data2 = [
|
|||
"10000人",
|
||||
];
|
||||
|
||||
const newData2 = data2.map((item) => parseInt(item.replace("人", "")));
|
||||
const newMaxNumber = Math.max(...newData2) * 1.05;
|
||||
const setChart = () => {
|
||||
// Vue3中： 需要引入
|
||||
var myChart = echarts.init(chart.value);
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(data.option);
|
||||
};
|
||||
const setChart1 = () => {
|
||||
data.list1 = data.list.map((item) => `${item}人`);
|
||||
// const newData2 = data.list.map((item) => parseInt(item.replace("人", "")));
|
||||
// data.list1 = Math.max(...newData2) * 1.05;
|
||||
// const newMaxNumber = Math.max(...newData2) * 1.05;
|
||||
};
|
||||
|
||||
const option = {
|
||||
grid: {
|
||||
top: "6%",
|
||||
left: "9%",
|
||||
right: "10%",
|
||||
bottom: "0%",
|
||||
containLabel: false, //---grid 区域是否包含坐标轴的刻度标签
|
||||
},
|
||||
tooltip: {
|
||||
show: true, //---是否显示提示框,默认为true
|
||||
trigger: "axis",
|
||||
formatter: "{b0}:{c1}" + "人",
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "value",
|
||||
scale: false,
|
||||
max: newMaxNumber,
|
||||
axisLabel: {
|
||||
//坐标轴分割线
|
||||
show: false,
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
const getOption = () => {
|
||||
data.option = {
|
||||
grid: {
|
||||
top: "6%",
|
||||
left: "9%",
|
||||
right: "10%",
|
||||
bottom: "0%",
|
||||
containLabel: false, //---grid 区域是否包含坐标轴的刻度标签
|
||||
},
|
||||
tooltip: {
|
||||
show: true, //---是否显示提示框,默认为true
|
||||
trigger: "axis",
|
||||
formatter: "{b0}:{c1}" + "人",
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "value",
|
||||
scale: false,
|
||||
max: data.list,
|
||||
axisLabel: {
|
||||
//坐标轴分割线
|
||||
show: false,
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
//y轴线的颜色以及宽度
|
||||
show: false, // 取消x轴线
|
||||
},
|
||||
splitLine: {
|
||||
show: false, //---grid 区域中的分隔线
|
||||
},
|
||||
axisTick: {
|
||||
show: false, // 设置轴刻度不显示
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
//y轴线的颜色以及宽度
|
||||
show: false, // 取消x轴线
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "category",
|
||||
scale: true,
|
||||
// name: "时长/小时",
|
||||
// max: data.length,
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#ffffff",
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false, // 设置轴刻度不显示
|
||||
},
|
||||
axisLabel: {
|
||||
//y轴文字的配置
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
//分割线配置
|
||||
show: false,
|
||||
// lineStyle: {
|
||||
// color: "#ffffff",
|
||||
// width: 1,
|
||||
// type: "solid",
|
||||
// },
|
||||
},
|
||||
data: data1,
|
||||
},
|
||||
splitLine: {
|
||||
show: false, //---grid 区域中的分隔线
|
||||
{
|
||||
type: "category",
|
||||
show: true,
|
||||
position: "right",
|
||||
axisLine: {
|
||||
//---坐标轴 轴线
|
||||
show: false, // 取消轴线
|
||||
},
|
||||
axisLabel: {
|
||||
//---坐标轴 标签
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false, // 设置轴刻度不显示
|
||||
},
|
||||
data: data.list1,
|
||||
},
|
||||
axisTick: {
|
||||
show: false, // 设置轴刻度不显示
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "category",
|
||||
scale: true,
|
||||
// name: "时长/小时",
|
||||
// max: data.length,
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#ffffff",
|
||||
width: 1,
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: "bar",
|
||||
data: data.list.map(() => Math.max(...data.list) * 1.05), // 外阴影铺满整个柱状图
|
||||
// barGap: 0 /*多个并排柱子设置柱子之间的间距*/,
|
||||
yAxisIndex: 1,
|
||||
barWidth: 30, //外阴影背景宽
|
||||
silent: true, // 不响应事件
|
||||
itemStyle: {
|
||||
color: "rgba(0, 230, 255, 0.1)", //外阴影背景
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false, // 设置轴刻度不显示
|
||||
},
|
||||
axisLabel: {
|
||||
//y轴文字的配置
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
//分割线配置
|
||||
show: false,
|
||||
// lineStyle: {
|
||||
// color: "#ffffff",
|
||||
// width: 1,
|
||||
// type: "solid",
|
||||
// },
|
||||
},
|
||||
data: data1,
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
show: true,
|
||||
position: "right",
|
||||
axisLine: {
|
||||
//---坐标轴 轴线
|
||||
show: false, // 取消轴线
|
||||
},
|
||||
axisLabel: {
|
||||
//---坐标轴 标签
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false, // 设置轴刻度不显示
|
||||
},
|
||||
data: data2,
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: "bar",
|
||||
data: newData2.map(() => Math.max(...newData2) * 1.05), // 外阴影铺满整个柱状图
|
||||
// barGap: 0 /*多个并排柱子设置柱子之间的间距*/,
|
||||
yAxisIndex: 1,
|
||||
barWidth: 30, //外阴影背景宽
|
||||
silent: true, // 不响应事件
|
||||
itemStyle: {
|
||||
color: "rgba(0, 230, 255, 0.1)", //外阴影背景
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
data: newData2.map(() => Math.max(...newData2) * 1.02), // 外阴影铺满整个柱状图
|
||||
barWidth: 8, //外阴影背景宽
|
||||
silent: true, // 不响应事件
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// borderColor: "rgba(0, 183, 255, 1)",
|
||||
borderRadius: [0, 50, 50, 0], //圆角边框
|
||||
// color: "rgba(94, 178, 188, 0.3)", //外阴影背景
|
||||
{
|
||||
type: "bar",
|
||||
data: data.list.map(() => Math.max(...data.list) * 1.02), // 外阴影铺满整个柱状图
|
||||
barWidth: 8, //外阴影背景宽
|
||||
silent: true, // 不响应事件
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// borderColor: "rgba(0, 183, 255, 1)",
|
||||
borderRadius: [0, 50, 50, 0], //圆角边框
|
||||
// color: "rgba(94, 178, 188, 0.3)", //外阴影背景
|
||||
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: "rgba(94, 178, 188, 0)" },
|
||||
{ offset: 1, color: "rgba(94, 178, 188, 0.3)" },
|
||||
]),
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
data: newData2,
|
||||
barWidth: 7, //柱宽
|
||||
barGap: -1.1 /*多个并排柱子设置柱子之间的间距*/,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (params) {
|
||||
var colorList = [
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: "rgba(0, 230, 255, 0)" },
|
||||
{ offset: 0.5, color: "rgba(0, 230, 255, 0.5)" },
|
||||
{ offset: 1, color: "rgba(0, 230, 255, 1)" },
|
||||
]),
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: "rgba(0, 255, 208,0)" },
|
||||
{ offset: 0.5, color: "rgba(0, 255, 208,0.5)" },
|
||||
{ offset: 1, color: "rgba(0, 255, 208,1)" },
|
||||
]),
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: "rgba(255, 234, 90, 0)" },
|
||||
{ offset: 0.5, color: "rgba(255, 234, 90, 0.5)" },
|
||||
{ offset: 1, color: "rgba(255, 234, 90, 1)" },
|
||||
]),
|
||||
];
|
||||
return colorList[params.dataIndex % colorList.length];
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: "rgba(94, 178, 188, 0)" },
|
||||
{ offset: 1, color: "rgba(94, 178, 188, 0.3)" },
|
||||
]),
|
||||
},
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: 1000,
|
||||
color: "rgba(0,0,0,0)",
|
||||
shadowColor: "#00E6FF",
|
||||
backgroundColor: "rgba(0, 230, 255, 1)",
|
||||
position: ["99%", -0.4],
|
||||
shadowBlur: 6,
|
||||
{
|
||||
type: "bar",
|
||||
data: data.list,
|
||||
barWidth: 7, //柱宽
|
||||
barGap: -1.1 /*多个并排柱子设置柱子之间的间距*/,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (params) {
|
||||
var colorList = [
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: "rgba(0, 230, 255, 0)" },
|
||||
{ offset: 0.5, color: "rgba(0, 230, 255, 0.5)" },
|
||||
{ offset: 1, color: "rgba(0, 230, 255, 1)" },
|
||||
]),
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: "rgba(0, 255, 208,0)" },
|
||||
{ offset: 0.5, color: "rgba(0, 255, 208,0.5)" },
|
||||
{ offset: 1, color: "rgba(0, 255, 208,1)" },
|
||||
]),
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: "rgba(255, 234, 90, 0)" },
|
||||
{ offset: 0.5, color: "rgba(255, 234, 90, 0.5)" },
|
||||
{ offset: 1, color: "rgba(255, 234, 90, 1)" },
|
||||
]),
|
||||
];
|
||||
return colorList[params.dataIndex % colorList.length];
|
||||
},
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: 1000,
|
||||
color: "rgba(0,0,0,0)",
|
||||
shadowColor: "#00E6FF",
|
||||
backgroundColor: "rgba(0, 230, 255, 1)",
|
||||
position: ["99%", -0.4],
|
||||
shadowBlur: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
],
|
||||
};
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
var myChart = echarts.init(chart.value);
|
||||
myChart.setOption(option);
|
||||
// 使用生命钩子
|
||||
onBeforeMount(() => {
|
||||
setTimeout(() => {
|
||||
data.list = props.list;
|
||||
setChart1();
|
||||
getOption();
|
||||
setChart();
|
||||
}, 600);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -269,7 +269,7 @@ watch(
|
|||
data.list = newVal;
|
||||
getOption();
|
||||
setChart();
|
||||
// console.log("学校", newVal, oldVal);
|
||||
console.log("学校", newVal, oldVal);
|
||||
}
|
||||
);
|
||||
watch(
|
||||
|
|
@ -282,12 +282,13 @@ watch(
|
|||
);
|
||||
|
||||
// 使用生命钩子
|
||||
onMounted(() => {
|
||||
data.list = props.list;
|
||||
data.namea = props.active;
|
||||
|
||||
getOption();
|
||||
setChart();
|
||||
onBeforeMount(() => {
|
||||
setTimeout(() => {
|
||||
data.list = props.list;
|
||||
data.namea = props.active;
|
||||
getOption();
|
||||
setChart();
|
||||
}, 600);
|
||||
|
||||
// var myChart = echarts.init(chart.value);
|
||||
// myChart.setOption(option);
|
||||
|
|
|
|||
|
|
@ -1,187 +1,202 @@
|
|||
<template>
|
||||
<div
|
||||
ref="chart"
|
||||
style="width: 50%;height: 280px"
|
||||
></div>
|
||||
<div ref="chart" style="width: 50%; height: 280px"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import { onBeforeMount, onMounted, reactive, ref } from "vue";
|
||||
// 局部引入echarts核心模块
|
||||
import * as echarts from "echarts";
|
||||
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const chart = ref(); // 创建DOM引用
|
||||
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1}<br />{a2}:{c2} ",
|
||||
},
|
||||
legend: {
|
||||
top: "8%",
|
||||
right: "11%",
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: "#ccc",
|
||||
const data = reactive({
|
||||
list: [[], []],
|
||||
option: {},
|
||||
});
|
||||
const getOption = () => {
|
||||
data.option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: "1%",
|
||||
right: "10%",
|
||||
bottom: "0%",
|
||||
containLabel: true,
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
color: "#ccc",
|
||||
legend: {
|
||||
top: "8%",
|
||||
right: "11%",
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: "#ccc",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: "1%",
|
||||
right: "10%",
|
||||
bottom: "0%",
|
||||
containLabel: true,
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
color: "#ccc",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false, // 设置轴刻度不显示
|
||||
},
|
||||
data: ["小学", "初中", "高中"],
|
||||
},
|
||||
{
|
||||
axisTick: false,
|
||||
type: "category",
|
||||
data: ["小学", "初中", "高中"],
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false, // 设置轴刻度不显示
|
||||
},
|
||||
data: ["小学", "初中", "高中"],
|
||||
},
|
||||
{
|
||||
axisTick: false,
|
||||
type: "category",
|
||||
data: ["小学", "初中", "高中"],
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
],
|
||||
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(226, 226, 226, 0.3)",
|
||||
width: 1,
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(226, 226, 226, 0.3)",
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
color: "#ccc",
|
||||
},
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
color: "#ccc",
|
||||
{
|
||||
type: "value",
|
||||
min: 0,
|
||||
max: 100,
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
type: "solid",
|
||||
color: "rgb(221, 242, 255,0.1)",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
type: "dotted",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
fontSize: 14,
|
||||
fontFamily: "MicrosoftYaHei",
|
||||
color: "#DEF1FF",
|
||||
lineHeight: 19,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
min: 0,
|
||||
max: 100,
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
type: "solid",
|
||||
color: "rgb(221, 242, 255,0.1)",
|
||||
],
|
||||
series: [
|
||||
// {
|
||||
// name: "城市",
|
||||
// type: "bar",
|
||||
// data: [2.0, 4.9, 7.0],
|
||||
// barWidth: "18%",
|
||||
// itemStyle: {
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "rgba(142, 187, 255, 1)",
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "rgba(142, 187, 255, 0.20)",
|
||||
// },
|
||||
// ]),
|
||||
// },
|
||||
// },
|
||||
{
|
||||
name: "县镇",
|
||||
type: "bar",
|
||||
data: data.list[1],
|
||||
barWidth: "18%",
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(23, 136, 255, 1)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(23, 136, 255, 0.20)",
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
type: "dotted",
|
||||
{
|
||||
name: "农村",
|
||||
type: "bar",
|
||||
data: data.list[0],
|
||||
barWidth: "18%",
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(23, 237, 255, 1)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(23, 237, 255, 0.20)",
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
fontSize: 14,
|
||||
fontFamily: "MicrosoftYaHei",
|
||||
color: "#DEF1FF",
|
||||
lineHeight: 19,
|
||||
{
|
||||
type: "bar",
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
color: "rgba(221, 242, 255, 0.1)",
|
||||
},
|
||||
data: ["2019", "2020", "2021"].map(() => 100),
|
||||
barWidth: 70,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "城市",
|
||||
type: "bar",
|
||||
data: [2.0, 4.9, 7.0],
|
||||
barWidth: "18%",
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(142, 187, 255, 1)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(142, 187, 255, 0.20)",
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "县镇",
|
||||
type: "bar",
|
||||
data: [2.6, 5.9, 9.0],
|
||||
barWidth: "18%",
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(23, 136, 255, 1)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(23, 136, 255, 0.20)",
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "农村",
|
||||
type: "bar",
|
||||
data: [2.6, 5.9, 9.0],
|
||||
barWidth: "18%",
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(23, 237, 255, 1)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(23, 237, 255, 0.20)",
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
color: "rgba(221, 242, 255, 0.1)",
|
||||
},
|
||||
data: ["2019", "2020", "2021"].map(() => 100),
|
||||
barWidth: 70,
|
||||
},
|
||||
],
|
||||
],
|
||||
};
|
||||
};
|
||||
|
||||
// 使用生命钩子
|
||||
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);
|
||||
|
||||
// 单图表响应式: 跟随浏览器大小改变
|
||||
// window.addEventListener("resize", () => {
|
||||
// myChart.resize();
|
||||
// });
|
||||
myChart.setOption(data.option);
|
||||
};
|
||||
// 使用生命钩子
|
||||
onBeforeMount(() => {
|
||||
setTimeout(() => {
|
||||
data.list = props.list;
|
||||
// data.list[0].push(data.list.ncxx.nccz);
|
||||
// data.list[0].push(data.list.ncxx.ncgz);
|
||||
// data.list[0].push(data.list.ncxx.ncxx);
|
||||
// data.list[1].push(data.list.xzxx.xzcz);
|
||||
// data.list[1].push(data.list.xzxx.xzgz);
|
||||
// data.list[1].push(data.list.xzxx.xzxx);
|
||||
getOption();
|
||||
setChart();
|
||||
}, 600);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="displayFlex left_bg">
|
||||
<div class="flex1">
|
||||
<div class="yd_title left_1"></div>
|
||||
<eP1></eP1>
|
||||
<eP1 :list="data.xsql"></eP1>
|
||||
<div class="t_1"></div>
|
||||
<div class="t_2">
|
||||
<div class="t_2_1" v-for="(item, index) in data.zdgz" :key="index">
|
||||
|
|
@ -19,15 +19,33 @@
|
|||
<div class="yd_title left_2"></div>
|
||||
<div class="selectLint">
|
||||
<div class="selectBox">
|
||||
<el-select v-model="selectData.value1" placeholder="请选择" size="large" @change="selectChange1">
|
||||
<el-option v-for="item in selectData.options1" :key="item.value" :label="item.label"
|
||||
:value="item.value" />
|
||||
<el-select
|
||||
v-model="selectData.value1"
|
||||
placeholder="请选择"
|
||||
size="large"
|
||||
@change="selectChange1"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in selectData.options1"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="selectBox">
|
||||
<el-select v-model="selectData.value2" placeholder="请选择" size="large" @change="selectChange1">
|
||||
<el-option v-for="item in selectData.options2" :key="item.value" :label="item.label"
|
||||
:value="item.value" />
|
||||
<el-select
|
||||
v-model="selectData.value2"
|
||||
placeholder="请选择"
|
||||
size="large"
|
||||
@change="selectChange1"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in selectData.options2"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -44,38 +62,47 @@
|
|||
<span class="schoola1">学校总数</span>
|
||||
</div>
|
||||
<div class="schoola">
|
||||
<span>{{ data.xxgk.xszs }}</span> <span class="schoola1">学生总数</span>
|
||||
<span>{{ data.xxgk.xszs }}</span>
|
||||
<span class="schoola1">学生总数</span>
|
||||
</div>
|
||||
<div class="schoola">
|
||||
<span>{{ data.xxgk.bjzs }}</span> <span class="schoola1">班级总数</span>
|
||||
<span>{{ data.xxgk.bjzs }}</span>
|
||||
<span class="schoola1">班级总数</span>
|
||||
</div>
|
||||
<div class="schoola">
|
||||
<span>{{ data.xxgk.jzgzs }}</span> <span class="schoola1">教职工总数</span>
|
||||
<span>{{ data.xxgk.jzgzs }}</span>
|
||||
<span class="schoola1">教职工总数</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="schoolb">
|
||||
<div class="grade">
|
||||
<div class="schoolbs">
|
||||
<span class="spot">初中</span> <span>{{ data.xxgk.czxxsl }}</span>
|
||||
<span class="spot">初中</span>
|
||||
<span>{{ data.xxgk.czxxsl }}</span>
|
||||
</div>
|
||||
<div class="schoolbs">
|
||||
<span class="spot">高中</span> <span>{{ data.xxgk.gzxxsl }}</span>
|
||||
<span class="spot">高中</span>
|
||||
<span>{{ data.xxgk.gzxxsl }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grade">
|
||||
<div class="schoolbs">
|
||||
<span class="spot">小学</span> <span>{{ data.xxgk.xxxxsl }}</span>
|
||||
<span class="spot">小学</span>
|
||||
<span>{{ data.xxgk.xxxxsl }}</span>
|
||||
</div>
|
||||
<div class="schoolbs">
|
||||
<span class="spot">中职</span> <span>{{ data.xxgk.zzxxsl }}</span>
|
||||
<span class="spot">中职</span>
|
||||
<span>{{ data.xxgk.zzxxsl }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grade grade1">
|
||||
<div class="schoolbs">
|
||||
<span class="spot">幼儿园</span> <span>{{ data.xxgk.yeyxxsl }}</span>
|
||||
<span class="spot">幼儿园</span>
|
||||
<span>{{ data.xxgk.yeyxxsl }}</span>
|
||||
</div>
|
||||
<div class="schoolbs">
|
||||
<span class="spot">特殊教育</span> <span>{{ data.xxgk.tsjyxxsl }}</span>
|
||||
<span class="spot">特殊教育</span>
|
||||
<span>{{ data.xxgk.tsjyxxsl }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -83,17 +110,23 @@
|
|||
</div>
|
||||
<div class="flex1">
|
||||
<div style="width: 100%; display: flex; flex-wrap: wrap">
|
||||
<edie></edie>
|
||||
<edie :list="data.xzncxxsl"></edie>
|
||||
<div class="rating">
|
||||
<edXX :list="selectData.list1" :active="selectData.active"></edXX>
|
||||
<edXX :list="data.schoolData" :active="selectData.active"></edXX>
|
||||
<div class="ratingBtn">
|
||||
<div class="onImg" :class="{ ratingImg: selectData.active === '城市' }">
|
||||
<!-- <div class="onImg" :class="{ ratingImg: selectData.active === '城市' }">
|
||||
<span @click="ratingBtn('城市')">城市</span>
|
||||
</div>
|
||||
<div class="onImg" :class="{ ratingImg: selectData.active === '县镇' }">
|
||||
</div> -->
|
||||
<div
|
||||
class="onImg"
|
||||
:class="{ ratingImg: selectData.active === '县镇' }"
|
||||
>
|
||||
<span @click="ratingBtn('县镇')">县镇</span>
|
||||
</div>
|
||||
<div class="onImg" :class="{ ratingImg: selectData.active === '农村' }">
|
||||
<div
|
||||
class="onImg"
|
||||
:class="{ ratingImg: selectData.active === '农村' }"
|
||||
>
|
||||
<span @click="ratingBtn('农村')">农村</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -108,10 +141,14 @@
|
|||
<span>资助金额</span>
|
||||
</div>
|
||||
<div class="rolling">
|
||||
<div v-for="(item, index) in 20" :key="index" class="fundingContent">
|
||||
<span class="spot">幼儿资助</span>
|
||||
<span class="spot">379人次</span>
|
||||
<span class="spot">70.88</span>
|
||||
<div
|
||||
v-for="(item, index) in data.zzxm"
|
||||
:key="index"
|
||||
class="fundingContent"
|
||||
>
|
||||
<span class="spot">{{ item.zzxm }}</span>
|
||||
<span class="spot">{{ item.zzsl }}</span>
|
||||
<span class="spot">{{ item.zzje }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -230,7 +267,7 @@ const selectData = reactive({
|
|||
},
|
||||
],
|
||||
list: [],
|
||||
active: "城市",
|
||||
active: "县镇",
|
||||
list1: [],
|
||||
});
|
||||
var roseData1 = ref([
|
||||
|
|
@ -338,14 +375,24 @@ const selectChange1 = () => {
|
|||
const ratingBtn = (item) => {
|
||||
selectData.active = item; // 设置当前选中的项目
|
||||
switch (selectData.active) {
|
||||
case "城市":
|
||||
selectData.list1 = schoolData.value;
|
||||
break;
|
||||
// case "城市":
|
||||
// selectData.list1 = schoolData.value;
|
||||
// break;
|
||||
case "县镇":
|
||||
selectData.list1 = schoolData1.value;
|
||||
data.schoolData[0].value = data.xzncjszcsl.xzjszcsl.xzfgj; //县镇复高级数量
|
||||
data.schoolData[1].value = data.xzncjszcsl.xzjszcsl.xzzgj; //县镇正高级数量
|
||||
data.schoolData[2].value = data.xzncjszcsl.xzjszcsl.xzwdj; //县镇未定级数量
|
||||
data.schoolData[3].value = data.xzncjszcsl.xzjszcsl.xzyj; //县镇员级数量
|
||||
data.schoolData[4].value = data.xzncjszcsl.xzjszcsl.xzzj; //县镇中级数量
|
||||
data.schoolData[5].value = data.xzncjszcsl.xzjszcsl.xzzlj; //县镇助理级数量
|
||||
break;
|
||||
case "农村":
|
||||
selectData.list1 = schoolData2.value;
|
||||
data.schoolData[0].value = data.xzncjszcsl.ncjszcsl.ncfgj; //县镇正高级数量
|
||||
data.schoolData[1].value = data.xzncjszcsl.ncjszcsl.nczgj; //县镇正高级数量
|
||||
data.schoolData[2].value = data.xzncjszcsl.ncjszcsl.ncwdj; //县镇中级数量
|
||||
data.schoolData[3].value = data.xzncjszcsl.ncjszcsl.nczlj; //县镇助理级数量
|
||||
data.schoolData[4].value = data.xzncjszcsl.ncjszcsl.ncyj; //县镇员级数量
|
||||
data.schoolData[5].value = data.xzncjszcsl.ncjszcsl.ncwdj; //县镇未定级数量
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
|
|
@ -375,26 +422,50 @@ const data = reactive({
|
|||
cls: "left4",
|
||||
},
|
||||
],
|
||||
xxgk: {}
|
||||
})
|
||||
onBeforeMount(() => {
|
||||
selectData.list = roseData1.value;
|
||||
selectData.list1 = schoolData.value;
|
||||
http.get("/api/ggfwyth/education").then((res) => {
|
||||
xxgk: {},
|
||||
xzncjszcsl: [],
|
||||
xzncxxsl: [[], []],
|
||||
zzxm: [],
|
||||
schoolData: [
|
||||
{ name: "副高级", value: "" },
|
||||
{ name: "正高级", value: "" },
|
||||
{ name: "未定级", value: "" },
|
||||
{ name: "员级", value: "" },
|
||||
{ name: "中级", value: "" },
|
||||
{ name: "助理级", value: "" },
|
||||
],
|
||||
});
|
||||
const getData = async () => {
|
||||
await http.get("/api/ggfwyth/education").then((res) => {
|
||||
if (res.code == 200) {
|
||||
data.xsql.push(res.data.xssl.zz)
|
||||
data.xsql.push(res.data.xssl.gz)
|
||||
data.xsql.push(res.data.xssl.cz)
|
||||
data.xsql.push(res.data.xssl.xx)
|
||||
data.xsql.push(res.data.xssl.yey)
|
||||
data.xsql.push(res.data.xssl.tsjy)
|
||||
data.zdgz[0].value = res.data.zdgz.lset
|
||||
data.zdgz[1].value = res.data.zdgz.dszn
|
||||
data.zdgz[2].value = res.data.zdgz.dqjt
|
||||
data.zdgz[3].value = res.data.zdgz.xsdb
|
||||
data.xxgk = res.data.xxgk
|
||||
data.xsql.push(res.data.xssl.zz);
|
||||
data.xsql.push(res.data.xssl.gz);
|
||||
data.xsql.push(res.data.xssl.cz);
|
||||
data.xsql.push(res.data.xssl.xx);
|
||||
data.xsql.push(res.data.xssl.yey);
|
||||
data.xsql.push(res.data.xssl.tsjy);
|
||||
data.zdgz[0].value = res.data.zdgz.lset;
|
||||
data.zdgz[1].value = res.data.zdgz.dszn;
|
||||
data.zdgz[2].value = res.data.zdgz.dqjt;
|
||||
data.zdgz[3].value = res.data.zdgz.xsdb;
|
||||
data.xxgk = res.data.xxgk;
|
||||
|
||||
data.xzncjszcsl = res.data.xzncjszcsl;
|
||||
data.xzncxxsl[0].push(res.data.xzncxxsl.ncxx.ncxx);
|
||||
data.xzncxxsl[0].push(res.data.xzncxxsl.ncxx.nccz);
|
||||
data.xzncxxsl[0].push(res.data.xzncxxsl.ncxx.ncgz);
|
||||
data.xzncxxsl[1].push(res.data.xzncxxsl.xzxx.xzxx);
|
||||
data.xzncxxsl[1].push(res.data.xzncxxsl.xzxx.xzcz);
|
||||
data.xzncxxsl[1].push(res.data.xzncxxsl.xzxx.xzgz);
|
||||
data.zzxm = res.data.zzxm;
|
||||
ratingBtn("县镇");
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onBeforeMount(async () => {
|
||||
selectData.list = roseData1.value;
|
||||
getData();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -1103,8 +1174,8 @@ onBeforeMount(() => {
|
|||
justify-content: space-around;
|
||||
margin-top: 10px;
|
||||
width: 93.2%;
|
||||
height: 34px;
|
||||
padding: 6px 0;
|
||||
min-height: 34px;
|
||||
padding: 8px 0;
|
||||
box-sizing: border-box;
|
||||
background-image: url(@/assets/eduImg/jyImg16.png);
|
||||
|
||||
|
|
@ -1116,6 +1187,8 @@ onBeforeMount(() => {
|
|||
letter-spacing: 3px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
width: 33%;
|
||||
padding-left: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -258,6 +258,7 @@ const data = reactive({
|
|||
onBeforeMount(() => {
|
||||
getData();
|
||||
});
|
||||
|
||||
const getData = () => {
|
||||
http.get("/api/ggfwyth/yl").then((res) => {
|
||||
if (res.code == 200) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue