After Width: | Height: | Size: 68 KiB |
After Width: | Height: | Size: 4.0 KiB |
After Width: | Height: | Size: 4.3 KiB |
After Width: | Height: | Size: 64 KiB |
After Width: | Height: | Size: 3.9 KiB |
After Width: | Height: | Size: 4.2 KiB |
After Width: | Height: | Size: 6.9 KiB |
After Width: | Height: | Size: 5.4 KiB |
After Width: | Height: | Size: 5.3 KiB |
After Width: | Height: | Size: 4.9 KiB |
After Width: | Height: | Size: 8.7 KiB |
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div ref="chart" style="width: 100%; height: 220px"></div>
|
<div ref="chart" style="width: 100%; height: 200px"></div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup >
|
<script setup >
|
||||||
|
@ -12,13 +12,21 @@ const chart = ref(); // 创建DOM引用
|
||||||
let option = {
|
let option = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: "axis",
|
trigger: "axis",
|
||||||
|
padding: [20, 10, 20, 10],
|
||||||
|
formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2} <br />{a3}:{c3}",
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
data: ["80-90补贴人次", "90-98补贴人次", "99以上补贴人次"],
|
data: ["80-90补贴人次", "90-98补贴人次", "99以上补贴人次"],
|
||||||
|
top: "8%",
|
||||||
|
right: "15%",
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12,
|
||||||
|
color: "#ccc",
|
||||||
|
},
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: "3%",
|
left: "1%",
|
||||||
right: "4%",
|
right: "10%",
|
||||||
bottom: "3%",
|
bottom: "3%",
|
||||||
containLabel: true,
|
containLabel: true,
|
||||||
},
|
},
|
||||||
|
@ -27,28 +35,89 @@ let option = {
|
||||||
type: "category",
|
type: "category",
|
||||||
// boundaryGap: false,
|
// boundaryGap: false,
|
||||||
data: ["1月", "2月", "3月", "4月", "5月"],
|
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: {
|
yAxis: {
|
||||||
type: "value",
|
type: "value",
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "rgba(226, 226, 226, 0.3)",
|
||||||
|
width: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
//坐标轴刻度标签的相关设置
|
||||||
|
textStyle: {
|
||||||
|
color: "#ccc",
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
|
{
|
||||||
|
name: "背景",
|
||||||
|
type: "bar",
|
||||||
|
data: [0, 0, 0, 0, 0],
|
||||||
|
showBackground: true,
|
||||||
|
backgroundStyle: {
|
||||||
|
color: "rgba(180, 180, 180, 0.2)",
|
||||||
|
},
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: "80-90补贴人次",
|
name: "80-90补贴人次",
|
||||||
type: "line",
|
type: "line",
|
||||||
stack: "Total",
|
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补贴人次",
|
name: "90-98补贴人次",
|
||||||
type: "line",
|
type: "line",
|
||||||
stack: "Total",
|
stack: "Total",
|
||||||
|
symbol: "emptyCircle",
|
||||||
|
|
||||||
|
symbolSize: 10,
|
||||||
|
itemStyle: {
|
||||||
|
borderColor: "#E8FF00",
|
||||||
|
borderWidth: 1,
|
||||||
|
color: "#E8FF00",
|
||||||
|
},
|
||||||
|
|
||||||
data: [220, 182, 191, 234, 290],
|
data: [220, 182, 191, 234, 290],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "99以上补贴人次",
|
name: "99以上补贴人次",
|
||||||
type: "line",
|
type: "line",
|
||||||
stack: "Total",
|
stack: "Total",
|
||||||
|
symbol: "emptyCircle",
|
||||||
|
|
||||||
|
symbolSize: 10,
|
||||||
|
itemStyle: {
|
||||||
|
borderColor: "#2468FF",
|
||||||
|
borderWidth: 1,
|
||||||
|
color: "#2468FF",
|
||||||
|
},
|
||||||
|
|
||||||
data: [150, 232, 201, 154, 190],
|
data: [150, 232, 201, 154, 190],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
|
@ -0,0 +1,145 @@
|
||||||
|
<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",
|
||||||
|
padding: [20, 10, 20, 10],
|
||||||
|
formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2} <br />{a3}:{c3}",
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ["80-90补贴人次", "90-98补贴人次", "99以上补贴人次"],
|
||||||
|
top: "8%",
|
||||||
|
right: "15%",
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12,
|
||||||
|
color: "#ccc",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: "1%",
|
||||||
|
right: "10%",
|
||||||
|
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: "背景",
|
||||||
|
type: "bar",
|
||||||
|
data: [0, 0, 0, 0, 0],
|
||||||
|
showBackground: true,
|
||||||
|
backgroundStyle: {
|
||||||
|
color: "rgba(180, 180, 180, 0.2)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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>
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div ref="chart" style="width: 100%; height: 220px"></div>
|
<div ref="chart" style="width: 100%; height: 200px"></div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup >
|
<script setup >
|
||||||
|
@ -10,49 +10,94 @@ import * as echarts from "echarts";
|
||||||
const chart = ref(); // 创建DOM引用
|
const chart = ref(); // 创建DOM引用
|
||||||
|
|
||||||
let option = {
|
let option = {
|
||||||
|
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis'
|
trigger: "axis",
|
||||||
|
padding: [20, 10, 20, 10],
|
||||||
|
formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2} ",
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
data: ['80-90补贴人次', '90-98补贴人次', '99以上补贴人次']
|
data: ["职工养老保险金额", "城乡养老保险金额"],
|
||||||
|
top: "8%",
|
||||||
|
right: "11%",
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12,
|
||||||
|
color: "#ccc",
|
||||||
|
},
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: '3%',
|
left: "1%",
|
||||||
right: '4%',
|
right: "10%",
|
||||||
bottom: '3%',
|
bottom: "3%",
|
||||||
containLabel: true
|
containLabel: true,
|
||||||
},
|
},
|
||||||
|
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: "category",
|
||||||
// boundaryGap: false,
|
// boundaryGap: false,
|
||||||
data: ['1月', '2月', '3月', '4月', '5月']
|
data: ["1月", "2月", "3月", "4月", "5月"],
|
||||||
|
axisLabel: {
|
||||||
|
//坐标轴刻度标签的相关设置
|
||||||
|
textStyle: {
|
||||||
|
color: "#ccc",
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value'
|
type: "value",
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "rgba(226, 226, 226, 0.3)",
|
||||||
|
width: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
//坐标轴刻度标签的相关设置
|
||||||
|
textStyle: {
|
||||||
|
color: "#ccc",
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '80-90补贴人次',
|
name: "背景",
|
||||||
type: 'line',
|
type: "bar",
|
||||||
stack: 'Total',
|
data: [0, 0, 0, 0, 0],
|
||||||
data: [120, 132, 101, 134, 90]
|
showBackground: true,
|
||||||
|
backgroundStyle: {
|
||||||
|
color: "rgba(180, 180, 180, 0.2)",
|
||||||
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '90-98补贴人次',
|
name: "职工养老保险金额",
|
||||||
type: 'line',
|
type: "line",
|
||||||
stack: 'Total',
|
stack: "Total",
|
||||||
data: [220, 182, 191, 234, 290]
|
symbol: "emptyCircle",
|
||||||
|
|
||||||
|
symbolSize: 10,
|
||||||
|
itemStyle: {
|
||||||
|
borderColor: "#00FCFF",
|
||||||
|
borderWidth: 1,
|
||||||
|
color: "#00FCFF",
|
||||||
|
},
|
||||||
|
data: [120, 132, 101, 134, 90],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '99以上补贴人次',
|
name: "城乡养老保险金额",
|
||||||
type: 'line',
|
type: "line",
|
||||||
stack: 'Total',
|
stack: "Total",
|
||||||
data: [150, 232, 201, 154, 190]
|
symbol: "emptyCircle",
|
||||||
|
|
||||||
|
symbolSize: 10,
|
||||||
|
itemStyle: {
|
||||||
|
borderColor: "#2468FF",
|
||||||
|
borderWidth: 1,
|
||||||
|
color: "#2468FF",
|
||||||
},
|
},
|
||||||
|
|
||||||
]
|
data: [150, 232, 201, 154, 190],
|
||||||
|
},
|
||||||
|
],
|
||||||
};
|
};
|
||||||
|
|
||||||
// 使用生命钩子
|
// 使用生命钩子
|
||||||
|
|
|
@ -0,0 +1,167 @@
|
||||||
|
<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",
|
||||||
|
formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ",
|
||||||
|
},
|
||||||
|
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",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: ["2019", "2020", "2021", "2022", "2023"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
axisTick: false,
|
||||||
|
type: "category",
|
||||||
|
data: ["2019", "2020", "2021", "2022", "2023"],
|
||||||
|
axisLabel: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
],
|
||||||
|
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: "value",
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "rgba(226, 226, 226, 0.3)",
|
||||||
|
width: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
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,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "特困补助金额",
|
||||||
|
type: "bar",
|
||||||
|
data: [2.0, 4.9, 7.0, 23.2, 25.6],
|
||||||
|
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, 26.4, 28.7],
|
||||||
|
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", "2022", "2023"].map(() => 100),
|
||||||
|
barWidth: 50,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
// 使用生命钩子
|
||||||
|
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>
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div ref="chart" style="width: 100%; height: 220px"></div>
|
<div ref="chart" style="width: 100%; height: 200px"></div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup >
|
<script setup >
|
||||||
|
@ -12,50 +12,145 @@ const chart = ref(); // 创建DOM引用
|
||||||
let option = {
|
let option = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: "axis",
|
trigger: "axis",
|
||||||
|
formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ",
|
||||||
|
// formatter: function (params) {
|
||||||
|
// console.log(1111111,params);
|
||||||
|
// let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`;
|
||||||
|
// const result =circle +
|
||||||
|
// params[0].color +
|
||||||
|
// `"></span>` +
|
||||||
|
// params[0].name +
|
||||||
|
// ": " +
|
||||||
|
// params[0].value;
|
||||||
|
// // const result = (title ? title + '<br />' : '') + params[0].name + ': ' + params[0].value;
|
||||||
|
// return result;
|
||||||
|
// },
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
data: ["职工养老保险发放人次", "城乡养老保险发放人次"],
|
top: "8%",
|
||||||
|
right: "11%",
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12,
|
||||||
|
color: "#ccc",
|
||||||
|
},
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: '3%',
|
left: "1%",
|
||||||
right: '4%',
|
right: "10%",
|
||||||
bottom: '3%',
|
bottom: "0%",
|
||||||
containLabel: true
|
containLabel: true,
|
||||||
},
|
},
|
||||||
calculable: true,
|
calculable: true,
|
||||||
xAxis: [
|
xAxis: [
|
||||||
{
|
{
|
||||||
type: "category",
|
type: "category",
|
||||||
|
axisLabel: {
|
||||||
|
//坐标轴刻度标签的相关设置
|
||||||
|
textStyle: {
|
||||||
|
color: "#ccc",
|
||||||
|
},
|
||||||
|
},
|
||||||
data: ["2019", "2020", "2021", "2022", "2023"],
|
data: ["2019", "2020", "2021", "2022", "2023"],
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
axisTick: false,
|
||||||
|
type: "category",
|
||||||
|
data: ["2019", "2020", "2021", "2022", "2023"],
|
||||||
|
axisLabel: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
],
|
],
|
||||||
|
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
type: "value",
|
type: "value",
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "rgba(226, 226, 226, 0.3)",
|
||||||
|
width: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
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,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: "职工养老保险发放人次",
|
name: "职工养老保险发放人次",
|
||||||
type: "bar",
|
type: "bar",
|
||||||
data: [
|
data: [2.0, 4.9, 7.0, 23.2, 25.6],
|
||||||
2.0, 4.9, 7.0, 23.2, 25.6
|
barWidth: "18%",
|
||||||
],
|
itemStyle: {
|
||||||
showBackground: true,
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
backgroundStyle: {
|
{
|
||||||
color: "rgba(180, 180, 180, 0.2)",
|
offset: 0,
|
||||||
|
color: "rgba(142, 187, 255, 1)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "rgba(142, 187, 255, 0.20)",
|
||||||
|
},
|
||||||
|
]),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "城乡养老保险发放人次",
|
name: "城乡养老保险发放人次",
|
||||||
type: "bar",
|
type: "bar",
|
||||||
data: [
|
data: [2.6, 5.9, 9.0, 26.4, 28.7],
|
||||||
2.6, 5.9, 9.0, 26.4, 28.7
|
barWidth: "18%",
|
||||||
],
|
itemStyle: {
|
||||||
showBackground: true,
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
backgroundStyle: {
|
{
|
||||||
color: "rgba(180, 180, 180, 0.2)",
|
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", "2022", "2023"].map(() => 100),
|
||||||
|
barWidth: 50,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
|
@ -14,33 +14,25 @@ const colorList = ['#FFE35F','#0081FF','#8ABEDB','#25B9C8','#30EB92','rgba(69, 2
|
||||||
|
|
||||||
const pieData = [
|
const pieData = [
|
||||||
{
|
{
|
||||||
name: "A", //名称
|
name: "60-70岁", //名称
|
||||||
value: 10, //值
|
value: 1012431431, //值
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "B",
|
name: "70-80岁",
|
||||||
value: 8,
|
value: 85425345,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "C",
|
name: "80-90岁",
|
||||||
value: 2,
|
value: 2543256,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "D",
|
name: "90-100岁",
|
||||||
value: 6,
|
value: 5432535,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "E",
|
name: "100岁以上",
|
||||||
value: 5,
|
value: 56,
|
||||||
},
|
}
|
||||||
{
|
|
||||||
name: "F",
|
|
||||||
value: 1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "G",
|
|
||||||
value: 5
|
|
||||||
},
|
|
||||||
]
|
]
|
||||||
|
|
||||||
const serData = pieData.map((dItem, index) => {
|
const serData = pieData.map((dItem, index) => {
|
||||||
|
@ -152,40 +144,7 @@ function getPie3D(pieData, internalDiameterRatio) {
|
||||||
// return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) ;
|
// return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) ;
|
||||||
// },
|
// },
|
||||||
// z: function (u, v) {
|
// z: function (u, v) {
|
||||||
// return Math.cos(v) > 0 ? -4 : -4;
|
// return Math.cos(v) > 0 ? -6 : -7;
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// });
|
|
||||||
// series.push({
|
|
||||||
// name: 'mouseoutSeries',
|
|
||||||
// type: 'surface',
|
|
||||||
// parametric: true,
|
|
||||||
// wireframe: {
|
|
||||||
// show: false,
|
|
||||||
// },
|
|
||||||
// itemStyle: {
|
|
||||||
// opacity: 0.5,
|
|
||||||
// color: '#fff',
|
|
||||||
// },
|
|
||||||
// parametricEquation: {
|
|
||||||
// u: {
|
|
||||||
// min: 0,
|
|
||||||
// max: Math.PI * 2,
|
|
||||||
// step: Math.PI / 20,
|
|
||||||
// },
|
|
||||||
// v: {
|
|
||||||
// min: 1.5,
|
|
||||||
// max: 3,
|
|
||||||
// step: Math.PI / 20,
|
|
||||||
// },
|
|
||||||
// x: function (u, v) {
|
|
||||||
// return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) *1;
|
|
||||||
// },
|
|
||||||
// y: function (u, v) {
|
|
||||||
// return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI)*1;
|
|
||||||
// },
|
|
||||||
// z: function (u, v) {
|
|
||||||
// return Math.cos(v) > 0 ? -4 : -4;
|
|
||||||
// },
|
// },
|
||||||
// },
|
// },
|
||||||
// });
|
// });
|
||||||
|
@ -206,19 +165,19 @@ function getPie3D(pieData, internalDiameterRatio) {
|
||||||
"#F4BB29",
|
"#F4BB29",
|
||||||
"#49C384",
|
"#49C384",
|
||||||
],
|
],
|
||||||
width: '30%',
|
width: '40%',
|
||||||
//图例列表的布局朝向。
|
//图例列表的布局朝向。
|
||||||
// orient: "vertical",
|
orient: "vertical",
|
||||||
right: 0,
|
right: 20,
|
||||||
// bottom: 20,
|
// bottom: 20,
|
||||||
top: 'center',
|
top: 'center',
|
||||||
// left: '10px',
|
// left: '10px',
|
||||||
//图例文字每项之间的间隔
|
//图例文字每项之间的间隔
|
||||||
itemGap: 20,
|
itemGap: 10,
|
||||||
show: true,
|
show: true,
|
||||||
icon: "rect",
|
icon: "rect",
|
||||||
itemHeight: 10,
|
itemHeight: 10,
|
||||||
itemWidth: 10,
|
itemWidth: 25,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
//图例字体大小
|
//图例字体大小
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
|
@ -227,15 +186,21 @@ function getPie3D(pieData, internalDiameterRatio) {
|
||||||
},
|
},
|
||||||
|
|
||||||
//格式化图例文本
|
//格式化图例文本
|
||||||
// formatter: function (name) {
|
formatter: function (name) {
|
||||||
// var target;
|
var target;
|
||||||
// for (var i = 0, l = pieData.length; i < l; i++) {
|
for (var i = 0, l = pieData.length; i < l; i++) {
|
||||||
// if (pieData[i].name == name) {
|
if (pieData[i].name == name) {
|
||||||
// target = pieData[i].value;
|
target = pieData[i].value;
|
||||||
// }
|
}
|
||||||
// }
|
}
|
||||||
// return `${name} ${target}`;
|
if(name == '90-100岁'){
|
||||||
// },
|
return ` ${name} ${target} 人`;
|
||||||
|
}else if(name == '100岁以上'){
|
||||||
|
return ` ${name} ${target} 人`;
|
||||||
|
}else{
|
||||||
|
return ` ${name} ${target} 人`;
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
//移动上去提示的文本内容
|
//移动上去提示的文本内容
|
||||||
tooltip: {
|
tooltip: {
|
||||||
|
@ -256,7 +221,7 @@ function getPie3D(pieData, internalDiameterRatio) {
|
||||||
`<div style='color:rgba(214, 243, 255, 0.9);'>` +
|
`<div style='color:rgba(214, 243, 255, 0.9);'>` +
|
||||||
`<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
|
`<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
|
||||||
`${params.seriesName}<br/>` +
|
`${params.seriesName}<br/>` +
|
||||||
`<span style='margin-right:20px'>${value}</span>` +
|
`<span style='margin-right:20px'>${value}人</span>` +
|
||||||
`<span >${bfb}%</span>` +
|
`<span >${bfb}%</span>` +
|
||||||
`</div>`
|
`</div>`
|
||||||
);
|
);
|
||||||
|
@ -269,14 +234,14 @@ function getPie3D(pieData, internalDiameterRatio) {
|
||||||
grid3D: {
|
grid3D: {
|
||||||
viewControl: {
|
viewControl: {
|
||||||
autoRotate: true,
|
autoRotate: true,
|
||||||
rotateSensitivity: 1, //设置为0无法旋转
|
rotateSensitivity: 0, //设置为0无法旋转
|
||||||
zoomSensitivity: 1, //设置为0无法缩放
|
zoomSensitivity: 0, //设置为0无法缩放
|
||||||
panSensitivity: 0, //设置为0无法平移
|
panSensitivity: 0, //设置为0无法平移
|
||||||
alpha: 25, //角度(这个很重要 调节角度的)
|
alpha: 25, //角度(这个很重要 调节角度的)
|
||||||
distance: 120, //调整视角到主体的距离,类似调整zoom(这是整体大小)
|
distance: 90, //调整视角到主体的距离,类似调整zoom(这是整体大小)
|
||||||
},
|
},
|
||||||
top: '0',
|
top: '-30',
|
||||||
left: '-100',
|
left: '-120',
|
||||||
width: '100%',
|
width: '100%',
|
||||||
show: false,
|
show: false,
|
||||||
boxHeight: 20,
|
boxHeight: 20,
|
||||||
|
|
|
@ -11,7 +11,9 @@ const chart = ref(); // 创建DOM引用
|
||||||
|
|
||||||
const data = [120, 200, 150, 80, 70, 110, 130];
|
const data = [120, 200, 150, 80, 70, 110, 130];
|
||||||
const lineData = [150, 230, 224, 218, 135, 147, 260];
|
const lineData = [150, 230, 224, 218, 135, 147, 260];
|
||||||
const max = data.concat(lineData).reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
|
const max = data
|
||||||
|
.concat(lineData)
|
||||||
|
.reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
|
||||||
// 背景颜色
|
// 背景颜色
|
||||||
const color = [
|
const color = [
|
||||||
{
|
{
|
||||||
|
@ -39,6 +41,7 @@ const color = [
|
||||||
const option = {
|
const option = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: "axis",
|
trigger: "axis",
|
||||||
|
formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: "cross",
|
type: "cross",
|
||||||
label: {
|
label: {
|
||||||
|
@ -63,6 +66,7 @@ const option = {
|
||||||
{
|
{
|
||||||
type: "category",
|
type: "category",
|
||||||
// name: "计划生育补贴金额/元",
|
// name: "计划生育补贴金额/元",
|
||||||
|
|
||||||
data: ["2019", "2020", "2021", "2022", "2023"],
|
data: ["2019", "2020", "2021", "2022", "2023"],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -77,6 +81,13 @@ const option = {
|
||||||
scale: true,
|
scale: true,
|
||||||
name: "计划生育人数",
|
name: "计划生育人数",
|
||||||
max: max,
|
max: max,
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: "rgba(226, 226, 226, 0.3)",
|
||||||
|
width: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "value",
|
type: "value",
|
||||||
|
@ -84,6 +95,13 @@ const option = {
|
||||||
name: "计划生育补贴金额/元",
|
name: "计划生育补贴金额/元",
|
||||||
min: 0,
|
min: 0,
|
||||||
max: max,
|
max: max,
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: "rgba(226, 226, 226, 0.3)",
|
||||||
|
width: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
// max: 300,
|
// max: 300,
|
||||||
// position: "right",
|
// position: "right",
|
||||||
// boundaryGap: [0.2, 0.2]
|
// boundaryGap: [0.2, 0.2]
|
||||||
|
|
309
src/view/yl.vue
|
@ -1,47 +1,115 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="module">
|
<div class="module">
|
||||||
<div class="displayFlex">
|
<div class="displayFlex left_bg" >
|
||||||
<div class="flex1">
|
<div class="flex1" >
|
||||||
<div class="yd_title left_1">
|
<div class="yd_title left_1">
|
||||||
<span class="text">
|
<span class="text">
|
||||||
<img
|
<img
|
||||||
|
v-if="leftchoose.first == '1'"
|
||||||
src="@/assets/images/ylbx_1.png"
|
src="@/assets/images/ylbx_1.png"
|
||||||
style="width: 130px; height: 30px"
|
style="width: 130px; height: 30px; cursor: pointer"
|
||||||
/>
|
/>
|
||||||
<img
|
<img
|
||||||
src="@/assets/images/ylbx_2.png"
|
v-else
|
||||||
style="width: 130px; height: 30px"
|
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>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<ePie></ePie>
|
<ePie v-if="leftchoose.first == '1'" ></ePie>
|
||||||
|
<ePie2 v-else></ePie2>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex1">
|
<div class="flex1" style="margin-top:10px;">
|
||||||
|
<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 v-if="leftchoose.second == '1'"></eP2>
|
||||||
|
<eP2_2 v-else/>
|
||||||
|
</div>
|
||||||
|
<div class="flex1" style="margin-top:10px;">
|
||||||
<div class="yd_title left_3">
|
<div class="yd_title left_3">
|
||||||
<!-- <span class="text">基本信息</span> -->
|
<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>
|
</div>
|
||||||
<eP3></eP3>
|
<eP3 v-if="leftchoose.third == '1'"></eP3>
|
||||||
|
<eP3_2 v-else></eP3_2>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="displayFlex center_bg">
|
||||||
<div class="flex1">
|
<div class="flex1">
|
||||||
<div class="yd_title left_3">
|
<div class="yd_title center_1">
|
||||||
<!-- <span class="text">基本信息</span> -->
|
|
||||||
</div>
|
</div>
|
||||||
<eP2></eP2>
|
<div class="minTopPart">
|
||||||
|
<div class="mtpImg1"></div>
|
||||||
|
<div class="mtpImg2"></div>
|
||||||
|
<div class="mtpImg3"></div>
|
||||||
|
<div class="mtpText1">5888811</div>
|
||||||
|
<div class="mtpText2">18%</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="displayFlex">
|
|
||||||
<div class="flex1">
|
|
||||||
<div class="yd_title">
|
|
||||||
<span class="text">活动数据分析</span>
|
|
||||||
</div>
|
|
||||||
<waterBall></waterBall>
|
|
||||||
<ePie3d></ePie3d>
|
<ePie3d></ePie3d>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex1">
|
<div class="flex1">
|
||||||
<div class="yd_title familyPlanning">
|
<div class="yd_title familyPlanning">
|
||||||
<!-- <span class="text">计划生育</span> -->
|
<!-- <span class="text">计划生育</span> -->
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 100%; height: 400px">
|
<div style="width: 100%; height: 280px">
|
||||||
<ylJHSY></ylJHSY>
|
<ylJHSY></ylJHSY>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -115,7 +183,9 @@
|
||||||
import eBubble from "./echarts/bubble.vue";
|
import eBubble from "./echarts/bubble.vue";
|
||||||
import ePie from "./echarts/pie.vue";
|
import ePie from "./echarts/pie.vue";
|
||||||
import eP2 from "./echarts/eP2.vue";
|
import eP2 from "./echarts/eP2.vue";
|
||||||
|
import eP2_2 from "./echarts/eP2_2.vue";
|
||||||
import eP3 from "./echarts/eP3.vue";
|
import eP3 from "./echarts/eP3.vue";
|
||||||
|
import eP3_2 from "./echarts/eP3_2.vue";
|
||||||
import ePie2 from "./echarts/pie2.vue";
|
import ePie2 from "./echarts/pie2.vue";
|
||||||
import eGraph from "./echarts/graph.vue";
|
import eGraph from "./echarts/graph.vue";
|
||||||
import ePie3d from "./echarts/pie3d.vue";
|
import ePie3d from "./echarts/pie3d.vue";
|
||||||
|
@ -123,26 +193,39 @@ import ePie3d from "./echarts/pie3d.vue";
|
||||||
import ylJHSY from "./echarts/ylJHSY.vue";
|
import ylJHSY from "./echarts/ylJHSY.vue";
|
||||||
import ylSMFW from "./echarts/ylSMFW.vue";
|
import ylSMFW from "./echarts/ylSMFW.vue";
|
||||||
import ylXZZC from "./echarts/ylXZZC.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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.displayFlex {
|
.displayFlex {
|
||||||
|
box-sizing: border-box;
|
||||||
|
// height: 90vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
// flex: 1;
|
// flex: 1;
|
||||||
width: 33.333333333%;
|
width: 33.333333333%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex1 {
|
.flex1 {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 0 28px;
|
// padding: 0 28px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex2 {
|
.flex2 {
|
||||||
// flex: 1;
|
// flex: 1;
|
||||||
padding: 0 38px;
|
padding: 0 38px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.module {
|
.module {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
@ -152,9 +235,10 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
||||||
// background-repeat: no-repeat;
|
// background-repeat: no-repeat;
|
||||||
// background-size: 100% 100%;
|
// background-size: 100% 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 100%;
|
width: 94%;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
display: flex;
|
display: flex;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -163,25 +247,29 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 33px;
|
right: 5px;
|
||||||
top: 3px;
|
top: 3px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.familyPlanning {
|
.familyPlanning {
|
||||||
background-image: url(@/assets/YLTitle/titleImg9.png);
|
background-image: url(@/assets/YLTitle/titleImg9.png);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mechanism {
|
.mechanism {
|
||||||
background-image: url(@/assets/YLTitle/titleImg10.png);
|
background-image: url(@/assets/YLTitle/titleImg10.png);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.service {
|
.service {
|
||||||
background-image: url(@/assets/YLTitle/titleImg11.png);
|
background-image: url(@/assets/YLTitle/titleImg11.png);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.serviceBox {
|
.serviceBox {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
@ -191,6 +279,7 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
||||||
width: 182px;
|
width: 182px;
|
||||||
height: 35px;
|
height: 35px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.serviceTop {
|
.serviceTop {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
@ -205,6 +294,7 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.ylimg {
|
.ylimg {
|
||||||
width: 205px;
|
width: 205px;
|
||||||
height: 239px;
|
height: 239px;
|
||||||
|
@ -212,6 +302,7 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
||||||
|
|
||||||
.medicalServiceTop {
|
.medicalServiceTop {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 38px;
|
left: 38px;
|
||||||
|
@ -228,11 +319,13 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mealAssistance {
|
.mealAssistance {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.mealAssistanceimg {
|
.mealAssistanceimg {
|
||||||
width: 495px;
|
width: 495px;
|
||||||
height: 35px;
|
height: 35px;
|
||||||
|
@ -245,28 +338,51 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.left_2 {
|
.left_2 {
|
||||||
background-image: url(@/assets/images/gllrbt.png);
|
background-image: url(@/assets/images/gllrbt.png);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.left_3 {
|
.left_3 {
|
||||||
background-image: url(@/assets/images/tkjz.png);
|
background-image: url(@/assets/images/tkjz.png);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
.text_1_left {
|
|
||||||
// background-image: url(@/assets/images/ylbx_1.png);
|
.center_1 {
|
||||||
// background-repeat: no-repeat;
|
background-image: url(@/assets/YLTitle/titleImg8.png);
|
||||||
// background-size: 100% 100%;
|
background-repeat: no-repeat;
|
||||||
width: 100px;
|
background-size: 100% 100%;
|
||||||
height: 50px;
|
}
|
||||||
|
|
||||||
|
.left_bg {
|
||||||
|
width:642px;
|
||||||
|
height: 100%;
|
||||||
|
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%;
|
||||||
|
}
|
||||||
|
.center_bg{
|
||||||
|
width:582px;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-left:10px;
|
||||||
|
margin-right:28px;
|
||||||
|
background-image: url(@/assets/images/center_bg.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
.basicInformation {
|
.basicInformation {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
padding-top: 22px;
|
padding-top: 22px;
|
||||||
|
|
||||||
.basicInformation_item {
|
.basicInformation_item {
|
||||||
flex: 0 0 50%;
|
flex: 0 0 50%;
|
||||||
padding: 0 2px;
|
padding: 0 2px;
|
||||||
|
@ -275,10 +391,12 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
width: 79px;
|
width: 79px;
|
||||||
height: 47px;
|
height: 47px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
margin-left: 4px;
|
margin-left: 4px;
|
||||||
|
|
||||||
|
@ -288,6 +406,7 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: bottom;
|
background-position: bottom;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
@ -296,6 +415,7 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
||||||
margin-left: 2px;
|
margin-left: 2px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
@ -306,6 +426,50 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.visitLog {
|
||||||
|
.visitLog_item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background-image: url(@/assets/img_12.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-top: 16px;
|
||||||
|
padding: 15px 8px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.visitLog_item_box {
|
||||||
|
flex: auto;
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: 18px;
|
||||||
|
font-family: MicrosoftYaHei;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #0096ff;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 12px;
|
||||||
|
font-family: SourceHanSansCN;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #ffffff;
|
||||||
|
margin-top: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.check {
|
||||||
|
font-size: 12px;
|
||||||
|
font-family: SourceHanSansCN;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #0096ff;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.history {
|
.history {
|
||||||
padding-top: 12px;
|
padding-top: 12px;
|
||||||
|
@ -323,6 +487,7 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.unit {
|
.unit {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
@ -332,15 +497,18 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-family: PingFangSC, PingFang SC;
|
font-family: PingFangSC, PingFang SC;
|
||||||
}
|
}
|
||||||
|
|
||||||
.historyimg {
|
.historyimg {
|
||||||
width: 182px;
|
width: 182px;
|
||||||
height: 35px;
|
height: 35px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 154px;
|
width: 154px;
|
||||||
height: 136px;
|
height: 136px;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
@ -356,6 +524,7 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin: 12px 0 20px;
|
margin: 12px 0 20px;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: rgba(0, 89, 130, 0.73);
|
background: rgba(0, 89, 130, 0.73);
|
||||||
|
@ -369,9 +538,11 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
||||||
margin: 0 10px;
|
margin: 0 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.property {
|
.property {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 14px 0 10px;
|
padding: 14px 0 10px;
|
||||||
|
|
||||||
.property_box {
|
.property_box {
|
||||||
background-image: url(@/assets/img_05.png);
|
background-image: url(@/assets/img_05.png);
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
|
@ -380,12 +551,14 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
||||||
height: 91px;
|
height: 91px;
|
||||||
margin: 0 12px;
|
margin: 0 12px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
h5 {
|
h5 {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
margin: 9px 0 16px;
|
margin: 9px 0 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-size: 21px;
|
font-size: 21px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
@ -393,6 +566,7 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.activity {
|
.activity {
|
||||||
h5 {
|
h5 {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
@ -402,9 +576,11 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
||||||
border-bottom: 2px solid rgba(0, 164, 250, 1);
|
border-bottom: 2px solid rgba(0, 164, 250, 1);
|
||||||
margin-bottom: 17px;
|
margin-bottom: 17px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.activity_content {
|
.activity_content {
|
||||||
margin: 0 -6px 12px;
|
margin: 0 -6px 12px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
.activity_box {
|
.activity_box {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
@ -412,6 +588,7 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background-color: rgba(15, 28, 54, 1);
|
background-color: rgba(15, 28, 54, 1);
|
||||||
padding: 12px 12px 19px;
|
padding: 12px 12px 19px;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
@ -422,26 +599,31 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.monitor {
|
.monitor {
|
||||||
.monitor_box {
|
.monitor_box {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 8px 0;
|
padding: 8px 0;
|
||||||
border-bottom: 2px solid rgba(255, 255, 255, 0.67);
|
border-bottom: 2px solid rgba(255, 255, 255, 0.67);
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 115px;
|
width: 115px;
|
||||||
height: 84px;
|
height: 84px;
|
||||||
margin-right: 21px;
|
margin-right: 21px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.monitor_box_text {
|
.monitor_box_text {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
@ -451,4 +633,71 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.minTopPart {
|
||||||
|
width: 530px;
|
||||||
|
height: 174px;
|
||||||
|
background-image: url(@/assets/minTopBg.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin: 4px auto;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.mtpImg1 {
|
||||||
|
width: 140px;
|
||||||
|
height: 24px;
|
||||||
|
background-image: url(@/assets/minTop1.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 49px;
|
||||||
|
left: 23px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mtpImg2 {
|
||||||
|
width: 140px;
|
||||||
|
height: 24px;
|
||||||
|
background-image: url(@/assets/minTop2.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 49px;
|
||||||
|
right: 23px;
|
||||||
|
}
|
||||||
|
.mtpImg3 {
|
||||||
|
width: 125px;
|
||||||
|
height: 36px;
|
||||||
|
background-image: url(@/assets/minTop3.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 316px;
|
||||||
|
left: 84px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mtpText1 {
|
||||||
|
width: 140px;
|
||||||
|
height: 30px;
|
||||||
|
position: absolute;
|
||||||
|
top: 94px;
|
||||||
|
left: 23px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 30px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 26px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
.mtpText2 {
|
||||||
|
width: 140px;
|
||||||
|
height: 30px;
|
||||||
|
position: absolute;
|
||||||
|
top: 94px;
|
||||||
|
right: 23px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 30px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 26px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|