From 9c7ea2527d6e079fec2ea419631c2542ce0244ba Mon Sep 17 00:00:00 2001 From: zmj <1493694146@qq.com> Date: Mon, 4 Dec 2023 18:22:08 +0800 Subject: [PATCH] shit --- src/components/areaMap.vue | 279 ++++++++---------- src/view/detail.vue | 3 +- src/view/index.vue | 18 +- static/index/JS.png | Bin 0 -> 2962 bytes static/index/MC.png | Bin 1810 -> 2914 bytes static/index/{地方标签@3x.png => mapicon.png} | Bin static/jsonData/xuantan.js | 78 ++++- 7 files changed, 198 insertions(+), 180 deletions(-) create mode 100644 static/index/JS.png rename static/index/{地方标签@3x.png => mapicon.png} (100%) diff --git a/src/components/areaMap.vue b/src/components/areaMap.vue index 6925fd2..6a16cc2 100644 --- a/src/components/areaMap.vue +++ b/src/components/areaMap.vue @@ -44,74 +44,96 @@ import { ref, onMounted } from "vue" import axios from "axios"; import * as echarts from 'echarts'; import "echarts-gl" -// import geoJson from "/static/jsonData/xuantan.js" - +import iconbg from '/static/index/mapicon.png' +import geoJson from "/static/jsonData/xuantan.js" +const u = 'https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231129\/202311291816106120a4034.png' + const icon = "https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231204\/202312041608529c9e21252.png" + +const pointerFn = () => { + + // console.log() + let list = [] + geoJson.center.forEach((item, index) => { + + list.push({ + coord: item, + symbol: ('image://' + icon),// 自定义图片路径 + symbolSize: [100, 30], // 图片大小 + symbolOffset: ['50%', '-50%'], + value: geoJson.features[index].properties.name, + animation: true, + label: { + show: true, + color: 'white', + fontSize: 14, + }, + },) + }) + return list +} +// pointerFn() onMounted(() => { - const u = 'https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231129\/202311291816106120a4034.png' - - - axios.get('https://geo.datav.aliyun.com/areas_v3/bound/510500_full.json') - - - axios.get('https://geo.datav.aliyun.com/areas_v3/bound/510000_full.json') - .then(function (response) { - let geoJson = response.data - const dot = document.getElementById('img') var mapName = 'lz'; - let data = [ - ] const myChart = document.getElementById("chart2") /*获取地图数据*/ - - let option = { - - - geo: [ + + { - layoutSize: '100%',//大小 + type: "map", + map: mapName, + aspectScale: 1, + zoom: 1.2, + layoutCenter: ["50%", "51%"], + layoutSize: "100%", + roam: false, + label:{ + emphasis:{ + show:false + } + }, show: true, map: mapName, - - roam: false, zoom: 1.2, - layoutCenter: ["50%", "50%"], aspectScale: 1, - label: { - normal: { - show: false, - textStyle: { - color: '#fff' - } - }, - - }, + roam: false, itemStyle: { - areaColor: { - type: "linear", - x: 0, - y: 0, - x2: 0, - y2: 0, - colorStops: [{ - offset: 0, - color: "rgba(3,27,78,0.75)", // 0% 处的颜色 - }, { - offset: 1, - color: "rgba(58,149,253,0.75)", // 50% 处的颜色 - },], - global: true, // 缺省为 false + normal: { + areaColor: 'transparent', + }, - borderColor: "#D2F2FC", - borderWidth: 2, - shadowColor: "#8cd3ef", - shadowOffsetY: 10, - shadowBlur: 120, + emphasis: { + + areaColor: { + type: 'radial', // linear 线性渐变 radial径向渐变 + x: 0.5, // 0.5为正中心，如果小于渐变中心靠左 + y: 0.5, // 0.5为正中心，如果小于渐变中心靠上 + r: 1, + colorStops: [ + { + offset: 0, color: '#A46759' // 0% 处的颜色 + }, + { + offset: 0.1, color: '#A46759' // 0% 处的颜色 + }, + + + { + offset: 1, color: '#FFB821' // 100% 处的颜色 + }], + + } + + + // borderWidth: 0 + } + }, + }, @@ -125,20 +147,7 @@ onMounted(() => { layoutSize: "100%", roam: false, silent: true, - regions: [ - { - name: "南海诸岛", - itemStyle: { - // 隐藏地图 - normal: { - opacity: 0, // 为 0 时不绘制该图形 - } - }, - label: { - show: false // 隐藏文字 - } - } - ], + itemStyle: { normal: { borderWidth: 1, @@ -153,8 +162,6 @@ onMounted(() => { }, - - { type: "map", map: mapName, @@ -178,13 +185,15 @@ onMounted(() => { }, }, }, + + { type: "map", map: mapName, zlevel: -2, aspectScale: 1, zoom: 1.2, - layoutCenter: ["50%", "52%"], + layoutCenter: ["50%", "53%"], layoutSize: "100%", roam: false, silent: true, @@ -202,66 +211,17 @@ onMounted(() => { }, }, - // { - // type: "map", - // map: mapName, - // zlevel: -3, - // aspectScale: 1, - // zoom: 1.2, - // layoutCenter: ["50%", "53%"], - // layoutSize: "101%", - // roam: false, - // silent: true, - // regions: [ - // { - // name: "南海诸岛", - // itemStyle: { - // // 隐藏地图 - // normal: { - // opacity: 0, // 为 0 时不绘制该图形 - // } - // }, - // label: { - // show: false // 隐藏文字 - // } - // } - // ], - // itemStyle: { - // normal: { - // borderWidth: 1, - // // borderColor: "rgba(11, 43, 97,0.8)", - // borderColor: "rgba(58,149,253,0.4)", - // shadowColor: "rgba(58,149,253,1)", - // shadowOffsetY: 15, - // shadowBlur: 10, - // areaColor: "transpercent", - // }, - // }, - // }, { type: "map", map: mapName, zlevel: -4, aspectScale: 1, zoom: 1.2, - layoutCenter: ["50%", "53%"], + layoutCenter: ["50%", "54%"], layoutSize: "100%", roam: false, silent: true, - regions: [ - { - name: "南海诸岛", - itemStyle: { - // 隐藏地图 - normal: { - opacity: 0, // 为 0 时不绘制该图形 - } - }, - label: { - show: false // 隐藏文字 - } - } - ], + itemStyle: { normal: { borderWidth: 5, @@ -280,63 +240,54 @@ onMounted(() => { ], series: [ { - type: 'map', - map: mapName, - geoIndex: 0, - aspectScale: 1, //长宽比 - - showLegendSymbol: true, - roam: true, - label: { - show: true, - position: "top", - distance: -10, - formatter(params) { - return "2"; - }, - - textStyle: { - // color: "transparent", - padding: [15, 20], - backgroundColor: { - image: '/static/index/aa.png', - }, - // backgroundColor:"" - }, - }, - - - - animation: true, - markPoint: { - symbol: "none" + name: '资产数', + type: 'effectScatter', + coordinateSystem: 'geo', + rippleEffect: { + period: 4, //动画时间，值越小速度越快 + brushType: 'fill', //波纹绘制方式 stroke, fill + scale: 12, //波纹圆环最大限制，值越大波纹越大 + number: 2, }, - data: data, + + // 发散点的大小 + symbolSize: function (val) { + return 4 + // return val[2] / 10; + }, + markPoint: { + data:pointerFn() + }, + + data: (() => { + let data = { + 资产数: geoJson.center + + } + let finalData = [] + Object.keys(data).map((i, index) => { + let child = data[i].map((row) => ({ + value: row, + itemStyle: { + color: '#FFB922', + }, + })) + + finalData = [...finalData, ...child] + }) + return finalData + })(), }, - - ], }; - - - echarts.registerMap(mapName, geoJson) const bg = echarts.init(myChart) bg.setOption(option); - - - - - - - }) -}) - diff --git a/src/view/detail.vue b/src/view/detail.vue index 7e54c88..dc37c87 100644 --- a/src/view/detail.vue +++ b/src/view/detail.vue @@ -282,7 +282,8 @@ const test = () => { } onMounted(() => { - + document.getElementById("online").removeAttribute('_echarts_instance_'); + document.getElementById("offline").removeAttribute('_echarts_instance_'); initCharts('online', options.onLine) initCharts('offline', options.offLine) diff --git a/src/view/index.vue b/src/view/index.vue index 22f283a..ba1cc83 100644 --- a/src/view/index.vue +++ b/src/view/index.vue @@ -10,7 +10,6 @@
-
@@ -21,7 +20,6 @@
-
在线设备统计：45454 块
- -
- -
@@ -70,12 +64,12 @@
- 张伟
- 这是一名后端开发
@@ -173,7 +167,6 @@ const config3 = reactive({ ] }) - // 图表 const initCharts = (tag, option) => { var chartDom = document.getElementById(tag); @@ -181,9 +174,7 @@ const initCharts = (tag, option) => { myChart.setOption(option); } const ChildsDom = ref(null); - const showWarnPop = ref(false) - const hdClick = (e) => { // console.log(e) if (e.ceil) { @@ -192,7 +183,6 @@ const hdClick = (e) => { } } } - const showWarnDeatil = ref(false) const hdClick3 = (e) => { if (e.ceil) { @@ -203,7 +193,6 @@ const hdClick3 = (e) => { } } - const test = () => { router.replace('/detail') } @@ -221,7 +210,8 @@ const scrollTableFn = () => { } onMounted(() => { - + document.getElementById("online").removeAttribute('_echarts_instance_'); + document.getElementById("offline").removeAttribute('_echarts_instance_'); scrollTableFn() initCharts('online', options.onLine) initCharts('offline', options.offLine) diff --git a/static/index/JS.png b/static/index/JS.png new file mode 100644 index 0000000000000000000000000000000000000000..e18f674b6b48f7db55e51211fc5467693679fb4f GIT binary patch literal 2962 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 IM6N<$f^2Y{umAu6 literal 0 HcmV?d00001 diff --git a/static/index/MC.png b/static/index/MC.png index 85a22fbe5ec6a100b0c67dc4d8bdb377f9d24fa0..1e0518325cf3290cb52430b7a0ef67f523acb5c2 100644 GIT binary patch literal 2914 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 z