This commit is contained in:
duanxiaohai 2024-10-16 17:29:44 +08:00
parent 8989a43734
commit b316fe9c6a
7 changed files with 108 additions and 105 deletions

View File

@ -282,6 +282,9 @@ watch(
let obj = {
deng: 1,
bzlx: item.bzlx,
qtbm: item.qtbm,
ywfzrsj: item.ywfzrsj,
ywfzrzzd: item.ywfzrzzd,
};
data.tableData.push(obj);
});

View File

@ -212,6 +212,7 @@ watch(
data.list = props.list;
data.list2 = props.list2;
data.year = props.year;
data.bg = [];
data.year.forEach(() => {
data.bg.push(0);
});

View File

@ -125,34 +125,34 @@ const getOption = () => {
padding: [3, -3, 3, -3],
//
formatter: function (params) {
return `{b|${params.value}%}{a|${params.name}}`;
return `{a|${params.value}%}{a|${params.name}}`;
},
//
rich: {
// a
a: {
//
padding: [-14, 10, 40, -70],
padding: [10, 0, 30, -60],
//
fontSize: "12px",
fontSize: "15px",
//
fontFamily: "MicrosoftYaHei",
//
color: "#fff",
},
// b
b: {
//
padding: [0, 10, 55, -70],
//
fontSize: "15px",
//
fontFamily: "MicrosoftYaHei-Bold, MicrosoftYaHei",
//
fontWeight: "bold",
//
color: "#fff",
},
// b: {
// //
// padding: [0, 10, 55, -70],
// //
// fontSize: "15px",
// //
// fontFamily: "MicrosoftYaHei-Bold, MicrosoftYaHei",
// //
// fontWeight: "bold",
// //
// color: "#fff",
// },
},
},
// label: {
@ -166,9 +166,11 @@ const getOption = () => {
// padding: [0, -80],
// },
labelLine: {
show: false,
normal: {
length: 40, // 线
length2: 40,
align: 'right',
// lineStyle: {
// color: "white", // 线
// },

View File

@ -301,7 +301,7 @@ const getOption = () => {
color: "#fff",
fontSize: 16,
formatter: function (value) {
return value.length > 3 ? value.slice(0, 2) + "..." : value;
return value.length > 4 ? value.slice(0, 6) + "..." : value;
},
},
},

View File

@ -2,7 +2,7 @@
<div ref="chart" style="width: 100%; height: 90%"></div>
</template>
<script setup >
<script setup>
import { onMounted, reactive, ref, onBeforeMount, defineProps } from "vue";
// echarts
import * as echarts from "echarts";
@ -25,26 +25,59 @@ const data = reactive({
option: {},
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 getOption = () => {
data.option = {
tooltip: {
trigger: "axis",
formatter: "{b0}<br />{a1}:{c1} <br />{a3}:{c3} ",
formatter: "{b}<br />{a1}:{c1} <br />{a}:{c} ",
},
legend: {
data: ["育龄妇女", "婴幼儿"],
top: "6%",
right: "11%",
top: "4%",
// right: "1%",
textStyle: {
fontSize: 16,
color: "#ffffff",
},
},
grid: {
top: "23%",
top: "10%",
left: "1%",
right: "10%",
bottom: "0%",
@ -61,12 +94,12 @@ const getOption = () => {
fontSize: 16,
},
},
data: data.year,
// data: data1,
},
{
axisTick: false,
type: "value",
data: data.year,
// data: data1,
axisLabel: {
show: false,
},
@ -89,6 +122,7 @@ const getOption = () => {
fontSize: 16,
},
},
data: data1,
},
{
type: "category",
@ -112,25 +146,11 @@ const getOption = () => {
fontSize: 16,
fontFamily: "MicrosoftYaHei",
color: "#ffffff",
lineHeight: 19,
lineHeight: 10,
},
},
],
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,
name: "育龄妇女",
@ -141,23 +161,11 @@ const getOption = () => {
label: {
show: true,
color: "#ffffff",
position: "top",
position: "right",
formatter: function (data) {
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: {
color: {
type: "linear",
@ -166,28 +174,12 @@ const getOption = () => {
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: "rgba(142, 187, 255, .7)" },
{ offset: 0.5, color: "rgba(142, 187, 255, .7)" },
{ offset: 0.5, color: "rgba(142, 187, 255, .3)" },
{ offset: 1, color: "rgba(142, 187, 255, .5)" },
{ offset: 0, color: "rgba(141, 186, 253, 0.2)" },
{ offset: 1, color: "rgba(141, 186, 253, 0.7)" },
],
},
},
},
// {
// 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,
name: "婴幼儿",
@ -198,23 +190,11 @@ const getOption = () => {
label: {
show: true,
color: "#ffffff",
position: "top",
position: "right",
formatter: function (data) {
return data.value + "万";
},
},
// 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: {
type: "linear",
@ -223,10 +203,8 @@ const getOption = () => {
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: "rgba(23, 237, 255, .7)" },
{ offset: 0.5, color: "rgba(23, 237, 255, .7)" },
{ offset: 0.5, color: "rgba(23, 237, 255, .3)" },
{ offset: 1, color: "rgba(23, 237, 255, .5)" },
{ offset: 0, color: "rgba(24, 234, 254, 0.2)" },
{ offset: 1, color: "rgba(24, 234, 254, 0.7)" },
],
},
},
@ -235,11 +213,12 @@ const getOption = () => {
// type: "bar",
// xAxisIndex: 1,
// yAxisIndex: 1,
// barGap: 3,
// barWidth: 50,
// itemStyle: {
// color: "rgba(221, 242, 255, 0.1)",
// },
// data: data.bg.map(() => 100),
// barWidth: 50,
// data: data.bg.map(() => 10),
// },
],
};
@ -261,12 +240,11 @@ onBeforeMount(() => {
data.cxffrc.push((item.cxffrc / 10000).toFixed(0));
data.bg.push("");
});
// console.log(data.zgffrc,data.cxffrc);
console.log(data.zgffrc,data.cxffrc);
getOption();
setChart();
}, 600);
});
</script>
<style scoped>
</style>
<style scoped></style>

View File

@ -427,6 +427,21 @@ const tableType = reactive({
label: "服务内容",
property: "bzlx",
},
{
label: "牵头单位",
property: "qtbm",
}, {
label: "业务科室",
property: "ywfzrzzd",
}, {
label: "负责人",
property: "ywfzrzzd",
}, {
label: "联系电话",
property: "ywfzrsj",
},
{
label: "结果",
property: "deng",

View File

@ -45,7 +45,7 @@
src="@/assets/images/hygiene/jt.png"
class="right5_center"
/>
<div class="right5_bottom">{{ data.mz.mjzrc }}</div>
<div class="right5_bottom">{{ data.mz.mjzrc }} <span></span> </div>
</div>
</div>
<div class="item5">
@ -56,7 +56,7 @@
src="@/assets/images/hygiene/jt.png"
class="right5_center"
/>
<div class="right5_bottom">{{ data.mz.zyrs }}</div>
<div class="right5_bottom">{{ data.mz.zyrs }}<span></span></div>
</div>
</div>
</div>
@ -70,7 +70,7 @@
src="@/assets/images/hygiene/jt.png"
class="right5_center"
/>
<div class="right5_bottom">{{ data.mz.zyrs }}</div>
<div class="right5_bottom">{{ data.mz.zyrs }}<span></span></div>
</div>
</div>
<div class="item5">
@ -81,7 +81,7 @@
src="@/assets/images/hygiene/jt.png"
class="right5_center"
/>
<div class="right5_bottom">{{ data.mz.zyrs }}</div>
<div class="right5_bottom">{{ data.mz.zyrs }}<span></span></div>
</div>
</div>
</div>
@ -516,7 +516,7 @@ onMounted(() => {});
background-size: 100% 100%;
}
.center_top {
width: 95%;
width: 98%;
// height: 150px;
display: flex;
flex-direction: column;
@ -531,9 +531,10 @@ onMounted(() => {});
.item5 {
display: flex;
align-items: center;
width: 233px;
width: 242px;
height: 140px;
background: rgba(255, 255, 255, 0.1);
padding-left: 8px;
// opacity: 0.37;
.left5 {
@ -568,6 +569,9 @@ onMounted(() => {});
rgba(255, 255, 255, 0) 0%,
#3976a1 100%
);
span{
font-size: 15px;
}
}
}
}
@ -1114,7 +1118,7 @@ onMounted(() => {});
margin-top: 15px;
margin-bottom: 10px;
}
.font {
font-size: 18px !important;
}
// .font {
// font-size: 18px !important;
// }
</style>