Merge branch 'main' of git.zdool.com:xs/ggfwjsc
This commit is contained in:
lnn19986213
commit
69eafc6790
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
|
|
@ -14,10 +14,16 @@ let option = {
|
|||
trigger: "axis",
|
||||
},
|
||||
legend: {
|
||||
data: ["80-90补贴人次", "90-98补贴人次", "99以上补贴人次"],
|
||||
// data: ["80-90补贴人次", "90-98补贴人次", "99以上补贴人次"],
|
||||
top: "8%",
|
||||
right: "15%",
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: "#ccc",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: "3%",
|
||||
left: "1%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
|
|
@ -27,28 +33,80 @@ let option = {
|
|||
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",
|
||||
data: [120, 132, 101, 134, 90],
|
||||
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],
|
||||
},
|
||||
],
|
||||
|
|
|
|||
|
|
@ -10,49 +10,98 @@ import * as echarts from "echarts";
|
|||
const chart = ref(); // 创建DOM引用
|
||||
|
||||
let option = {
|
||||
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
trigger: "axis",
|
||||
},
|
||||
legend: {
|
||||
data: ['80-90补贴人次', '90-98补贴人次', '99以上补贴人次']
|
||||
// data: ["80-90补贴人次", "90-98补贴人次", "99以上补贴人次"],
|
||||
top: "8%",
|
||||
right: "15%",
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: "#ccc",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
left: "1%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
type: "category",
|
||||
// boundaryGap: false,
|
||||
data: ['1月', '2月', '3月', '4月', '5月']
|
||||
data: ["1月", "2月", "3月", "4月", "5月"],
|
||||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
color: "#ccc",
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
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',
|
||||
data: [120, 132, 101, 134, 90]
|
||||
},
|
||||
{
|
||||
name: '90-98补贴人次',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [220, 182, 191, 234, 290]
|
||||
},
|
||||
{
|
||||
name: '99以上补贴人次',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [150, 232, 201, 154, 190]
|
||||
},
|
||||
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],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// 使用生命钩子
|
||||
|
|
|
|||
|
|
@ -0,0 +1,126 @@
|
|||
<template>
|
||||
<div ref="chart" style="width: 100%; height: 220px"></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: {
|
||||
top: "8%",
|
||||
right: "5%",
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: "#ccc",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: "1%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
color: "#ccc",
|
||||
},
|
||||
},
|
||||
data: ["2019", "2020", "2021", "2022", "2023"],
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(226, 226, 226, 0.3)",
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
color: "#ccc",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "职工养老保险发放人次",
|
||||
type: "bar",
|
||||
data: [2.0, 4.9, 7.0, 23.2, 25.6],
|
||||
showBackground: true,
|
||||
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)",
|
||||
},
|
||||
]),
|
||||
},
|
||||
backgroundStyle: {
|
||||
color: "rgba(180, 180, 180, 0.2)",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "城乡养老保险发放人次",
|
||||
type: "bar",
|
||||
data: [2.6, 5.9, 9.0, 26.4, 28.7],
|
||||
showBackground: true,
|
||||
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)",
|
||||
},
|
||||
]),
|
||||
},
|
||||
backgroundStyle: {
|
||||
color: "rgba(180, 180, 180, 0.2)",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// 使用生命钩子
|
||||
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>
|
||||
|
|
@ -14,34 +14,68 @@ let option = {
|
|||
trigger: "axis",
|
||||
},
|
||||
legend: {
|
||||
data: ["职工养老保险发放人次", "城乡养老保险发放人次"],
|
||||
top: "8%",
|
||||
right: "5%",
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: "#ccc",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
left: "1%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
color: "#ccc",
|
||||
},
|
||||
},
|
||||
data: ["2019", "2020", "2021", "2022", "2023"],
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(226, 226, 226, 0.3)",
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
color: "#ccc",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "职工养老保险发放人次",
|
||||
type: "bar",
|
||||
data: [
|
||||
2.0, 4.9, 7.0, 23.2, 25.6
|
||||
],
|
||||
data: [2.0, 4.9, 7.0, 23.2, 25.6],
|
||||
showBackground: true,
|
||||
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)",
|
||||
},
|
||||
]),
|
||||
},
|
||||
backgroundStyle: {
|
||||
color: "rgba(180, 180, 180, 0.2)",
|
||||
},
|
||||
|
|
@ -49,10 +83,20 @@ let option = {
|
|||
{
|
||||
name: "城乡养老保险发放人次",
|
||||
type: "bar",
|
||||
data: [
|
||||
2.6, 5.9, 9.0, 26.4, 28.7
|
||||
],
|
||||
data: [2.6, 5.9, 9.0, 26.4, 28.7],
|
||||
showBackground: true,
|
||||
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)",
|
||||
},
|
||||
]),
|
||||
},
|
||||
backgroundStyle: {
|
||||
color: "rgba(180, 180, 180, 0.2)",
|
||||
},
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
102
src/view/yl.vue
102
src/view/yl.vue
|
|
@ -4,24 +4,92 @@
|
|||
<div class="flex1">
|
||||
<div class="yd_title left_1">
|
||||
<span class="text">
|
||||
<img src="@/assets/images/ylbx_1.png" style="width: 130px; height: 30px" />
|
||||
<img src="@/assets/images/ylbx_2.png" style="width: 130px; height: 30px" />
|
||||
<img
|
||||
v-if="leftchoose.first == '1'"
|
||||
src="@/assets/images/ylbx_1.png"
|
||||
style="width: 130px; height: 30px; cursor: pointer"
|
||||
/>
|
||||
<img
|
||||
v-else
|
||||
src="@/assets/images/ylbx_1_1.png"
|
||||
style="width: 130px; height: 30px; cursor: pointer"
|
||||
@click="change('first', '1')"
|
||||
/>
|
||||
<img
|
||||
v-if="leftchoose.first == '2'"
|
||||
src="@/assets/images/ylbx_1.png"
|
||||
style="width: 130px; height: 30px; cursor: pointer"
|
||||
/>
|
||||
<img
|
||||
v-else
|
||||
src="@/assets/images/ylbx_2_1.png"
|
||||
style="width: 130px; height: 30px; cursor: pointer"
|
||||
@click="change('first', '2')"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<ePie></ePie>
|
||||
<ePie v-if="leftchoose.first == '1'"></ePie>
|
||||
<ePie2 v-else></ePie2>
|
||||
</div>
|
||||
<div class="flex1">
|
||||
<div class="yd_title left_3">
|
||||
<!-- <span class="text">基本信息</span> -->
|
||||
</div>
|
||||
<eP3></eP3>
|
||||
</div>
|
||||
<div class="flex1">
|
||||
<div class="yd_title left_3">
|
||||
<!-- <span class="text">基本信息</span> -->
|
||||
<div class="yd_title left_2">
|
||||
<span class="text">
|
||||
<img
|
||||
v-if="leftchoose.second == '1'"
|
||||
src="@/assets/images/gllrbt_1.png"
|
||||
style="width: 130px; height: 30px; cursor: pointer"
|
||||
/>
|
||||
<img
|
||||
v-else
|
||||
src="@/assets/images/gllrbt_1_1.png"
|
||||
style="width: 130px; height: 30px; cursor: pointer"
|
||||
@click="change('second', '1')"
|
||||
/>
|
||||
<img
|
||||
v-if="leftchoose.second == '2'"
|
||||
src="@/assets/images/gllrbt_1.png"
|
||||
style="width: 130px; height: 30px; cursor: pointer"
|
||||
/>
|
||||
<img
|
||||
v-else
|
||||
src="@/assets/images/gllrbt_2_1.png"
|
||||
style="width: 130px; height: 30px; cursor: pointer"
|
||||
@click="change('second', '2')"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<eP2></eP2>
|
||||
</div>
|
||||
<div class="flex1">
|
||||
<div class="yd_title left_3">
|
||||
<span class="text">
|
||||
<img
|
||||
v-if="leftchoose.third == '1'"
|
||||
src="@/assets/images/tkjz_1.png"
|
||||
style="width: 130px; height: 30px; cursor: pointer"
|
||||
/>
|
||||
<img
|
||||
v-else
|
||||
src="@/assets/images/tkjz_1_1.png"
|
||||
style="width: 130px; height: 30px; cursor: pointer"
|
||||
@click="change('third', '1')"
|
||||
/>
|
||||
<img
|
||||
v-if="leftchoose.third == '2'"
|
||||
src="@/assets/images/tkjz_1.png"
|
||||
style="width: 130px; height: 30px; cursor: pointer"
|
||||
/>
|
||||
<img
|
||||
v-else
|
||||
src="@/assets/images/tkjz_2_1.png"
|
||||
style="width: 130px; height: 30px; cursor: pointer"
|
||||
@click="change('third', '2')"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<eP3 v-if="leftchoose.third == '1'"></eP3>
|
||||
<eP3_2 v-else></eP3_2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="displayFlex">
|
||||
<div class="flex1">
|
||||
|
|
@ -146,6 +214,7 @@ import eBubble from "./echarts/bubble.vue";
|
|||
import ePie from "./echarts/pie.vue";
|
||||
import eP2 from "./echarts/eP2.vue";
|
||||
import eP3 from "./echarts/eP3.vue";
|
||||
import eP3_2 from "./echarts/eP3_2.vue";
|
||||
import ePie2 from "./echarts/pie2.vue";
|
||||
import eGraph from "./echarts/graph.vue";
|
||||
import ePie3d from "./echarts/pie3d.vue";
|
||||
|
|
@ -153,6 +222,15 @@ import ePie3d from "./echarts/pie3d.vue";
|
|||
import ylJHSY from "./echarts/ylJHSY.vue";
|
||||
import ylSMFW from "./echarts/ylSMFW.vue";
|
||||
import ylXZZC from "./echarts/ylXZZC.vue";
|
||||
import { ref, onMounted, onBeforeMount } from "vue";
|
||||
const leftchoose = ref({
|
||||
first: "1",
|
||||
second: "1",
|
||||
third: "1",
|
||||
});
|
||||
const change = (name, index) => {
|
||||
leftchoose.value[name] = index;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -195,7 +273,7 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
|||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
position: absolute;
|
||||
right: 33px;
|
||||
right: 5px;
|
||||
top: 3px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue