From bb80f2112f9e95e79b0d4045f13ccb142dc2b94b Mon Sep 17 00:00:00 2001 From: yaoyuhao Date: Thu, 7 Nov 2024 11:23:54 +0800 Subject: [PATCH] 1 --- src/view/echarts_infabt/eP1.vue | 15 ++++ src/view/echarts_infabt/eP3.vue | 129 ++++++++----------------------- src/view/echarts_jz/eP3.vue | 64 ++++++++++++++- src/view/echarts_lysd/eP1.vue | 12 ++- src/view/echarts_lysd/eP2.vue | 6 ++ src/view/echarts_lysd/eP4.vue | 16 +++- src/view/echarts_lysd/gsbx_1.vue | 4 + src/view/echarts_lysd/gsbx_2.vue | 12 ++- src/view/sy_map.vue | 59 ++++++++++++-- src/view/table_gk/gk_jz.vue | 17 ++-- 10 files changed, 202 insertions(+), 132 deletions(-) diff --git a/src/view/echarts_infabt/eP1.vue b/src/view/echarts_infabt/eP1.vue index 8cb0e66..71ce438 100644 --- a/src/view/echarts_infabt/eP1.vue +++ b/src/view/echarts_infabt/eP1.vue @@ -82,6 +82,7 @@ const getOption = () => { }, }, yAxis: { + name: "人数", type: "value", splitLine: { show: true, @@ -90,6 +91,10 @@ const getOption = () => { width: 1, }, }, + nameTextStyle: { + // 设置Y轴名称的样式 + fontSize: 14, // 这里设置字体大小为20 + }, axisLabel: { //坐标轴刻度标签的相关设置 textStyle: { @@ -97,6 +102,16 @@ const getOption = () => { fontSize: 16, }, }, + axisLine: { + //y轴线的颜色以及宽度 + show: false, + lineStyle: { + color: "#ffffff", + fontSize: 14, + width: 1, + type: "solid", + }, + }, }, series: [ { diff --git a/src/view/echarts_infabt/eP3.vue b/src/view/echarts_infabt/eP3.vue index d3f4d04..bada4b3 100644 --- a/src/view/echarts_infabt/eP3.vue +++ b/src/view/echarts_infabt/eP3.vue @@ -325,14 +325,23 @@ const getOption = () => { }, ], yAxis: { + name:'人数', min: 0, // interval: 100, type: "value", axisLine: { - show: true, - lineStyle: { - color: "rgba(255, 255, 255, .16)", + //y轴线的颜色以及宽度 + show: false, + lineStyle: { + color: "#ffffff", + fontSize: 18, + width: 1, + type: "solid", + }, }, + nameTextStyle: { + // 设置Y轴名称的样式 + fontSize: 14, // 这里设置字体大小为20 }, splitLine: { show: true, @@ -341,6 +350,7 @@ const getOption = () => { color: "rgba(255, 255, 255, .16)", }, }, + axisTick: { show: false, }, @@ -351,99 +361,7 @@ const getOption = () => { }, }, series: [ - // { - // xAxisIndex: 0, - // name: "适龄生育妇女", - // type: "custom", - // renderItem: (params, api) => { - // const location = api.coord([api.value(0), api.value(1)]); - - // return { - // type: "group", - // children: [ - // { - // type: "CubeBottom_1", - // shape: { - // api, - // xValue: api.value(0), - // yValue: api.value(1), - // x: location[0], - // y: location[1], - // xAxisPoint: api.coord([api.value(0), 0]), - // }, - // style: { - // fill: colors[0]["bottom"], - // }, - // }, - // { - // type: "CubeLeft_1", - // shape: { - // api, - // xValue: api.value(0), - // yValue: api.value(1), - // x: location[0], - // y: location[1], - // xAxisPoint: api.coord([api.value(0), 0]), - // }, - // style: { - // fill: colors[0]["left"], - // }, - // }, - // { - // type: "CubeFront_1", - // shape: { - // api, - // xValue: api.value(0), - // yValue: api.value(1), - // x: location[0], - // y: location[1], - // xAxisPoint: api.coord([api.value(0), 0]), - // }, - // style: { - // fill: colors[0]["front"], - // }, - // }, - // { - // type: "CubeRight_1", - // shape: { - // api, - // xValue: api.value(0), - // yValue: api.value(1), - // x: location[0], - // y: location[1], - // xAxisPoint: api.coord([api.value(0), 0]), - // }, - // style: { - // fill: colors[0]["right"], - // }, - // }, - // { - // type: "CubeTop_1", - // shape: { - // api, - // xValue: api.value(0), - // yValue: api.value(1), - // x: location[0], - // y: location[1], - // xAxisPoint: api.coord([api.value(0), 0]), - // }, - // style: { - // fill: colors[0]["top"], - // }, - // }, - // ], - // }; - // }, - // //设置图例颜色 - // itemStyle: { - // show: true, - // color: { - // type: "linear", - // colorStops: [{ offset: 1, color: "rgba(234, 162, 57, 1)" }], - // }, - // }, - // data: data.valueList, - // }, + { xAxisIndex: 0, name: "育龄妇女", @@ -537,6 +455,25 @@ const getOption = () => { }, data: data.valueList2, }, + { + type: "bar", + xAxisIndex: 1, + label: { + show: true, + fontSize: 18, + position: "top", + color: "#ffffff", + formatter: function (data) { + return data.value - 5; + }, + }, + itemStyle: { + color: "rgba(221, 242, 255, 0)", + }, + + data: data.valueList2.map((item) => parseInt(item) + 5), + barWidth: 30, + }, ], }; }; diff --git a/src/view/echarts_jz/eP3.vue b/src/view/echarts_jz/eP3.vue index b471870..c78ef60 100644 --- a/src/view/echarts_jz/eP3.vue +++ b/src/view/echarts_jz/eP3.vue @@ -413,7 +413,7 @@ const getOption = () => { left: 0, right: 0, bottom: 10, - top: 40, + top: 50, containLabel: true, }, xAxis: [ @@ -457,7 +457,12 @@ const getOption = () => { ], yAxis: { min: 0, - + name:'户', + nameTextStyle: { + // 设置Y轴名称的样式 + fontSize: 14, // 这里设置字体大小为20 + color: "#fff", + }, // interval: 100, type: "value", axisLine: { @@ -762,6 +767,61 @@ const getOption = () => { }, data: data.valueList3, }, + { + type: "bar", + xAxisIndex: 1, + label: { + show: true, + fontSize: 18, + position: "top", + color: "#ffffff", + formatter: function (data) { + return data.value - 5; + }, + }, + itemStyle: { + color: "rgba(221, 242, 255, 0)", + }, + + data: data.valueList.map((item) => parseInt(item) + 5), + barWidth: 30, + }, { + type: "bar", + xAxisIndex: 1, + label: { + show: true, + fontSize: 18, + position: "top", + color: "#ffffff", + formatter: function (data) { + return data.value - 5; + }, + }, + itemStyle: { + color: "rgba(221, 242, 255, 0)", + }, + + data: data.valueList2.map((item) => parseInt(item) + 5), + barWidth: 30, + }, { + type: "bar", + xAxisIndex: 1, + label: { + show: true, + fontSize: 18, + position: "top", + color: "#ffffff", + formatter: function (data) { + return data.value - 5; + }, + }, + itemStyle: { + color: "rgba(221, 242, 255, 0)", + }, + + data: data.valueList3.map((item) => parseInt(item) + 5), + barWidth: 30, + }, ], }; }; diff --git a/src/view/echarts_lysd/eP1.vue b/src/view/echarts_lysd/eP1.vue index 9b5b1b1..43cd049 100644 --- a/src/view/echarts_lysd/eP1.vue +++ b/src/view/echarts_lysd/eP1.vue @@ -107,10 +107,10 @@ const getOption = () => { }, legend: data.legend, grid: { - top: "20%", + top: "23%", left: "6%", right: "6%", - bottom: "8%", + bottom: "5%", containLabel: true, }, xAxis: { @@ -124,7 +124,7 @@ const getOption = () => { yAxis: [ { type: "value", - // name: "人数/人", + name: "人数/人", splitLine: { show: true, lineStyle: { @@ -134,8 +134,7 @@ const getOption = () => { }, }, min: 0, - max: (value) => - Math.ceil(Math.max(value.max, value.max * 1.2) / 50) * 50, + nameTextStyle: { fontSize: 14, }, @@ -160,8 +159,7 @@ const getOption = () => { }, }, min: 0, - max: (value) => - Math.ceil(Math.max(value.max, value.max * 1.6) / 50) * 50, + nameTextStyle: { fontSize: 14, }, diff --git a/src/view/echarts_lysd/eP2.vue b/src/view/echarts_lysd/eP2.vue index ae52ab1..17c7f03 100644 --- a/src/view/echarts_lysd/eP2.vue +++ b/src/view/echarts_lysd/eP2.vue @@ -323,6 +323,12 @@ const getOption = () => { yAxis: { min: 0, max: data.Max, + name:'人数', + nameTextStyle: { + // 设置Y轴名称的样式 + color: "#fff", + fontSize: 14, // 这里设置字体大小为20 + }, // interval: 100, type: "value", axisLine: { diff --git a/src/view/echarts_lysd/eP4.vue b/src/view/echarts_lysd/eP4.vue index ac7cce6..3942a3e 100644 --- a/src/view/echarts_lysd/eP4.vue +++ b/src/view/echarts_lysd/eP4.vue @@ -103,8 +103,12 @@ const getOption = () => { { type: "value", scale: true, - // name: "发放失业保险金金额", + name: "金额/元", min: 0, + nameTextStyle: { + // 设置Y轴名称的样式 + fontSize: 14, // 这里设置字体大小为20 + }, splitLine: { //分割线配置 show: false, @@ -136,7 +140,11 @@ const getOption = () => { type: "value", scale: true, min: 0, - // name: "失业保险金享受人数/万", + name: "人数", + nameTextStyle: { + // 设置Y轴名称的样式 + fontSize: 14, // 这里设置字体大小为20 + }, splitLine: { show: false, lineStyle: { @@ -192,7 +200,7 @@ const getOption = () => { { yAxisIndex: 1, name: "失业保险金享受人数", - data: data.list2, + data: data.list1, type: "line", //线状图 stack: "Total", symbol: "emptyCircle", @@ -215,7 +223,7 @@ const getOption = () => { z: 1, yAxisIndex: 0, name: "发放失业保险金金额", - data: data.list1, + data: data.list2, barWidth: 20, type: "bar", label: { diff --git a/src/view/echarts_lysd/gsbx_1.vue b/src/view/echarts_lysd/gsbx_1.vue index 61679e5..e6e1f22 100644 --- a/src/view/echarts_lysd/gsbx_1.vue +++ b/src/view/echarts_lysd/gsbx_1.vue @@ -99,6 +99,10 @@ const getOption = () => { scale: true, name: "工伤保险金累计享受人数", min: 0, + nameTextStyle: { + // 设置Y轴名称的样式 + fontSize: 14, // 这里设置字体大小为20 + }, splitLine: { //分割线配置 show: false, diff --git a/src/view/echarts_lysd/gsbx_2.vue b/src/view/echarts_lysd/gsbx_2.vue index 74f10f5..a7afc5e 100644 --- a/src/view/echarts_lysd/gsbx_2.vue +++ b/src/view/echarts_lysd/gsbx_2.vue @@ -48,10 +48,10 @@ const getOption = () => { data.option = { - // tooltip: { - // trigger: "axis", - // formatter: "{b0}
{a0}:{c0}", - // }, + tooltip: { + trigger: "axis", + formatter: "{b0}
{a0}:{c0}", + }, // legend: { // data: ["救助金额", "救助人数"], // top: "8%", @@ -99,6 +99,10 @@ scale: true, name: "工伤保险金累计待遇金额", min: 0, + nameTextStyle: { + // 设置Y轴名称的样式 + fontSize: 14, // 这里设置字体大小为20 + }, splitLine: { //分割线配置 show: false, diff --git a/src/view/sy_map.vue b/src/view/sy_map.vue index 1c1c589..bf9f317 100644 --- a/src/view/sy_map.vue +++ b/src/view/sy_map.vue @@ -1255,6 +1255,13 @@ const yaosuTotal = ref([ wz: false, click: false, }, + { + id: 36, + name: "小区物业", + img: xxg, + wz: false, + click: false, + }, ]); //选中的资源要素 const yaosuList = ref([]); @@ -3189,6 +3196,7 @@ const changeys = (name) => { getZyys(url, name, img, img_map, tooltip); } else if (name == "养老机构") { getZyys2(name, img, img_map, tooltip); + } else if (name == "小区物业") { } else { loadingss.value = false; } @@ -3249,19 +3257,58 @@ const getZyys2 = (name, img, img_map, tooltip) => { loadingss.value = false; } }; - // 添加资源要素的图标(overlay存放标记点) const createZyys = (polygon, indexx, name, tooltip) => { + let properties_change = {}; + if (name == "小区物业") { + properties_change = { + xqs: "100/", + wys: "100", + imgSrc2: polygon.img_map, + type: "customOverlay", + }; + } else { + properties_change = { + imgSrc2: polygon.img_map, + type: "customOverlay", + }; + } function createLabelDOM() { var content = document.createElement("div"); content.style.display = "flex"; content.style.flexDirection = "column"; content.style.alignItems = "center"; + content.style.justifyContent = "flex-end"; content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat); content.style.height = "30px"; content.style.width = "30px"; // content.style.position = "relative"; // 使得提示文字相对于父元素定位 - + if (name == "小区物业") { + var div = document.createElement("div"); + div.style.color = "#333"; + div.style.whiteSpace = "nowrap"; + div.style.MozUserSelect = "none"; + div.style.display = "flex"; + div.style.justifyContent = "center"; + div.style.alignItems = "center"; + div.style.cursor = "pointer"; + div.style.padding = "5px"; + div.style.minWidth = "60px"; + div.style.transform = "translateY(5px)"; + var xqs = document.createElement("div"); + xqs.style.fontSize = "10px"; + xqs.style.fontWeight = "600"; + xqs.style.color = "blue"; + var wys = document.createElement("div"); + wys.style.fontSize = "10px"; + wys.style.fontWeight = "600"; + wys.style.color = "yellow"; + xqs.appendChild(document.createTextNode(this.properties.xqs)); + wys.appendChild(document.createTextNode(this.properties.wys)); + div.appendChild(xqs); + div.appendChild(wys); + content.appendChild(div); + } let img2 = document.createElement("img"); img2.style.width = "20px"; img2.style.height = "26px"; @@ -3280,10 +3327,7 @@ const createZyys = (polygon, indexx, name, tooltip) => { // offsetY: -10, offsetX: 10, offsetY: -15, - properties: { - imgSrc2: polygon.img_map, - type: "customOverlay", - }, + properties: properties_change, } ); map.addOverlay(yaosuIcon.value[name].sj[indexx].overlay); @@ -3494,7 +3538,7 @@ const xr_dk_center_zyys = async () => { const zyys_table = reactive({ town: "", committee: "", - xd: "", + xd: "",//表示请求的类型 }); const Xr_zyysNum = (polygon, indexx) => { function createLabelDOM() { @@ -4054,7 +4098,6 @@ const createCustomOverlay = (polygon, indexx) => { function createLabelDOM() { var content = document.createElement("div"); content.style.display = "flex"; - content.style.justifyContent = "end"; content.style.flexDirection = "column"; content.style.alignItems = "center"; content.style.justifyContent = "end"; diff --git a/src/view/table_gk/gk_jz.vue b/src/view/table_gk/gk_jz.vue index bd2bad0..ba80e9f 100644 --- a/src/view/table_gk/gk_jz.vue +++ b/src/view/table_gk/gk_jz.vue @@ -160,16 +160,11 @@ show-overflow-tooltip /> - + @@ -377,7 +372,9 @@ const handlePagination = (current) => { }; //图表弹框 const jsSj = (name, index) => { - if (index == 2) { + console.log(name, index); + + if (index == 5 || index ==2) { tableType.title = "保障型住房"; dialogShowEcTy.value = true; } @@ -389,8 +386,6 @@ const chooseWfjw = (val) => { data.wfjw.list=data.wfjw[val]; console.log(data.wfjw.list); }; -//查看详情 -const goDetail = () => {}; //获取数据 const getData = async () => { await http.get("/api/ggfwyth/zysjOverview").then((res) => {