This commit is contained in:
parent
186ec353ac
commit
43792552b0
|
@ -12,6 +12,7 @@
|
|||
"echarts": "^5.4.2",
|
||||
"echarts-gl": "^2.0.9",
|
||||
"echarts-liquidfill": "^3.1.0",
|
||||
"element-plus": "^2.7.0",
|
||||
"sass": "^1.60.0",
|
||||
"vue": "^3.2.47",
|
||||
"vue-router": "^4.1.6"
|
||||
|
|
|
@ -3,6 +3,8 @@ import './style.css'
|
|||
import App from './App.vue'
|
||||
// 引入路由
|
||||
import router from "./router";
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
|
||||
|
||||
createApp(App).use(router).mount('#app')
|
||||
createApp(App).use(router).use(ElementPlus).mount('#app')
|
||||
|
|
|
@ -0,0 +1,149 @@
|
|||
<template>
|
||||
<div ref="chart" style="width: 50%; height:50%;min-height:205px;"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
// 局部引入echarts核心模块
|
||||
import * as echarts from "echarts";
|
||||
|
||||
const chart = ref(); // 创建DOM引用
|
||||
|
||||
const datas = {
|
||||
value: 18,
|
||||
text: "留 守 儿 童"
|
||||
}
|
||||
|
||||
let option = {
|
||||
series: [
|
||||
// 外圈背景
|
||||
{
|
||||
type: "pie",
|
||||
center: ["60%", "55%"],
|
||||
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: 'pie',
|
||||
type: 'pie',
|
||||
roundCap: true,
|
||||
clockWise: true,
|
||||
startAngle: 180,
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
radius: ['50%', '70%'],
|
||||
hoverAnimation: false,
|
||||
center: ['60%', '55%'],
|
||||
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' // 未完成的圆环的颜色
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 使用生命钩子
|
||||
onMounted(() => {
|
||||
// 基于准备好的dom,初始化echarts实例
|
||||
// var myChart = echarts.init(document.getElementById('main'));
|
||||
// Vue3中: 需要引入
|
||||
var myChart = echarts.init(chart.value);
|
||||
|
||||
// init(); // vue3.2没有this
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option);
|
||||
|
||||
// 单图表响应式: 跟随浏览器大小改变
|
||||
// window.addEventListener("resize", () => {
|
||||
// myChart.resize();
|
||||
// });
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
|
@ -0,0 +1,145 @@
|
|||
<template>
|
||||
<div ref="chart" style="width: 50%; height:50%;min-height:205px;"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
// 局部引入echarts核心模块
|
||||
import * as echarts from "echarts";
|
||||
|
||||
const chart = ref(); // 创建DOM引用
|
||||
|
||||
const datas = {
|
||||
value: 38,
|
||||
text: "单 亲 家 庭"
|
||||
}
|
||||
|
||||
let option = {
|
||||
series: [
|
||||
// 外圈背景
|
||||
{
|
||||
type: "pie",
|
||||
center: ["40%", "55%"],
|
||||
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: 'pie',
|
||||
type: 'pie',
|
||||
roundCap: true,
|
||||
clockWise: true,
|
||||
startAngle: 180,
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
radius: ['50%', '70%'],
|
||||
hoverAnimation: false,
|
||||
center: ['40%', '55%'],
|
||||
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, 0, 1, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(0, 255, 134, 0.29)'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(0, 255, 134, 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' // 未完成的圆环的颜色
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 使用生命钩子
|
||||
onMounted(() => {
|
||||
// 基于准备好的dom,初始化echarts实例
|
||||
// var myChart = echarts.init(document.getElementById('main'));
|
||||
// Vue3中: 需要引入
|
||||
var myChart = echarts.init(chart.value);
|
||||
|
||||
// init(); // vue3.2没有this
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option);
|
||||
|
||||
// 单图表响应式: 跟随浏览器大小改变
|
||||
// window.addEventListener("resize", () => {
|
||||
// myChart.resize();
|
||||
// });
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
|
@ -0,0 +1,145 @@
|
|||
<template>
|
||||
<div ref="chart" style="width: 50%; height: 50%;min-height:205px;"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
// 局部引入echarts核心模块
|
||||
import * as echarts from "echarts";
|
||||
|
||||
const chart = ref(); // 创建DOM引用
|
||||
|
||||
const datas = {
|
||||
value: 65.1,
|
||||
text: "独 生 子 女"
|
||||
}
|
||||
|
||||
let option = {
|
||||
series: [
|
||||
// 外圈背景
|
||||
{
|
||||
type: "pie",
|
||||
center: ["60%", "45%"],
|
||||
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: 'pie',
|
||||
type: 'pie',
|
||||
roundCap: true,
|
||||
clockWise: true,
|
||||
startAngle: 180,
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
radius: ['50%', '70%'],
|
||||
hoverAnimation: false,
|
||||
center: ['60%', '45%'],
|
||||
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(255, 224, 0, 0.29)'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(255, 224, 0, 1)'
|
||||
}]),
|
||||
shadowColor: 'rgba(1,1,1,0.5)',
|
||||
shadowBlur: 1
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 100 - datas.value,
|
||||
name: '',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(255, 224, 0, 0.1)', // 未完成的圆环的颜色
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
color: 'rgba(255, 224, 0, 0.1)' // 未完成的圆环的颜色
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 使用生命钩子
|
||||
onMounted(() => {
|
||||
// 基于准备好的dom,初始化echarts实例
|
||||
// var myChart = echarts.init(document.getElementById('main'));
|
||||
// Vue3中: 需要引入
|
||||
var myChart = echarts.init(chart.value);
|
||||
|
||||
// init(); // vue3.2没有this
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option);
|
||||
|
||||
// 单图表响应式: 跟随浏览器大小改变
|
||||
// window.addEventListener("resize", () => {
|
||||
// myChart.resize();
|
||||
// });
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
|
@ -0,0 +1,145 @@
|
|||
<template>
|
||||
<div ref="chart" style="width: 50%; height: 50%;min-height:205px;"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
// 局部引入echarts核心模块
|
||||
import * as echarts from "echarts";
|
||||
|
||||
const chart = ref(); // 创建DOM引用
|
||||
|
||||
const datas = {
|
||||
value: 0.1,
|
||||
text: "享 受 低 保"
|
||||
}
|
||||
|
||||
let option = {
|
||||
series: [
|
||||
// 外圈背景
|
||||
{
|
||||
type: "pie",
|
||||
center: ["40%", "45%"],
|
||||
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: 'pie',
|
||||
type: 'pie',
|
||||
roundCap: true,
|
||||
clockWise: true,
|
||||
startAngle: 180,
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
radius: ['50%', '70%'],
|
||||
hoverAnimation: false,
|
||||
center: ['40%', '45%'],
|
||||
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(254, 135, 98, 0.29)'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(254, 135, 98, 1)'
|
||||
}]),
|
||||
shadowColor: 'rgba(1,1,1,0.5)',
|
||||
shadowBlur: 1
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 100 - datas.value,
|
||||
name: '',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(254, 135, 98, 0.1)', // 未完成的圆环的颜色
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
color: 'rgba(254, 135, 98, 0.1)' // 未完成的圆环的颜色
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 使用生命钩子
|
||||
onMounted(() => {
|
||||
// 基于准备好的dom,初始化echarts实例
|
||||
// var myChart = echarts.init(document.getElementById('main'));
|
||||
// Vue3中: 需要引入
|
||||
var myChart = echarts.init(chart.value);
|
||||
|
||||
// init(); // vue3.2没有this
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option);
|
||||
|
||||
// 单图表响应式: 跟随浏览器大小改变
|
||||
// window.addEventListener("resize", () => {
|
||||
// myChart.resize();
|
||||
// });
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
|
@ -0,0 +1,118 @@
|
|||
<template>
|
||||
<div ref="chart" style="width: 100%; height:calc(100% - 126px);min-height:205px;"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
// 局部引入echarts核心模块
|
||||
import * as echarts from "echarts";
|
||||
|
||||
const chart = ref(); // 创建DOM引用
|
||||
|
||||
var data = [
|
||||
{
|
||||
name: '农业专业合作社',
|
||||
value: 7
|
||||
},
|
||||
{
|
||||
name: '农业企业',
|
||||
value: 6
|
||||
},
|
||||
{
|
||||
name: '农业冷藏冷库',
|
||||
value: 14
|
||||
},
|
||||
{
|
||||
name: '农业园区',
|
||||
value: 4
|
||||
}
|
||||
];
|
||||
|
||||
let option = {
|
||||
series: [
|
||||
// 内圈背景
|
||||
{
|
||||
type: "pie",
|
||||
center: ["50%", "50%"],
|
||||
radius: ["20%", "32%"],
|
||||
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',
|
||||
radius: ['20%', '50%'],
|
||||
center: ['35%', '50%'],
|
||||
roseType: 'radius',
|
||||
minShowLabelAngle: 60,
|
||||
label: {
|
||||
show: true,
|
||||
normal: {
|
||||
position: 'outside',
|
||||
fontSize: 16,
|
||||
formatter: (params) => {
|
||||
return (
|
||||
params.name +
|
||||
// '(' +
|
||||
// ((params.value / total) * 100).toFixed(2) +
|
||||
// '%)' +
|
||||
// '\n' +
|
||||
params.value +
|
||||
'个'
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
length: 1,
|
||||
length2: 10,
|
||||
smooth: true
|
||||
},
|
||||
data: data
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 使用生命钩子
|
||||
onMounted(() => {
|
||||
// 基于准备好的dom,初始化echarts实例
|
||||
// var myChart = echarts.init(document.getElementById('main'));
|
||||
// Vue3中: 需要引入
|
||||
var myChart = echarts.init(chart.value);
|
||||
|
||||
// init(); // vue3.2没有this
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option);
|
||||
|
||||
// 单图表响应式: 跟随浏览器大小改变
|
||||
// window.addEventListener("resize", () => {
|
||||
// myChart.resize();
|
||||
// });
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
|
@ -3,11 +3,28 @@
|
|||
<div class="displayFlex left_bg">
|
||||
<div class="flex1">
|
||||
<div class="yd_title left_1"></div>
|
||||
<ePie></ePie>
|
||||
<div style="width: 100%; height:calc(100% - 46px);display: flex;flex-wrap:wrap;">
|
||||
<ePie1></ePie1>
|
||||
<ePie2></ePie2>
|
||||
<ePie3></ePie3>
|
||||
<ePie4></ePie4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex1">
|
||||
<div class="yd_title left_2"></div>
|
||||
|
||||
<div class="selectLint">
|
||||
<div class="selectBox">
|
||||
<el-select v-model="value" placeholder="Select" size="large">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="selectBox">
|
||||
<el-select v-model="value" placeholder="Select" size="large">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<ePieRose></ePieRose>
|
||||
</div>
|
||||
</div>
|
||||
<div class="displayFlex">
|
||||
|
@ -40,9 +57,38 @@
|
|||
|
||||
<script setup>
|
||||
import eBubble from "./echarts_education/bubble.vue";
|
||||
// import ePie from "./echarts/pie.vue";
|
||||
import ePie1 from "./echarts_education/pie1.vue";
|
||||
import ePie2 from "./echarts_education/pie2.vue";
|
||||
import ePie3 from "./echarts_education/pie3.vue";
|
||||
import ePie4 from "./echarts_education/pie4.vue";
|
||||
import ePieRose from "./echarts_education/pieRose.vue";
|
||||
// import ePie2 from "./echarts/pie2.vue";
|
||||
// import eGraph from "./echarts/graph.vue";
|
||||
import { ref } from 'vue'
|
||||
|
||||
const value = ref('')
|
||||
const options = [
|
||||
{
|
||||
value: 'Option1',
|
||||
label: 'Option1',
|
||||
},
|
||||
{
|
||||
value: 'Option2',
|
||||
label: 'Option2',
|
||||
},
|
||||
{
|
||||
value: 'Option3',
|
||||
label: 'Option3',
|
||||
},
|
||||
{
|
||||
value: 'Option4',
|
||||
label: 'Option4',
|
||||
},
|
||||
{
|
||||
value: 'Option5',
|
||||
label: 'Option5',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
@ -72,11 +118,13 @@ import eBubble from "./echarts_education/bubble.vue";
|
|||
// height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-left: 50px;
|
||||
padding-right: 20px;
|
||||
margin-right: 28px;
|
||||
background-image: url(@/assets/images/left_bg.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.right_bg {
|
||||
width: 642px;
|
||||
box-sizing: border-box;
|
||||
|
@ -87,21 +135,25 @@ import eBubble from "./echarts_education/bubble.vue";
|
|||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.left_1 {
|
||||
background-image: url(@/assets/eduImg/title1.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.left_2 {
|
||||
background-image: url(@/assets/eduImg/title2.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.center_1 {
|
||||
background-image: url(@/assets/eduImg/title3.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.right_1 {
|
||||
background-image: url(@/assets/eduImg/title4.png);
|
||||
background-repeat: no-repeat;
|
||||
|
@ -349,4 +401,42 @@ import eBubble from "./echarts_education/bubble.vue";
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.selectLint {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
margin: 30px 0 10px;
|
||||
justify-content: space-between;
|
||||
|
||||
.selectBox {
|
||||
width: 48%;
|
||||
background-image: url(@/assets/eduImg/title3.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.selectBox {
|
||||
.el-select--large .el-select__wrapper {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
.el-select__wrapper {
|
||||
background-color: rgba(255,255,255,0) !important;
|
||||
|
||||
}
|
||||
.el-select__placeholder{
|
||||
color: #fff !important;
|
||||
}
|
||||
.el-select__caret{
|
||||
color: #fff !important;
|
||||
font-size: 18px !important;
|
||||
}
|
||||
.el-select-dropdown__item{
|
||||
color: #fff !important;
|
||||
}
|
||||
.el-select-dropdown__wrap{
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
140
yarn.lock
140
yarn.lock
|
@ -7,6 +7,16 @@
|
|||
resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.21.3.tgz"
|
||||
integrity sha512-lobG0d7aOfQRXh8AyklEAgZGvA4FShxo6xQbUrrT/cNBPUdIDojlokwJsQyCC/eKia7ifqM0yP+2DRZ4WKw2RQ==
|
||||
|
||||
"@ctrl/tinycolor@^3.4.1":
|
||||
version "3.6.1"
|
||||
resolved "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz#b6c75a56a1947cc916ea058772d666a2c8932f31"
|
||||
integrity sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==
|
||||
|
||||
"@element-plus/icons-vue@^2.3.1":
|
||||
version "2.3.1"
|
||||
resolved "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz#1f635ad5fdd5c85ed936481525570e82b5a8307a"
|
||||
integrity sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==
|
||||
|
||||
"@esbuild/android-arm64@0.17.14":
|
||||
version "0.17.14"
|
||||
resolved "https://registry.npmmirror.com/@esbuild/android-arm64/-/android-arm64-0.17.14.tgz#4624cea3c8941c91f9e9c1228f550d23f1cef037"
|
||||
|
@ -117,6 +127,48 @@
|
|||
resolved "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.17.14.tgz"
|
||||
integrity sha512-gPQmsi2DKTaEgG14hc3CHXHp62k8g6qr0Pas+I4lUxRMugGSATh/Bi8Dgusoz9IQ0IfdrvLpco6kujEIBoaogA==
|
||||
|
||||
"@floating-ui/core@^1.0.0":
|
||||
version "1.6.0"
|
||||
resolved "https://registry.npmmirror.com/@floating-ui/core/-/core-1.6.0.tgz#fa41b87812a16bf123122bf945946bae3fdf7fc1"
|
||||
integrity sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==
|
||||
dependencies:
|
||||
"@floating-ui/utils" "^0.2.1"
|
||||
|
||||
"@floating-ui/dom@^1.0.1":
|
||||
version "1.6.3"
|
||||
resolved "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.6.3.tgz#954e46c1dd3ad48e49db9ada7218b0985cee75ef"
|
||||
integrity sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==
|
||||
dependencies:
|
||||
"@floating-ui/core" "^1.0.0"
|
||||
"@floating-ui/utils" "^0.2.0"
|
||||
|
||||
"@floating-ui/utils@^0.2.0", "@floating-ui/utils@^0.2.1":
|
||||
version "0.2.1"
|
||||
resolved "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.1.tgz#16308cea045f0fc777b6ff20a9f25474dd8293d2"
|
||||
integrity sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==
|
||||
|
||||
"@popperjs/core@npm:@sxzz/popperjs-es@^2.11.7":
|
||||
version "2.11.7"
|
||||
resolved "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz#a7f69e3665d3da9b115f9e71671dae1b97e13671"
|
||||
integrity sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==
|
||||
|
||||
"@types/lodash-es@^4.17.6":
|
||||
version "4.17.12"
|
||||
resolved "https://registry.npmmirror.com/@types/lodash-es/-/lodash-es-4.17.12.tgz#65f6d1e5f80539aa7cfbfc962de5def0cf4f341b"
|
||||
integrity sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==
|
||||
dependencies:
|
||||
"@types/lodash" "*"
|
||||
|
||||
"@types/lodash@*", "@types/lodash@^4.14.182":
|
||||
version "4.17.0"
|
||||
resolved "https://registry.npmmirror.com/@types/lodash/-/lodash-4.17.0.tgz#d774355e41f372d5350a4d0714abb48194a489c3"
|
||||
integrity sha512-t7dhREVv6dbNj0q17X12j7yDG4bD/DHYX7o5/DbDxobP0HnGPgpRz2Ej77aL7TZT3DSw13fqUTj8J4mMnqa7WA==
|
||||
|
||||
"@types/web-bluetooth@^0.0.16":
|
||||
version "0.0.16"
|
||||
resolved "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz#1d12873a8e49567371f2a75fe3e7f7edca6662d8"
|
||||
integrity sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==
|
||||
|
||||
"@vitejs/plugin-vue@^4.1.0":
|
||||
version "4.1.0"
|
||||
resolved "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.1.0.tgz"
|
||||
|
@ -217,6 +269,28 @@
|
|||
resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz"
|
||||
integrity sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==
|
||||
|
||||
"@vueuse/core@^9.1.0":
|
||||
version "9.13.0"
|
||||
resolved "https://registry.npmmirror.com/@vueuse/core/-/core-9.13.0.tgz#2f69e66d1905c1e4eebc249a01759cf88ea00cf4"
|
||||
integrity sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==
|
||||
dependencies:
|
||||
"@types/web-bluetooth" "^0.0.16"
|
||||
"@vueuse/metadata" "9.13.0"
|
||||
"@vueuse/shared" "9.13.0"
|
||||
vue-demi "*"
|
||||
|
||||
"@vueuse/metadata@9.13.0":
|
||||
version "9.13.0"
|
||||
resolved "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-9.13.0.tgz#bc25a6cdad1b1a93c36ce30191124da6520539ff"
|
||||
integrity sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==
|
||||
|
||||
"@vueuse/shared@9.13.0":
|
||||
version "9.13.0"
|
||||
resolved "https://registry.npmmirror.com/@vueuse/shared/-/shared-9.13.0.tgz#089ff4cc4e2e7a4015e57a8f32e4b39d096353b9"
|
||||
integrity sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==
|
||||
dependencies:
|
||||
vue-demi "*"
|
||||
|
||||
anymatch@~3.1.2:
|
||||
version "3.1.3"
|
||||
resolved "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.3.tgz"
|
||||
|
@ -225,6 +299,11 @@ anymatch@~3.1.2:
|
|||
normalize-path "^3.0.0"
|
||||
picomatch "^2.0.4"
|
||||
|
||||
async-validator@^4.2.5:
|
||||
version "4.2.5"
|
||||
resolved "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz#c96ea3332a521699d0afaaceed510a54656c6339"
|
||||
integrity sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==
|
||||
|
||||
binary-extensions@^2.0.0:
|
||||
version "2.2.0"
|
||||
resolved "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.2.0.tgz"
|
||||
|
@ -262,6 +341,11 @@ csstype@^2.6.8:
|
|||
resolved "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz"
|
||||
integrity sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==
|
||||
|
||||
dayjs@^1.11.3:
|
||||
version "1.11.10"
|
||||
resolved "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.10.tgz#68acea85317a6e164457d6d6947564029a6a16a0"
|
||||
integrity sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==
|
||||
|
||||
echarts-gl@^2.0.9:
|
||||
version "2.0.9"
|
||||
resolved "https://registry.npmmirror.com/echarts-gl/-/echarts-gl-2.0.9.tgz"
|
||||
|
@ -283,6 +367,27 @@ echarts@^5.4.2:
|
|||
tslib "2.3.0"
|
||||
zrender "5.4.3"
|
||||
|
||||
element-plus@^2.7.0:
|
||||
version "2.7.0"
|
||||
resolved "https://registry.npmmirror.com/element-plus/-/element-plus-2.7.0.tgz#1d72b06946c46a6f18e5315610b7f0147b8efb24"
|
||||
integrity sha512-WAiaFLavuWFxof9qwkC27jvkh9nRcNnB506g1vvJSiVaVqjCBWUFCIyJKeN11M1qcv2cS5VV5PfSLjTIkrw87A==
|
||||
dependencies:
|
||||
"@ctrl/tinycolor" "^3.4.1"
|
||||
"@element-plus/icons-vue" "^2.3.1"
|
||||
"@floating-ui/dom" "^1.0.1"
|
||||
"@popperjs/core" "npm:@sxzz/popperjs-es@^2.11.7"
|
||||
"@types/lodash" "^4.14.182"
|
||||
"@types/lodash-es" "^4.17.6"
|
||||
"@vueuse/core" "^9.1.0"
|
||||
async-validator "^4.2.5"
|
||||
dayjs "^1.11.3"
|
||||
escape-html "^1.0.3"
|
||||
lodash "^4.17.21"
|
||||
lodash-es "^4.17.21"
|
||||
lodash-unified "^1.0.2"
|
||||
memoize-one "^6.0.0"
|
||||
normalize-wheel-es "^1.2.0"
|
||||
|
||||
esbuild@^0.17.5:
|
||||
version "0.17.14"
|
||||
resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.17.14.tgz"
|
||||
|
@ -311,6 +416,11 @@ esbuild@^0.17.5:
|
|||
"@esbuild/win32-ia32" "0.17.14"
|
||||
"@esbuild/win32-x64" "0.17.14"
|
||||
|
||||
escape-html@^1.0.3:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.npmmirror.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
|
||||
integrity sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==
|
||||
|
||||
estree-walker@^2.0.2:
|
||||
version "2.0.2"
|
||||
resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz"
|
||||
|
@ -383,6 +493,21 @@ is-number@^7.0.0:
|
|||
resolved "https://registry.npmmirror.com/is-number/-/is-number-7.0.0.tgz"
|
||||
integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
|
||||
|
||||
lodash-es@^4.17.21:
|
||||
version "4.17.21"
|
||||
resolved "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
|
||||
integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
|
||||
|
||||
lodash-unified@^1.0.2:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.npmmirror.com/lodash-unified/-/lodash-unified-1.0.3.tgz#80b1eac10ed2eb02ed189f08614a29c27d07c894"
|
||||
integrity sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==
|
||||
|
||||
lodash@^4.17.21:
|
||||
version "4.17.21"
|
||||
resolved "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
|
||||
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
|
||||
|
||||
magic-string@^0.25.7:
|
||||
version "0.25.9"
|
||||
resolved "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz"
|
||||
|
@ -390,6 +515,11 @@ magic-string@^0.25.7:
|
|||
dependencies:
|
||||
sourcemap-codec "^1.4.8"
|
||||
|
||||
memoize-one@^6.0.0:
|
||||
version "6.0.0"
|
||||
resolved "https://registry.npmmirror.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045"
|
||||
integrity sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==
|
||||
|
||||
nanoid@^3.3.4:
|
||||
version "3.3.6"
|
||||
resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz"
|
||||
|
@ -400,6 +530,11 @@ normalize-path@^3.0.0, normalize-path@~3.0.0:
|
|||
resolved "https://registry.npmmirror.com/normalize-path/-/normalize-path-3.0.0.tgz"
|
||||
integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
|
||||
|
||||
normalize-wheel-es@^1.2.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.npmmirror.com/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz#0fa2593d619f7245a541652619105ab076acf09e"
|
||||
integrity sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==
|
||||
|
||||
path-parse@^1.0.7:
|
||||
version "1.0.7"
|
||||
resolved "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz"
|
||||
|
@ -500,6 +635,11 @@ vite@^4.2.0:
|
|||
optionalDependencies:
|
||||
fsevents "~2.3.2"
|
||||
|
||||
vue-demi@*:
|
||||
version "0.14.7"
|
||||
resolved "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.7.tgz#8317536b3ef74c5b09f268f7782e70194567d8f2"
|
||||
integrity sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==
|
||||
|
||||
vue-router@^4.1.6:
|
||||
version "4.1.6"
|
||||
resolved "https://registry.npmjs.org/vue-router/-/vue-router-4.1.6.tgz"
|
||||
|
|
Loading…
Reference in New Issue