diff --git a/src/assets/images/jz/sjx.png b/src/assets/images/jz/sjx.png
new file mode 100644
index 0000000..db2fe14
Binary files /dev/null and b/src/assets/images/jz/sjx.png differ
diff --git a/src/assets/images/jz/wfjw1.png b/src/assets/images/jz/wfjw1.png
new file mode 100644
index 0000000..fb805da
Binary files /dev/null and b/src/assets/images/jz/wfjw1.png differ
diff --git a/src/assets/images/jz/wfjw2.png b/src/assets/images/jz/wfjw2.png
new file mode 100644
index 0000000..da5f591
Binary files /dev/null and b/src/assets/images/jz/wfjw2.png differ
diff --git a/src/view/echarts_jz/eP1.vue b/src/view/echarts_jz/eP1.vue
new file mode 100644
index 0000000..f092f5e
--- /dev/null
+++ b/src/view/echarts_jz/eP1.vue
@@ -0,0 +1,296 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/view/echarts_jz/eP3.vue b/src/view/echarts_jz/eP3.vue
index 3ebb754..3187942 100644
--- a/src/view/echarts_jz/eP3.vue
+++ b/src/view/echarts_jz/eP3.vue
@@ -33,6 +33,13 @@ const colors = [
bottom: "rgba(14, 252, 255, .46)",
front: "rgba(14, 252, 255, .66)",
},
+ {
+ left: "rgba(60, 143, 255, .16)",
+ right: "rgba(60, 143, 255, .6)",
+ top: "rgba(60, 143, 255, 1)",
+ bottom: "rgba(60, 143, 255, .46)",
+ front: "rgba(60, 143, 255, .66)",
+ },
];
// const valueList = [20, 53, 47, 65, 29, 11, 10];
const data = reactive({
@@ -41,7 +48,8 @@ const data = reactive({
Max: 20000,
valueList: [4504, 16086, 6130, 2844, 4967, 179, 1685, 5010],
valueList2: [1181, 2177, 3720, 3711, 4642, 1654, 3395, 5552],
- xxname: ["2020", "2021", "2022", "2023"],
+ valueList3: [1181, 2177, 3720, 3711, 4642, 1654, 3395, 5552],
+ xxname: ["1月", "2月", "3月", "4月","5月"],
});
// 注册5个面图形:左侧、前面、右面、上面、下面
//c0:左下角,c1:右下角,c2:右上角,c3:左上角
@@ -55,8 +63,8 @@ const CubeLeft_1 = echarts.graphic.extendShape({
// 会canvas的应该都能看得懂,shape是从custom传入的
const xAxisPoint = shape.xAxisPoint;
const c0 = [shape.x - 40, shape.y];
- const c1 = [shape.x - 27, shape.y - 14];
- const c2 = [xAxisPoint[0] - 27, xAxisPoint[1] - 14];
+ const c1 = [shape.x - 30, shape.y - 10];
+ const c2 = [xAxisPoint[0] - 30, xAxisPoint[1] - 10];
const c3 = [xAxisPoint[0] - 40, xAxisPoint[1]];
ctx
.moveTo(c0[0], c0[1])
@@ -75,8 +83,8 @@ const CubeFront_1 = echarts.graphic.extendShape({
// 会canvas的应该都能看得懂,shape是从custom传入的
const xAxisPoint = shape.xAxisPoint;
const c0 = [shape.x - 40, shape.y];
- const c1 = [shape.x - 18, shape.y];
- const c2 = [xAxisPoint[0] - 18, xAxisPoint[1]];
+ const c1 = [shape.x - 28, shape.y];
+ const c2 = [xAxisPoint[0] - 28, xAxisPoint[1]];
const c3 = [xAxisPoint[0] - 40, xAxisPoint[1]];
ctx
.moveTo(c0[0], c0[1])
@@ -93,10 +101,10 @@ const CubeRight_1 = echarts.graphic.extendShape({
},
buildPath: function (ctx, shape) {
const xAxisPoint = shape.xAxisPoint;
- const c0 = [shape.x - 18, shape.y];
- const c1 = [shape.x - 5, shape.y - 14];
- const c2 = [xAxisPoint[0] - 5, xAxisPoint[1] - 14];
- const c3 = [xAxisPoint[0] - 18, xAxisPoint[1]];
+ const c0 = [shape.x - 28, shape.y];
+ const c1 = [shape.x - 17, shape.y - 10];
+ const c2 = [xAxisPoint[0] - 18, xAxisPoint[1] - 10];
+ const c3 = [xAxisPoint[0] - 28, xAxisPoint[1]];
ctx
.moveTo(c0[0], c0[1])
.lineTo(c1[0], c1[1])
@@ -112,9 +120,9 @@ const CubeTop_1 = echarts.graphic.extendShape({
},
buildPath: function (ctx, shape) {
const c0 = [shape.x - 40, shape.y];
- const c1 = [shape.x - 18, shape.y];
- const c2 = [shape.x - 5, shape.y - 14];
- const c3 = [shape.x - 27, shape.y - 14];
+ const c1 = [shape.x - 28, shape.y];
+ const c2 = [shape.x - 18, shape.y - 10];
+ const c3 = [shape.x - 30, shape.y - 10];
ctx
.moveTo(c0[0], c0[1])
.lineTo(c1[0], c1[1])
@@ -133,9 +141,9 @@ const CubeBottom_1 = echarts.graphic.extendShape({
const xAxisPoint = shape.xAxisPoint;
const c0 = [xAxisPoint[0] - 40, xAxisPoint[1]];
- const c1 = [xAxisPoint[0] - 18, xAxisPoint[1]];
- const c2 = [xAxisPoint[0] - 5, xAxisPoint[1] - 14];
- const c3 = [xAxisPoint[0] - 27, xAxisPoint[1] - 14];
+ const c1 = [xAxisPoint[0] - 28, xAxisPoint[1]];
+ const c2 = [xAxisPoint[0] - 18, xAxisPoint[1] - 10];
+ const c3 = [xAxisPoint[0] - 30, xAxisPoint[1] - 10];
ctx
.moveTo(c0[0], c0[1])
@@ -160,10 +168,10 @@ const CubeLeft_2 = echarts.graphic.extendShape({
buildPath: function (ctx, shape) {
// 会canvas的应该都能看得懂,shape是从custom传入的
const xAxisPoint = shape.xAxisPoint;
- const c0 = [shape.x - 0, shape.y];
- const c1 = [shape.x + 13, shape.y - 14];
- const c2 = [xAxisPoint[0] + 13, xAxisPoint[1] - 14];
- const c3 = [xAxisPoint[0] - 0, xAxisPoint[1]];
+ const c0 = [shape.x - 15, shape.y];
+ const c1 = [shape.x - 2, shape.y - 10];
+ const c2 = [xAxisPoint[0] - 2, xAxisPoint[1] - 10];
+ const c3 = [xAxisPoint[0] - 15, xAxisPoint[1]];
ctx
.moveTo(c0[0], c0[1])
.lineTo(c1[0], c1[1])
@@ -180,10 +188,10 @@ const CubeFront_2 = echarts.graphic.extendShape({
buildPath: function (ctx, shape) {
// 会canvas的应该都能看得懂,shape是从custom传入的
const xAxisPoint = shape.xAxisPoint;
- const c0 = [shape.x - 0, shape.y];
- const c1 = [shape.x + 22, shape.y];
- const c2 = [xAxisPoint[0] + 22, xAxisPoint[1]];
- const c3 = [xAxisPoint[0] - 0, xAxisPoint[1]];
+ const c0 = [shape.x - 15, shape.y];
+ const c1 = [shape.x -3, shape.y];
+ const c2 = [xAxisPoint[0] -3, xAxisPoint[1]];
+ const c3 = [xAxisPoint[0] - 15, xAxisPoint[1]];
ctx
.moveTo(c0[0], c0[1])
.lineTo(c1[0], c1[1])
@@ -199,10 +207,10 @@ const CubeRight_2 = echarts.graphic.extendShape({
},
buildPath: function (ctx, shape) {
const xAxisPoint = shape.xAxisPoint;
- const c0 = [shape.x + 22, shape.y];
- const c1 = [shape.x + 35, shape.y - 14];
- const c2 = [xAxisPoint[0] + 35, xAxisPoint[1] - 14];
- const c3 = [xAxisPoint[0] + 22, xAxisPoint[1]];
+ const c0 = [shape.x -3, shape.y];
+ const c1 = [shape.x + 10, shape.y - 10];
+ const c2 = [xAxisPoint[0] + 10, xAxisPoint[1] - 10];
+ const c3 = [xAxisPoint[0] - 3, xAxisPoint[1]];
ctx
.moveTo(c0[0], c0[1])
.lineTo(c1[0], c1[1])
@@ -217,10 +225,10 @@ const CubeTop_2 = echarts.graphic.extendShape({
y: 0,
},
buildPath: function (ctx, shape) {
- const c0 = [shape.x - 0, shape.y];
- const c1 = [shape.x + 22, shape.y];
- const c2 = [shape.x + 35, shape.y - 14];
- const c3 = [shape.x + 13, shape.y - 14];
+ const c0 = [shape.x - 15, shape.y];
+ const c1 = [shape.x - 3, shape.y];
+ const c2 = [shape.x + 10, shape.y - 10];
+ const c3 = [shape.x - 2, shape.y - 10];
ctx
.moveTo(c0[0], c0[1])
.lineTo(c1[0], c1[1])
@@ -238,10 +246,10 @@ const CubeBottom_2 = echarts.graphic.extendShape({
// 会canvas的应该都能看得懂,shape是从custom传入的
const xAxisPoint = shape.xAxisPoint;
- const c0 = [xAxisPoint[0] - 0, xAxisPoint[1]];
- const c1 = [xAxisPoint[0] + 22, xAxisPoint[1]];
- const c2 = [xAxisPoint[0] + 35, xAxisPoint[1] - 14];
- const c3 = [xAxisPoint[0] + 13, xAxisPoint[1] - 14];
+ const c0 = [xAxisPoint[0] - 15, xAxisPoint[1]];
+ const c1 = [xAxisPoint[0] -3, xAxisPoint[1]];
+ const c2 = [xAxisPoint[0] + 10, xAxisPoint[1] - 10];
+ const c3 = [xAxisPoint[0] -2, xAxisPoint[1] - 10];
ctx
.moveTo(c0[0], c0[1])
@@ -259,15 +267,123 @@ echarts.graphic.registerShape("CubeTop_2", CubeTop_2);
echarts.graphic.registerShape("CubeBottom_2", CubeBottom_2);
// ------------------------------
+const CubeLeft_3 = echarts.graphic.extendShape({
+ shape: {
+ x: 0,
+ y: 0,
+ },
+ buildPath: function (ctx, shape) {
+ // 会canvas的应该都能看得懂,shape是从custom传入的
+ const xAxisPoint = shape.xAxisPoint;
+ const c0 = [shape.x + 15, shape.y];
+ const c1 = [shape.x + 28, shape.y - 10];
+ const c2 = [xAxisPoint[0] + 28, xAxisPoint[1] - 10];
+ const c3 = [xAxisPoint[0] + 15, xAxisPoint[1]];
+ ctx
+ .moveTo(c0[0], c0[1])
+ .lineTo(c1[0], c1[1])
+ .lineTo(c2[0], c2[1])
+ .lineTo(c3[0], c3[1])
+ .closePath();
+ },
+});
+const CubeFront_3 = echarts.graphic.extendShape({
+ shape: {
+ x: 0,
+ y: 0,
+ },
+ buildPath: function (ctx, shape) {
+ // 会canvas的应该都能看得懂,shape是从custom传入的
+ const xAxisPoint = shape.xAxisPoint;
+ const c0 = [shape.x + 15, shape.y];
+ const c1 = [shape.x + 27, shape.y];
+ const c2 = [xAxisPoint[0] + 27, xAxisPoint[1]];
+ const c3 = [xAxisPoint[0] + 15, xAxisPoint[1]];
+ ctx
+ .moveTo(c0[0], c0[1])
+ .lineTo(c1[0], c1[1])
+ .lineTo(c2[0], c2[1])
+ .lineTo(c3[0], c3[1])
+ .closePath();
+ },
+});
+const CubeRight_3 = echarts.graphic.extendShape({
+ shape: {
+ x: 0,
+ y: 0,
+ },
+ buildPath: function (ctx, shape) {
+ const xAxisPoint = shape.xAxisPoint;
+ const c0 = [shape.x + 27, shape.y];
+ const c1 = [shape.x + 40, shape.y - 10];
+ const c2 = [xAxisPoint[0] + 40, xAxisPoint[1] - 10];
+ const c3 = [xAxisPoint[0] + 27, xAxisPoint[1]];
+ ctx
+ .moveTo(c0[0], c0[1])
+ .lineTo(c1[0], c1[1])
+ .lineTo(c2[0], c2[1])
+ .lineTo(c3[0], c3[1])
+ .closePath();
+ },
+});
+const CubeTop_3 = echarts.graphic.extendShape({
+ shape: {
+ x: 0,
+ y: 0,
+ },
+ buildPath: function (ctx, shape) {
+ const c0 = [shape.x + 15, shape.y];
+ const c1 = [shape.x + 27, shape.y];
+ const c2 = [shape.x + 40, shape.y - 10];
+ const c3 = [shape.x + 28, shape.y - 10];
+ ctx
+ .moveTo(c0[0], c0[1])
+ .lineTo(c1[0], c1[1])
+ .lineTo(c2[0], c2[1])
+ .lineTo(c3[0], c3[1])
+ .closePath();
+ },
+});
+const CubeBottom_3 = echarts.graphic.extendShape({
+ shape: {
+ x: 0,
+ y: 0,
+ },
+ buildPath: function (ctx, shape) {
+ // 会canvas的应该都能看得懂,shape是从custom传入的
+ const xAxisPoint = shape.xAxisPoint;
+
+ const c0 = [xAxisPoint[0] + 15, xAxisPoint[1]];
+ const c1 = [xAxisPoint[0] + 27, xAxisPoint[1]];
+ const c2 = [xAxisPoint[0] + 40, xAxisPoint[1] - 10];
+ const c3 = [xAxisPoint[0] + 28, xAxisPoint[1] - 10];
+
+ ctx
+ .moveTo(c0[0], c0[1])
+ .lineTo(c1[0], c1[1])
+ .lineTo(c2[0], c2[1])
+ .lineTo(c3[0], c3[1])
+ .closePath();
+ },
+});
+
+echarts.graphic.registerShape("CubeLeft_3", CubeLeft_3);
+echarts.graphic.registerShape("CubeFront_3", CubeFront_3);
+echarts.graphic.registerShape("CubeRight_3", CubeRight_3);
+echarts.graphic.registerShape("CubeTop_3", CubeTop_3);
+echarts.graphic.registerShape("CubeBottom_3", CubeBottom_3);
+
+//--------------------------------
const getOption = () => {
data.option = {
legend: {
data: [
- "适龄生育妇女",
- "育龄妇女",
+ "房屋数量",
+ "入住数量",
+ "保障性租赁住房"
],
top: "0%",
- right: "30%",
+ right: "10%",
textStyle: {
fontSize: 16,
color: "#ffffff",
@@ -275,7 +391,7 @@ const getOption = () => {
},
tooltip: {
trigger: "axis",
- formatter: "{b0}:{a0}:{c0}{a1}:{c1}",
+ formatter: "{b0}:{a0}:{c0}{a1}:{c1}{a2}:{c2}",
},
grid: {
left: 0,
@@ -353,7 +469,7 @@ const getOption = () => {
series: [
{
xAxisIndex: 0,
- name: "适龄生育妇女",
+ name: "房屋数量",
type: "custom",
renderItem: (params, api) => {
const location = api.coord([api.value(0), api.value(1)]);
@@ -446,7 +562,7 @@ const getOption = () => {
},
{
xAxisIndex: 0,
- name: "育龄妇女",
+ name: "入住数量",
type: "custom",
renderItem: (params, api) => {
const location = api.coord([api.value(0), api.value(1)]);
@@ -537,44 +653,98 @@ const getOption = () => {
},
data: data.valueList2,
},
- //顶部字体
{
- type: "bar",
- xAxisIndex: 1,
- label: {
+ xAxisIndex: 0,
+ name: "保障性租赁住房",
+ type: "custom",
+ renderItem: (params, api) => {
+ const location = api.coord([api.value(0), api.value(1)]);
+
+ return {
+ type: "group",
+ children: [
+ {
+ type: "CubeBottom_3",
+ 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[2]["bottom"],
+ },
+ },
+ {
+ type: "CubeLeft_3",
+ 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[2]["left"],
+ },
+ },
+ {
+ type: "CubeFront_3",
+ 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[2]["front"],
+ },
+ },
+ {
+ type: "CubeRight_3",
+ 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[2]["right"],
+ },
+ },
+ {
+ type: "CubeTop_3",
+ 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[2]["top"],
+ },
+ },
+ ],
+ };
+ },
+ //设置图例颜色
+ itemStyle: {
show: true,
- fontSize: 18,
- position: "top",
- color: "#ffffff",
- formatter: function (data) {
- return data.value - 5;
+ color: {
+ type: "linear",
+ colorStops: [{ offset: 1, color: "rgba(60, 143, 255, 1)" }],
},
},
- 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: 20,
+ data: data.valueList3,
},
],
};
diff --git a/src/view/echarts_jz/eP4.vue b/src/view/echarts_jz/eP4.vue
new file mode 100644
index 0000000..ae5de51
--- /dev/null
+++ b/src/view/echarts_jz/eP4.vue
@@ -0,0 +1,296 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/view/echarts_jz/zwfw1.vue b/src/view/echarts_jz/zwfw1.vue
index 86908d1..cbe1845 100644
--- a/src/view/echarts_jz/zwfw1.vue
+++ b/src/view/echarts_jz/zwfw1.vue
@@ -3,7 +3,7 @@
\ No newline at end of file
diff --git a/src/view/echarts_jz/zwfw2.vue b/src/view/echarts_jz/zwfw2.vue
index 7dd0b5c..a878595 100644
--- a/src/view/echarts_jz/zwfw2.vue
+++ b/src/view/echarts_jz/zwfw2.vue
@@ -3,7 +3,7 @@
\ No newline at end of file
diff --git a/src/view/sy_map.vue b/src/view/sy_map.vue
index 229dead..92909de 100644
--- a/src/view/sy_map.vue
+++ b/src/view/sy_map.vue
@@ -2903,7 +2903,7 @@ const createZyys = (polygon, indexx, name, tooltip) => {
} else {
zyysCenter.length = 0;
zyysDk.length = 0;
- await get_dk_zyys(polygon.fgfwrs);
+ await get_dk_zyys(polygon.fgfwrs,polygon.startAge,polygon.endAge);
xr_dk_center_zyys();
}
@@ -2955,7 +2955,7 @@ const loadCs_zyys = async (name) => {
}
}
};
-const get_dk_zyys = async (sj) => {
+const get_dk_zyys = async (sj,start,end) => {
zyys_dk.value.length = 0;
zyys_center.value.length = 0;
zyys_data.value.point.length = 0;
@@ -2966,8 +2966,6 @@ const get_dk_zyys = async (sj) => {
zyys_jd.push(itemN.town);
}
});
- console.log(1111111111111, zyys_jd);
-
zyys_jd.forEach((item) => {
loadCs_zyys(item);
});
@@ -2979,7 +2977,7 @@ const get_dk_zyys = async (sj) => {
});
zyysCenter.forEach((center) => {
if (item.committee == center.name) {
- let a = { ...center, num: item.num,town: item.town,committee: item.committee};
+ let a = { ...center, num: item.num,town: item.town,committee: item.committee,startAge:start,endAge:end };
zyys_data.value.center.push(a);
}
});
@@ -3074,10 +3072,10 @@ const Xr_zyysNum = (polygon, indexx) => {
zyys_center.value[indexx].addEventListener("click", () => {
console.log(polygon);
// cfCsZs.value = polygon.name;
- open_detail_zyys(polygon.town, polygon.committee);
+ open_detail_zyys(polygon.town, polygon.committee,polygon.startAge,polygon.endAge);
});
};
-const open_detail_zyys = (town,committee) => {
+const open_detail_zyys = (town,committee,start,end) => {
let age = "";
dialogShow.value = true;
http
@@ -3086,7 +3084,7 @@ const open_detail_zyys = (town,committee) => {
pagination.pageSize
}&committee=${committee}&town=${
town
- }`
+ }&startAge=${start}&endAge=${end}`
)
.then((res) => {
if (res.code == 200) {
diff --git a/src/view/table_gk/gk_jz.vue b/src/view/table_gk/gk_jz.vue
index dd17ab7..3d0585b 100644
--- a/src/view/table_gk/gk_jz.vue
+++ b/src/view/table_gk/gk_jz.vue
@@ -1,14 +1,18 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
已改造:3300户
+
+
+
+
+
+
+
+
+
+ 查看详情
+
+
+
+
@@ -79,34 +145,127 @@