xiangshan
/
ggfwjsc
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1

This commit is contained in:
姚宇浩 2024-04-15 14:11:14 +08:00
parent 57a31691e3
commit abb01a1598
8 changed files with 170 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/left_bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 KiB

4
src/view/echarts/eP2.vue
View File

@ -1,5 +1,5 @@
<template>
<div ref="chart" style="width: 100%; height: 220px"></div>
<div ref="chart" style="width: 100%; height: 200px"></div>
</template>
<script setup >
@ -24,7 +24,7 @@ let option = {
},
grid: {
left: "1%",
right: "4%",
right: "10%",
bottom: "3%",
containLabel: true,
},

134
src/view/echarts/eP2_2.vue Normal file
View File

@ -0,0 +1,134 @@
<template>
<div ref="chart" style="width: 100%; height: 200px"></div>
</template>
<script setup >
import { onMounted, reactive, ref } from "vue";
// 局部引入echarts核心模块
import * as echarts from "echarts";
const chart = ref(); // 创建DOM引用
let option = {
tooltip: {
trigger: "axis",
},
legend: {
// data: ["80-90补贴人次", "90-98补贴人次", "99以上补贴人次"],
top: "8%",
right: "15%",
textStyle: {
fontSize: 12,
color: "#ccc",
},
},
grid: {
left: "1%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "category",
// boundaryGap: false,
data: ["1月", "2月", "3月", "4月", "5月"],
splitArea: {
show: true,
interval: '10',
areaStyle: {
color: ["rgba(255, 255, 255, 0.10)"],
width:10,
},
},
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "#ccc",
},
},
},
yAxis: {
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "rgba(226, 226, 226, 0.3)",
width: 1,
},
},
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "#ccc",
},
},
},
series: [
{
name: "80-90补贴人次",
type: "line",
stack: "Total",
symbol: "emptyCircle",
symbolSize: 10,
itemStyle: {
borderColor: "#00FCFF",
borderWidth: 1,
color: "#00FCFF",
},
data: [120, 132, 101, 134, 90],
},
{
name: "90-98补贴人次",
type: "line",
stack: "Total",
symbol: "emptyCircle",
symbolSize: 10,
itemStyle: {
borderColor: "#E8FF00",
borderWidth: 1,
color: "#E8FF00",
},
data: [220, 182, 191, 234, 290],
},
{
name: "99以上补贴人次",
type: "line",
stack: "Total",
symbol: "emptyCircle",
symbolSize: 10,
itemStyle: {
borderColor: "#2468FF",
borderWidth: 1,
color: "#2468FF",
},
data: [150, 232, 201, 154, 190],
},
],
};
// 使用生命钩子
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>

20
src/view/echarts/eP3.vue
View File

@ -1,5 +1,5 @@
<template>
<div ref="chart" style="width: 100%; height: 220px"></div>
<div ref="chart" style="width: 100%; height: 200px"></div>
</template>
<script setup >
@ -58,7 +58,7 @@ let option = {
},
series: [
{
name: "80-90补贴人次",
name: "特困补助金额",
type: "line",
stack: "Total",
symbol: "emptyCircle",
@ -71,23 +71,9 @@ let option = {
},
data: [120, 132, 101, 134, 90],
},
{
name: "90-98补贴人次",
type: "line",
stack: "Total",
symbol: "emptyCircle",
symbolSize: 10,
itemStyle: {
borderColor: "#E8FF00",
borderWidth: 1,
color: "#E8FF00",
},
data: [220, 182, 191, 234, 290],
},
{
name: "99以上补贴人次",
name: "低保补助金额",
type: "line",
stack: "Total",
symbol: "emptyCircle",

6
src/view/echarts/eP3_2.vue
View File

@ -1,5 +1,5 @@
<template>
<div ref="chart" style="width: 100%; height: 220px"></div>
<div ref="chart" style="width: 100%; height: 200px"></div>
</template>
<script setup >
@ -60,7 +60,7 @@ let option = {
],
series: [
{
name: "职工养老保险发放人次",
name: "特困发放人次",
type: "bar",
data: [2.0, 4.9, 7.0, 23.2, 25.6],
showBackground: true,
@ -81,7 +81,7 @@ let option = {
},
},
{
name: "城乡养老保险发放人次",
name: "低保发放人次",
type: "bar",
data: [2.6, 5.9, 9.0, 26.4, 28.7],
showBackground: true,

8
src/view/echarts/pie.vue
View File

@ -1,5 +1,5 @@
<template>
<div ref="chart" style="width: 100%; height: 220px"></div>
<div ref="chart" style="width: 100%; height: 200px"></div>
</template>
<script setup >
@ -15,7 +15,7 @@ let option = {
},
legend: {
top: "8%",
right: "5%",
right: "11%",
textStyle: {
fontSize: 12,
color: "#ccc",
@ -23,8 +23,8 @@ let option = {
},
grid: {
left: "1%",
right: "4%",
bottom: "3%",
right: "10%",
bottom: "0%",
containLabel: true,
},
calculable: true,

25
src/view/echarts/pie2.vue
View File

@ -1,5 +1,5 @@
<template>
<div ref="chart" style="width: 100%; height: 220px"></div>
<div ref="chart" style="width: 100%; height: 200px"></div>
</template>
<script setup >
@ -16,7 +16,7 @@ let option = {
legend: {
// data: ["80-90补贴人次", "90-98补贴人次", "99以上补贴人次"],
top: "8%",
right: "15%",
right: "11%",
textStyle: {
fontSize: 12,
color: "#ccc",
@ -24,7 +24,7 @@ let option = {
},
grid: {
left: "1%",
right: "4%",
right: "10%",
bottom: "3%",
containLabel: true,
},
@ -58,7 +58,7 @@ let option = {
},
series: [
{
name: "80-90补贴人次",
name: "职工养老保险金额",
type: "line",
stack: "Total",
symbol: "emptyCircle",
@ -72,22 +72,7 @@ let option = {
data: [120, 132, 101, 134, 90],
},
{
name: "90-98补贴人次",
type: "line",
stack: "Total",
symbol: "emptyCircle",
symbolSize: 10,
itemStyle: {
borderColor: "#E8FF00",
borderWidth: 1,
color: "#E8FF00",
},
data: [220, 182, 191, 234, 290],
},
{
name: "99以上补贴人次",
name: "城乡养老保险金额",
type: "line",
stack: "Total",
symbol: "emptyCircle",

32
src/view/yl.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="module">
<div class="displayFlex">
<div class="displayFlex left_bg" >
<div class="flex1" >
<div class="yd_title left_1">
<span class="text">
@ -31,7 +31,7 @@
<ePie v-if="leftchoose.first == '1'"></ePie>
<ePie2 v-else></ePie2>
</div>
<div class="flex1">
<div class="flex1" style="margin-top:10px;">
<div class="yd_title left_2">
<span class="text">
<img
@ -58,9 +58,10 @@
/>
</span>
</div>
<eP2></eP2>
<eP2 v-if="leftchoose.second == '1'"></eP2>
<eP2_2 v-else/>
</div>
<div class="flex1">
<div class="flex1" style="margin-top:10px;">
<div class="yd_title left_3">
<span class="text">
<img
@ -212,6 +213,7 @@
import eBubble from "./echarts/bubble.vue";
import ePie from "./echarts/pie.vue";
import eP2 from "./echarts/eP2.vue";
import eP2_2 from "./echarts/eP2_2.vue";
import eP3 from "./echarts/eP3.vue";
import eP3_2 from "./echarts/eP3_2.vue";
import ePie2 from "./echarts/pie2.vue";
@ -236,11 +238,11 @@ const change = (name, index) => {
.displayFlex {
display: flex;
flex-direction: column;
flex: 1;
// flex: 1;
}
.flex1 {
flex: 1;
padding: 0 28px;
// flex: 1;
// padding: 0 28px;
box-sizing: border-box;
}
.flex2 {
@ -257,7 +259,7 @@ const change = (name, index) => {
// background-repeat: no-repeat;
// background-size: 100% 100%;
box-sizing: border-box;
width: 100%;
width: 90%;
height: 36px;
position: relative;
.text {
@ -346,12 +348,14 @@ const change = (name, index) => {
background-repeat: no-repeat;
background-size: 100% 100%;
}
.text_1_left {
// background-image: url(@/assets/images/ylbx_1.png);
// background-repeat: no-repeat;
// background-size: 100% 100%;
width: 100px;
height: 50px;
.left_bg {
width:642px;
box-sizing: border-box;
padding-left:50px;
margin-right:28px;
background-image: url(@/assets/images/left_bg.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.basicInformation {
display: flex;