From 0b91dfffa72b42e7f75ede8af2534f946937ebe6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=8D=E7=88=B1=E5=AD=A6=E4=B9=A0=E7=9A=84=E7=9F=B3?= =?UTF-8?q?=E5=90=8C=E5=AD=A6?= <2936013465@qq.com> Date: Tue, 17 Dec 2024 11:02:00 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BB=B4=E6=9D=83=E6=8A=9A=E6=85=B0=20?= =?UTF-8?q?=E6=95=B0=E5=AD=97=E6=BB=9A=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/datav/RightsComfort.vue | 307 +++++++++++++++++++++++++++--- 1 file changed, 276 insertions(+), 31 deletions(-) diff --git a/src/views/datav/RightsComfort.vue b/src/views/datav/RightsComfort.vue index 8a5490d..148dee5 100644 --- a/src/views/datav/RightsComfort.vue +++ b/src/views/datav/RightsComfort.vue @@ -41,27 +41,27 @@
{ + temp.value={ + tempTotalCase: 171, + tempVictimPer: 121, + tempComfortPer: 114, + tempHitPro: 205, + tempComfortMon: 28.1, + } +}, 1000); + + + echarts.registerMap("changsha", changshaMap); const time = ref([ moment().startOf("year").format("YYYY-MM-DD"), @@ -149,16 +169,98 @@ const hitPersonNumber = ref(28.1); const comfortMoney = ref(0.0); const punishmentSituationList = ref([]); const comfortSituationList = ref([]); +let gobalTempMapVoList = [ + { + "name": "岳麓分局", + "totalCase": 23, + "victimPer": "暂无", + "comfortPer": "19", + "hitPro": "暂无", + "comfortMon": "暂无", + }, + { + "name": "芙蓉分局", + "totalCase": 20, + "victimPer": "暂无", + "comfortPer": "12", + "hitPro": "暂无", + "comfortMon": "暂无", + }, + { + "name": "天心分局", + "totalCase": 20, + "victimPer": "暂无", + "comfortPer": "23", + "hitPro": "暂无", + "comfortMon": "暂无", + }, + { + "name": "雨花分局", + "totalCase": 19, + "victimPer": "暂无", + "comfortPer": "16", + "hitPro": "暂无", + "comfortMon": "暂无", + }, + { + "name": "浏阳市局", + "totalCase": 17, + "victimPer": "暂无", + "comfortPer": "30", + "hitPro": "暂无", + "comfortMon": "暂无", + }, + { + "name": "宁乡市局", + "totalCase": 11, + "victimPer": "暂无", + "comfortPer": "0", + "hitPro": "暂无", + "comfortMon": "暂无", + }, + { + "name": "开福分局", + "totalCase": 11, + "victimPer": "暂无", + "comfortPer": "4", + "hitPro": "暂无", + "comfortMon": "暂无", + }, + { + "name": "望城分局", + "totalCase": 9, + "victimPer": "暂无", + "comfortPer": "0", + "hitPro": "暂无", + "comfortMon": "暂无", + }, + { + "name": "长沙县局", + "totalCase": 9, + "victimPer": "暂无", + "comfortPer": "0", + "hitPro": "暂无", + "comfortMon": "暂无", + }, + { + "name": "高新分局", + "totalCase": 4, + "victimPer": "暂无", + "comfortPer": "7", + "hitPro": "暂无", + "comfortMon": "暂无", + }, +]; function getData() { - // getRightsComfortData(time.value).then((data) => { - // console.log('Received data:', data); // 添加日志输出 - // comfortPersonNumber.value = data.comfortPersonNumber; - // hitPersonNumber.value = data.hitPersonNumber; - // comfortMoney.value = data.comfortMoney; - // punishmentSituationList.value = data.punishmentSituation; - // comfortSituationList.value = data.comfortSituation; - // }); + getRightsComfortData(time.value).then((data) => { + console.log('Received data:', data); // 添加日志输出 + comfortPersonNumber.value = data.comfortPersonNumber; + hitPersonNumber.value = data.hitPersonNumber; + comfortMoney.value = data.comfortMoney; + punishmentSituationList.value = data.punishmentSituation; + comfortSituationList.value = data.comfortSituation; + }); } watch(time, () => { @@ -167,29 +269,65 @@ watch(time, () => { onMounted(() => { getData(); }); -const option = { +const option = ref({ geo: { - // 是上面注册时的名字哦，registerMap（'名字保持一致'） map: "changsha", - }, + }, + tooltip: { + trigger: 'item', + formatter: function (params) { + console.log(params) + const dataItem = gobalTempMapVoList.find(item => item.name.includes(params.name.substring(0, 2))); + if (dataItem) { + return ` +
+
${dataItem.name}
+
+
    +
  • 维权案件总数 ${dataItem.totalCase}
    • +
  • 受侵害人数 ${dataItem.victimPer}
    • +
  • 抚慰人数 ${dataItem.comfortPer}
    • +
  • 打击处理人数 ${dataItem.hitPro}
    • +
  • 抚慰金额 ${dataItem.comfortMon}
    • +
+
+
`; + } else { + return `
+
${dataItem.name}
+
+
    +
  • 维权案件数 0
    • +
  • 抚慰人数 0
    • +
+
+
`; + } + }, + // backgroundColor: "#031577", // + // borderColor: "#0A2F86", + // borderWidth: 0, // 设置边框宽度为1像素 + // borderRadius: 3, // 设置边框半径为3像素 + // shadowBlur: 0, // 设置阴影模糊程度为8像素 + // shadowOffsetX: 0, // 设置水平阴影位移量为0像素 + // shadowOffsetY: 0, // 设置垂直阴影位移量为6像素 + }, visualMap: { type: "piecewise", bottom: 10, pieces: [ - {gte: 85, lte: 100, label: "数据数高于1000"}, - {gte: 65, lte: 85, label: "问题数低于1000"}, - {gte: 0, lte: 65, label: "问题数低于500"}, + { min: 0, max: 500, label: "问题数低于500" }, { min: 501, max: 1000, label: "问题数介于500-1000" }, { min: 1001, label: "问题数高于1000" }, ], - right: 10, // 右边距 + right: 10, realtime: false, - orient: "horizontal", // 水平显示 + orient: "horizontal", textStyle: { - color: "#fff", // 文字颜色 + color: "#fff", }, calculable: true, inRange: { - color: ["#4987F6", "#F6A149", "#D34343"], + color: ["#4987F6", "#F6A149", "#D34343",], }, }, series: [ @@ -198,23 +336,28 @@ const option = { type: "map", map: "changsha", hoverAnimation: true, - emphasis: { - areaColor: "#FFD700", // 高亮时区域颜色 - borderColor: "#FF0000", // 高亮时边框颜色 - borderWidth: 4 // 高亮时边框宽度 - }, label: { show: true, color: "white", }, itemStyle: { normal: { - areaColor: "#02215E", // 这里将地图区域的颜色修改为红色 + areaColor: "#02215E", + borderColor: "#1773c3", }, }, - }, + emphasis: { + areaColor: "#FFD700", // 高亮时区域颜色 + borderColor: "#FF0000", // 高亮时边框颜色 + borderWidth: 4 // 高亮时边框宽度 + }, + data: gobalTempMapVoList.map(item => ({ + name: item.name, + value: item.totalPro // 将 totalPro 值映射到 value 字段 + })) + } ], -}; +}) const option1 = ref({ xAxis: { @@ -501,6 +644,108 @@ const colors = [ ]; + + \ No newline at end of file