This commit is contained in:
parent
8989a43734
commit
b316fe9c6a
|
@ -282,6 +282,9 @@ watch(
|
||||||
let obj = {
|
let obj = {
|
||||||
deng: 1,
|
deng: 1,
|
||||||
bzlx: item.bzlx,
|
bzlx: item.bzlx,
|
||||||
|
qtbm: item.qtbm,
|
||||||
|
ywfzrsj: item.ywfzrsj,
|
||||||
|
ywfzrzzd: item.ywfzrzzd,
|
||||||
};
|
};
|
||||||
data.tableData.push(obj);
|
data.tableData.push(obj);
|
||||||
});
|
});
|
||||||
|
|
|
@ -212,6 +212,7 @@ watch(
|
||||||
data.list = props.list;
|
data.list = props.list;
|
||||||
data.list2 = props.list2;
|
data.list2 = props.list2;
|
||||||
data.year = props.year;
|
data.year = props.year;
|
||||||
|
data.bg = [];
|
||||||
data.year.forEach(() => {
|
data.year.forEach(() => {
|
||||||
data.bg.push(0);
|
data.bg.push(0);
|
||||||
});
|
});
|
||||||
|
|
|
@ -125,34 +125,34 @@ const getOption = () => {
|
||||||
padding: [3, -3, 3, -3],
|
padding: [3, -3, 3, -3],
|
||||||
// 标签格式化
|
// 标签格式化
|
||||||
formatter: function (params) {
|
formatter: function (params) {
|
||||||
return `{b|${params.value}%}{a|${params.name}}`;
|
return `{a|${params.value}%}{a|${params.name}}`;
|
||||||
},
|
},
|
||||||
// 富文本样式
|
// 富文本样式
|
||||||
rich: {
|
rich: {
|
||||||
// a样式
|
// a样式
|
||||||
a: {
|
a: {
|
||||||
// 内边距
|
// 内边距
|
||||||
padding: [-14, 10, 40, -70],
|
padding: [10, 0, 30, -60],
|
||||||
// 字体大小
|
// 字体大小
|
||||||
fontSize: "12px",
|
fontSize: "15px",
|
||||||
// 字体
|
// 字体
|
||||||
fontFamily: "MicrosoftYaHei",
|
fontFamily: "MicrosoftYaHei",
|
||||||
// 字体颜色
|
// 字体颜色
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
},
|
},
|
||||||
// b样式
|
// b样式
|
||||||
b: {
|
// b: {
|
||||||
// 内边距
|
// // 内边距
|
||||||
padding: [0, 10, 55, -70],
|
// padding: [0, 10, 55, -70],
|
||||||
// 字体大小
|
// // 字体大小
|
||||||
fontSize: "15px",
|
// fontSize: "15px",
|
||||||
// 字体
|
// // 字体
|
||||||
fontFamily: "MicrosoftYaHei-Bold, MicrosoftYaHei",
|
// fontFamily: "MicrosoftYaHei-Bold, MicrosoftYaHei",
|
||||||
// 字体粗细
|
// // 字体粗细
|
||||||
fontWeight: "bold",
|
// fontWeight: "bold",
|
||||||
// 字体颜色
|
// // 字体颜色
|
||||||
color: "#fff",
|
// color: "#fff",
|
||||||
},
|
// },
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// label: {
|
// label: {
|
||||||
|
@ -166,9 +166,11 @@ const getOption = () => {
|
||||||
// padding: [0, -80],
|
// padding: [0, -80],
|
||||||
// },
|
// },
|
||||||
labelLine: {
|
labelLine: {
|
||||||
|
show: false,
|
||||||
normal: {
|
normal: {
|
||||||
length: 40, // 改变标示线的长度
|
length: 40, // 改变标示线的长度
|
||||||
length2: 40,
|
length2: 40,
|
||||||
|
align: 'right',
|
||||||
// lineStyle: {
|
// lineStyle: {
|
||||||
// color: "white", // 改变标示线的颜色
|
// color: "white", // 改变标示线的颜色
|
||||||
// },
|
// },
|
||||||
|
|
|
@ -301,7 +301,7 @@ const getOption = () => {
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
fontSize: 16,
|
fontSize: 16,
|
||||||
formatter: function (value) {
|
formatter: function (value) {
|
||||||
return value.length > 3 ? value.slice(0, 2) + "..." : value;
|
return value.length > 4 ? value.slice(0, 6) + "..." : value;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<div ref="chart" style="width: 100%; height: 90%"></div>
|
<div ref="chart" style="width: 100%; height: 90%"></div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup >
|
<script setup>
|
||||||
import { onMounted, reactive, ref, onBeforeMount, defineProps } from "vue";
|
import { onMounted, reactive, ref, onBeforeMount, defineProps } from "vue";
|
||||||
// 局部引入echarts核心模块
|
// 局部引入echarts核心模块
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
|
@ -25,26 +25,59 @@ const data = reactive({
|
||||||
option: {},
|
option: {},
|
||||||
bg: [],
|
bg: [],
|
||||||
});
|
});
|
||||||
|
const data1 = [
|
||||||
|
"大街乡",
|
||||||
|
"社阳乡",
|
||||||
|
"牧尘畲族乡",
|
||||||
|
"庙下乡",
|
||||||
|
"溪口镇",
|
||||||
|
"罗家乡",
|
||||||
|
"模环乡",
|
||||||
|
"横山镇",
|
||||||
|
"石佛乡",
|
||||||
|
"詹家镇",
|
||||||
|
"塔石镇",
|
||||||
|
"小男孩镇",
|
||||||
|
"湖镇镇",
|
||||||
|
"东华街道",
|
||||||
|
"龙洲街道",
|
||||||
|
];
|
||||||
|
const data2 = [
|
||||||
|
"862772",
|
||||||
|
"672917",
|
||||||
|
"302810",
|
||||||
|
"294100",
|
||||||
|
"109310",
|
||||||
|
"91023",
|
||||||
|
"81232",
|
||||||
|
"71273",
|
||||||
|
"69173",
|
||||||
|
"51861",
|
||||||
|
"49184",
|
||||||
|
"31740",
|
||||||
|
"21307",
|
||||||
|
"21307",
|
||||||
|
"20000",
|
||||||
|
];
|
||||||
const chart = ref(); // 创建DOM引用
|
const chart = ref(); // 创建DOM引用
|
||||||
|
|
||||||
const getOption = () => {
|
const getOption = () => {
|
||||||
data.option = {
|
data.option = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: "axis",
|
trigger: "axis",
|
||||||
formatter: "{b0}<br />{a1}:{c1} <br />{a3}:{c3} ",
|
formatter: "{b}<br />{a1}:{c1} <br />{a}:{c} ",
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
data: ["育龄妇女", "婴幼儿"],
|
data: ["育龄妇女", "婴幼儿"],
|
||||||
top: "6%",
|
top: "4%",
|
||||||
right: "11%",
|
// right: "1%",
|
||||||
textStyle: {
|
textStyle: {
|
||||||
fontSize: 16,
|
fontSize: 16,
|
||||||
color: "#ffffff",
|
color: "#ffffff",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
top: "23%",
|
top: "10%",
|
||||||
left: "1%",
|
left: "1%",
|
||||||
right: "10%",
|
right: "10%",
|
||||||
bottom: "0%",
|
bottom: "0%",
|
||||||
|
@ -61,12 +94,12 @@ const getOption = () => {
|
||||||
fontSize: 16,
|
fontSize: 16,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
data: data.year,
|
// data: data1,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
axisTick: false,
|
axisTick: false,
|
||||||
type: "value",
|
type: "value",
|
||||||
data: data.year,
|
// data: data1,
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
show: false,
|
show: false,
|
||||||
},
|
},
|
||||||
|
@ -89,6 +122,7 @@ const getOption = () => {
|
||||||
fontSize: 16,
|
fontSize: 16,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
data: data1,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "category",
|
type: "category",
|
||||||
|
@ -102,7 +136,7 @@ const getOption = () => {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
axisLine: {
|
axisLine: {
|
||||||
show: false,
|
show: false,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
type: "dotted",
|
type: "dotted",
|
||||||
},
|
},
|
||||||
|
@ -112,25 +146,11 @@ const getOption = () => {
|
||||||
fontSize: 16,
|
fontSize: 16,
|
||||||
fontFamily: "MicrosoftYaHei",
|
fontFamily: "MicrosoftYaHei",
|
||||||
color: "#ffffff",
|
color: "#ffffff",
|
||||||
lineHeight: 19,
|
lineHeight: 10,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
series: [
|
series: [
|
||||||
// {
|
|
||||||
// z: 1,
|
|
||||||
// name: "上部1",
|
|
||||||
// type: "pictorialBar",
|
|
||||||
// symbolPosition: "end",
|
|
||||||
// data: data.zgffrc,
|
|
||||||
// symbol: "diamond",
|
|
||||||
// symbolOffset: ["-60%", "-50%"],
|
|
||||||
// symbolSize: [17, 10],
|
|
||||||
// itemStyle: {
|
|
||||||
// borderColor: "#2fffa4",
|
|
||||||
// color: "rgba(142, 187, 255, 1)",
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
{
|
{
|
||||||
z: 1,
|
z: 1,
|
||||||
name: "育龄妇女",
|
name: "育龄妇女",
|
||||||
|
@ -141,23 +161,11 @@ const getOption = () => {
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
color: "#ffffff",
|
color: "#ffffff",
|
||||||
position: "top",
|
position: "right",
|
||||||
formatter: function (data) {
|
formatter: function (data) {
|
||||||
return data.value + "万";
|
return data.value + "万";
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// 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)",
|
|
||||||
// },
|
|
||||||
// ]),
|
|
||||||
// },
|
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: {
|
color: {
|
||||||
type: "linear",
|
type: "linear",
|
||||||
|
@ -166,28 +174,12 @@ const getOption = () => {
|
||||||
y: 0,
|
y: 0,
|
||||||
y2: 0,
|
y2: 0,
|
||||||
colorStops: [
|
colorStops: [
|
||||||
{ offset: 0, color: "rgba(142, 187, 255, .7)" },
|
{ offset: 0, color: "rgba(141, 186, 253, 0.2)" },
|
||||||
{ offset: 0.5, color: "rgba(142, 187, 255, .7)" },
|
{ offset: 1, color: "rgba(141, 186, 253, 0.7)" },
|
||||||
{ offset: 0.5, color: "rgba(142, 187, 255, .3)" },
|
|
||||||
{ offset: 1, color: "rgba(142, 187, 255, .5)" },
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// {
|
|
||||||
// z: 2,
|
|
||||||
// name: "上部1",
|
|
||||||
// type: "pictorialBar",
|
|
||||||
// symbolPosition: "end",
|
|
||||||
// data: data.cxffrc,
|
|
||||||
// symbol: "diamond",
|
|
||||||
// symbolOffset: ["62%", "-50%"],
|
|
||||||
// symbolSize: [17, 10],
|
|
||||||
// itemStyle: {
|
|
||||||
// borderColor: "#32ffee",
|
|
||||||
// color: "rgba(23, 237, 255, 1)",
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
{
|
{
|
||||||
z: 2,
|
z: 2,
|
||||||
name: "婴幼儿",
|
name: "婴幼儿",
|
||||||
|
@ -198,24 +190,12 @@ const getOption = () => {
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
color: "#ffffff",
|
color: "#ffffff",
|
||||||
position: "top",
|
position: "right",
|
||||||
formatter: function (data) {
|
formatter: function (data) {
|
||||||
return data.value + "万";
|
return data.value + "万";
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// itemStyle: {
|
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)",
|
|
||||||
// },
|
|
||||||
// ]),
|
|
||||||
// },
|
|
||||||
itemStyle: {
|
|
||||||
color: {
|
color: {
|
||||||
type: "linear",
|
type: "linear",
|
||||||
x: 0,
|
x: 0,
|
||||||
|
@ -223,10 +203,8 @@ const getOption = () => {
|
||||||
y: 0,
|
y: 0,
|
||||||
y2: 0,
|
y2: 0,
|
||||||
colorStops: [
|
colorStops: [
|
||||||
{ offset: 0, color: "rgba(23, 237, 255, .7)" },
|
{ offset: 0, color: "rgba(24, 234, 254, 0.2)" },
|
||||||
{ offset: 0.5, color: "rgba(23, 237, 255, .7)" },
|
{ offset: 1, color: "rgba(24, 234, 254, 0.7)" },
|
||||||
{ offset: 0.5, color: "rgba(23, 237, 255, .3)" },
|
|
||||||
{ offset: 1, color: "rgba(23, 237, 255, .5)" },
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -235,11 +213,12 @@ const getOption = () => {
|
||||||
// type: "bar",
|
// type: "bar",
|
||||||
// xAxisIndex: 1,
|
// xAxisIndex: 1,
|
||||||
// yAxisIndex: 1,
|
// yAxisIndex: 1,
|
||||||
|
// barGap: 3,
|
||||||
|
// barWidth: 50,
|
||||||
// itemStyle: {
|
// itemStyle: {
|
||||||
// color: "rgba(221, 242, 255, 0.1)",
|
// color: "rgba(221, 242, 255, 0.1)",
|
||||||
// },
|
// },
|
||||||
// data: data.bg.map(() => 100),
|
// data: data.bg.map(() => 10),
|
||||||
// barWidth: 50,
|
|
||||||
// },
|
// },
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
@ -261,12 +240,11 @@ onBeforeMount(() => {
|
||||||
data.cxffrc.push((item.cxffrc / 10000).toFixed(0));
|
data.cxffrc.push((item.cxffrc / 10000).toFixed(0));
|
||||||
data.bg.push("");
|
data.bg.push("");
|
||||||
});
|
});
|
||||||
// console.log(data.zgffrc,data.cxffrc);
|
console.log(data.zgffrc,data.cxffrc);
|
||||||
getOption();
|
getOption();
|
||||||
setChart();
|
setChart();
|
||||||
}, 600);
|
}, 600);
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped></style>
|
||||||
</style>
|
|
||||||
|
|
|
@ -427,6 +427,21 @@ const tableType = reactive({
|
||||||
label: "服务内容",
|
label: "服务内容",
|
||||||
property: "bzlx",
|
property: "bzlx",
|
||||||
},
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
label: "牵头单位",
|
||||||
|
property: "qtbm",
|
||||||
|
}, {
|
||||||
|
label: "业务科室",
|
||||||
|
property: "ywfzrzzd",
|
||||||
|
}, {
|
||||||
|
label: "负责人",
|
||||||
|
property: "ywfzrzzd",
|
||||||
|
}, {
|
||||||
|
label: "联系电话",
|
||||||
|
property: "ywfzrsj",
|
||||||
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
label: "结果",
|
label: "结果",
|
||||||
property: "deng",
|
property: "deng",
|
||||||
|
|
|
@ -45,7 +45,7 @@
|
||||||
src="@/assets/images/hygiene/jt.png"
|
src="@/assets/images/hygiene/jt.png"
|
||||||
class="right5_center"
|
class="right5_center"
|
||||||
/>
|
/>
|
||||||
<div class="right5_bottom">{{ data.mz.mjzrc }}</div>
|
<div class="right5_bottom">{{ data.mz.mjzrc }} <span>人</span> </div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item5">
|
<div class="item5">
|
||||||
|
@ -56,7 +56,7 @@
|
||||||
src="@/assets/images/hygiene/jt.png"
|
src="@/assets/images/hygiene/jt.png"
|
||||||
class="right5_center"
|
class="right5_center"
|
||||||
/>
|
/>
|
||||||
<div class="right5_bottom">{{ data.mz.zyrs }}</div>
|
<div class="right5_bottom">{{ data.mz.zyrs }}<span>人</span></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -70,7 +70,7 @@
|
||||||
src="@/assets/images/hygiene/jt.png"
|
src="@/assets/images/hygiene/jt.png"
|
||||||
class="right5_center"
|
class="right5_center"
|
||||||
/>
|
/>
|
||||||
<div class="right5_bottom">{{ data.mz.zyrs }}</div>
|
<div class="right5_bottom">{{ data.mz.zyrs }}<span>个</span></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item5">
|
<div class="item5">
|
||||||
|
@ -81,7 +81,7 @@
|
||||||
src="@/assets/images/hygiene/jt.png"
|
src="@/assets/images/hygiene/jt.png"
|
||||||
class="right5_center"
|
class="right5_center"
|
||||||
/>
|
/>
|
||||||
<div class="right5_bottom">{{ data.mz.zyrs }}</div>
|
<div class="right5_bottom">{{ data.mz.zyrs }}<span>家</span></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -516,7 +516,7 @@ onMounted(() => {});
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
.center_top {
|
.center_top {
|
||||||
width: 95%;
|
width: 98%;
|
||||||
// height: 150px;
|
// height: 150px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
@ -531,9 +531,10 @@ onMounted(() => {});
|
||||||
.item5 {
|
.item5 {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 233px;
|
width: 242px;
|
||||||
height: 140px;
|
height: 140px;
|
||||||
background: rgba(255, 255, 255, 0.1);
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
padding-left: 8px;
|
||||||
// opacity: 0.37;
|
// opacity: 0.37;
|
||||||
|
|
||||||
.left5 {
|
.left5 {
|
||||||
|
@ -568,6 +569,9 @@ onMounted(() => {});
|
||||||
rgba(255, 255, 255, 0) 0%,
|
rgba(255, 255, 255, 0) 0%,
|
||||||
#3976a1 100%
|
#3976a1 100%
|
||||||
);
|
);
|
||||||
|
span{
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1114,7 +1118,7 @@ onMounted(() => {});
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
.font {
|
// .font {
|
||||||
font-size: 18px !important;
|
// font-size: 18px !important;
|
||||||
}
|
// }
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue