From dc8d3c20d19a26c8469626b31f406aa93340da58 Mon Sep 17 00:00:00 2001 From: lll Date: Mon, 4 Dec 2023 14:49:57 +0800 Subject: [PATCH 1/3] 1 --- src/router/index.js | 2 +- src/views/KHC.vue | 337 +++++++++++++++++++++----------------------- src/views/TAN.vue | 334 +++++++++++++++++++++---------------------- src/views/Two.vue | 25 ++-- src/views/XQXY.vue | 321 +++++++++++++++++++++-------------------- src/views/ZHDY.vue | 333 ++++++++++++++++++++++--------------------- 6 files changed, 671 insertions(+), 681 deletions(-) diff --git a/src/router/index.js b/src/router/index.js index 478deec..501e8d5 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -26,7 +26,7 @@ const routes = [ ]; const router = new VueRouter({ - mode: "history", + mode: "hash", base: process.env.BASE_URL, routes, }); diff --git a/src/views/KHC.vue b/src/views/KHC.vue index 8e98086..ac6207c 100644 --- a/src/views/KHC.vue +++ b/src/views/KHC.vue @@ -561,26 +561,20 @@ export default { ) { // 计算 let midRatio = (startRatio + endRatio) / 2; - let startRadian = startRatio * Math.PI * 2; let endRadian = endRatio * Math.PI * 2; let midRadian = midRatio * Math.PI * 2; - // 如果只有一个扇形，则不实现选中效果。 if (startRatio === 0 && endRatio === 1) { isSelected = false; } - // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3） k = typeof k !== "undefined" ? k : 1 / 3; - // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0） let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0; let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0; - // 计算高亮效果的放大比例（未高亮，则比例为 1） let hoverRate = isHovered ? 1.05 : 1; - // 返回曲面参数方程 return { u: { @@ -588,13 +582,11 @@ export default { max: Math.PI * 3, step: Math.PI / 32, }, - v: { min: 0, max: Math.PI * 2, step: Math.PI / 20, }, - x: function (u, v) { if (u < startRadian) { return ( @@ -884,6 +876,7 @@ export default { }; this.defineEcharts("ynflzb", option); }, + //地图 initMap() { //后端返回的数据 var data = [ @@ -974,174 +967,173 @@ export default { myChart.resize(); }); //获取山东地图数据。 - $.get( - "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json", - function (geojson) { - echarts.registerMap("山东", geojson); - let option = { - series: [ - { - tooltip: { - trigger: "item", - // show: false, - }, + let src = require("../assets/shandong.json"); + function registerMap() { + echarts.registerMap("山东", src); + let option = { + series: [ + { + tooltip: { + trigger: "item", + // show: false, + }, - name: "山东", - type: "map", - map: "山东", - boxDepth: 60, //地图倾斜度 - regionHeight: 6, //地图厚度 - aspectScale: 0.9, //地图长宽比 - emphasis: { - itemStyle: { - areaColor: "#70EAF4", // 高亮时候地图显示的颜色 - borderWidth: 2, // 高亮时的边框宽度 - }, - label: { - fontSize: "0.06rem", // 选中地图文字字号和字体颜色 - color: "#fff", - }, + name: "山东", + type: "map", + map: "山东", + boxDepth: 60, //地图倾斜度 + regionHeight: 6, //地图厚度 + aspectScale: 0.9, //地图长宽比 + emphasis: { + itemStyle: { + areaColor: "#70EAF4", // 高亮时候地图显示的颜色 + borderWidth: 2, // 高亮时的边框宽度 }, label: { - show: true, //是否显示市 - formatter: function (params) { - var name = params.name; - var value = params.value; - var text = ` {fline|${value}}\n{tline|${name}} `; - return text; - }, - textStyle: { - color: "#000", //文字颜色 - fontSize: "0.08rem", //文字大小 - fontFamily: "微软雅黑", - // backgroundColor: { - // image: "../assets/客户侧总体用能情况分析/光标.png", - // }, - // padding: [15, 20], - }, - rich: { - fline: { - padding: [0, 35], - color: "#FDCC00", - fontSize: "0.07rem", - fontWeight: 600, - }, - tline: { - padding: [0, 27], - color: "#fff", - fontSize: "0.06rem", - }, - }, + fontSize: "0.06rem", // 选中地图文字字号和字体颜色 + color: "#fff", }, - itemStyle: { - opacity: 0.8, // 透明度 - borderWidth: 2, //分界线宽度 - borderColor: "#0699E4", //分界线颜色 - areaColor: { - x: 0.5, - y: 0.7, - r: 0.5, - colorStops: [ - { - offset: 0, - color: "rgba(20,110,230,0.4)", - }, - { - offset: 1, - color: "rgba(6,33,121,0.4)", - }, - ], - global: false, // 缺省为 false - }, - }, - groundplane: { - show: true, - }, - data: data, - z: 999, - shading: "realistic", - // 真实感材质相关配置 shading: 'realistic'时有效 - realisticMaterial: { - detailTexture: "rgb(0, 102, 204)", // 纹理贴图 - textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数 - roughness: 0.8, // 调整光照模型的粗糙度 - metalness: 0.0, // 调整金属感，0.0 为非金属 - roughnessAdjust: 0, - }, - viewControl: { - distance: 90, // 地图视角 控制初始大小 - rotateSensitivity: 0, // 旋转 - zoomSensitivity: 1.5, // 缩放 - }, - zoom: 1.25, }, - ], - animation: true, - }; + label: { + show: true, //是否显示市 + formatter: function (params) { + var name = params.name; + var value = params.value; + var text = ` {fline|${value}}\n{tline|${name}} `; + return text; + }, + textStyle: { + color: "#000", //文字颜色 + fontSize: "0.08rem", //文字大小 + fontFamily: "微软雅黑", + // backgroundColor: { + // image: "../assets/客户侧总体用能情况分析/光标.png", + // }, + // padding: [15, 20], + }, + rich: { + fline: { + padding: [0, 35], + color: "#FDCC00", + fontSize: "0.07rem", + fontWeight: 600, + }, + tline: { + padding: [0, 27], + color: "#fff", + fontSize: "0.06rem", + }, + }, + }, + itemStyle: { + opacity: 0.8, // 透明度 + borderWidth: 2, //分界线宽度 + borderColor: "#0699E4", //分界线颜色 + areaColor: { + x: 0.5, + y: 0.7, + r: 0.5, + colorStops: [ + { + offset: 0, + color: "rgba(20,110,230,0.4)", + }, + { + offset: 1, + color: "rgba(6,33,121,0.4)", + }, + ], + global: false, // 缺省为 false + }, + }, + groundplane: { + show: true, + }, + data: data, + z: 999, + shading: "realistic", + // 真实感材质相关配置 shading: 'realistic'时有效 + realisticMaterial: { + detailTexture: "rgb(0, 102, 204)", // 纹理贴图 + textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数 + roughness: 0.8, // 调整光照模型的粗糙度 + metalness: 0.0, // 调整金属感，0.0 为非金属 + roughnessAdjust: 0, + }, + viewControl: { + distance: 90, // 地图视角 控制初始大小 + rotateSensitivity: 0, // 旋转 + zoomSensitivity: 1.5, // 缩放 + }, + zoom: 1.25, + }, + ], + animation: true, + }; - myChart.setOption(option); - myChart.on("click", chartClick); - //点击地图区域事件 - function chartClick(param) { - console.log(param); - myChart.setOption(option, false); - window.addEventListener("resize", function () { - myChart.resize(); - }); - // var selectedPro = param.name; - // if (!cityProper[selectedPro]) { - // option.series.splice(1); - // option.legend = null; - // option.visualMap = null; - // myChart.setOption(option, true); - // return; - // } - //获取点击区域数据 - // $.get(cityProper[selectedPro], function (geojson) { - // echarts.registerMap(selectedPro, geojson); - // //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。 - // option.series[0] = { - // name: "", - // type: "map", - // map: selectedPro, - // boxDepth: 80, //地图倾斜度 - // regionHeight: 5, //地图厚度 - // itemStyle: { - // normal: { - // label: { - // show: true, - // }, - // }, - // emphasis: { - // label: { - // show: true, - // }, - // }, - // }, - // groundplane: { - // show: false, - // }, - // data: data, - // shading: "realistic", - // // 真实感材质相关配置 shading: 'realistic'时有效 - // realisticMaterial: { - // detailTexture: "#fff", // 纹理贴图 - // textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数 - // roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙 - // metalness: 0, // 0材质是非金属 ，1金属 - // roughnessAdjust: 0, - // }, - // viewControl: { - // distance: 30, // 地图视角 控制初始大小 - // rotateSensitivity: 1, // 旋转 - // zoomSensitivity: 1, // 缩放 - // }, - // }; - // myChart.setOption(option); - // }); - } + myChart.setOption(option); + myChart.on("click", chartClick); + //点击地图区域事件 + function chartClick(param) { + console.log(param); + myChart.setOption(option, false); + window.addEventListener("resize", function () { + myChart.resize(); + }); + // var selectedPro = param.name; + // if (!cityProper[selectedPro]) { + // option.series.splice(1); + // option.legend = null; + // option.visualMap = null; + // myChart.setOption(option, true); + // return; + // } + //获取点击区域数据 + // $.get(cityProper[selectedPro], function (geojson) { + // echarts.registerMap(selectedPro, geojson); + // //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。 + // option.series[0] = { + // name: "", + // type: "map", + // map: selectedPro, + // boxDepth: 80, //地图倾斜度 + // regionHeight: 5, //地图厚度 + // itemStyle: { + // normal: { + // label: { + // show: true, + // }, + // }, + // emphasis: { + // label: { + // show: true, + // }, + // }, + // }, + // groundplane: { + // show: false, + // }, + // data: data, + // shading: "realistic", + // // 真实感材质相关配置 shading: 'realistic'时有效 + // realisticMaterial: { + // detailTexture: "#fff", // 纹理贴图 + // textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数 + // roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙 + // metalness: 0, // 0材质是非金属 ，1金属 + // roughnessAdjust: 0, + // }, + // viewControl: { + // distance: 30, // 地图视角 控制初始大小 + // rotateSensitivity: 1, // 旋转 + // zoomSensitivity: 1, // 缩放 + // }, + // }; + // myChart.setOption(option); + // }); } - ); + } + registerMap(); }, //用户资源分布情况 initfbqk() { @@ -1490,9 +1482,7 @@ export default { background: url("../assets/客户侧总体用能情况分析/用能量-框.png"); background-size: cover; margin-top: 6px; - position: relative; - .title { position: absolute; left: 190px; @@ -1690,6 +1680,7 @@ export default { width: 100%; height: 100%; position: relative; + background: url(); display: flex; flex-direction: column; align-items: center; @@ -1708,8 +1699,8 @@ export default { } #yhzyfbqk { - width: 100%; - height: 100%; + width: 994px; + height: 324px; } } } diff --git a/src/views/TAN.vue b/src/views/TAN.vue index efe41df..b6b2e49 100644 --- a/src/views/TAN.vue +++ b/src/views/TAN.vue @@ -790,7 +790,7 @@ export default { fontWeight: "normal", // .0625rem /* 12/192 */ // fontSize: fontSizeRem(12), - fontSize:"0.0625rem", + fontSize: "0.0625rem", color: "#fff", }, }, @@ -1392,178 +1392,178 @@ export default { myChart.resize(); }); //获取山东地图数据。 - $.get( - "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json", - function (geojson) { - echarts.registerMap("山东", geojson); - let option = { - series: [ - { - tooltip: { - trigger: "item", - // show: false, - }, - name: "山东", - type: "map", - map: "山东", - boxDepth: 60, //地图倾斜度 - regionHeight: 6, //地图厚度 - aspectScale: 0.9, //地图长宽比 - emphasis: { - itemStyle: { - areaColor: "#70EAF4", // 高亮时候地图显示的颜色 - borderWidth: 2, // 高亮时的边框宽度 - }, - label: { - // .0625rem /* 12/192 */ - // fontSize: 12, // 选中地图文字字号和字体颜色 - fontSize: "0.0625rem", // 选中地图文字字号和字体颜色 - color: "#fff", - }, + let src = require("../assets/shandong.json"); + + function registerMap() { + echarts.registerMap("山东", src); + let option = { + series: [ + { + tooltip: { + trigger: "item", + // show: false, + }, + name: "山东", + type: "map", + map: "山东", + boxDepth: 60, //地图倾斜度 + regionHeight: 6, //地图厚度 + aspectScale: 0.9, //地图长宽比 + emphasis: { + itemStyle: { + areaColor: "#70EAF4", // 高亮时候地图显示的颜色 + borderWidth: 2, // 高亮时的边框宽度 }, label: { - show: true, //是否显示市 - formatter: function (params) { - var name = params.name; - var value = params.value; - var text = ` {fline|${value}}\n{tline|${name}} `; - return text; - }, - textStyle: { - color: "#000", //文字颜色 - // fontSize: 16, //文字大小 - fontSize:"0.0833rem", //文字大小 - fontFamily: "微软雅黑", - // backgroundColor: { - // image: "../assets/客户侧总体用能情况分析/光标.png", - // }, - // padding: [15, 20], - }, - rich: { - fline: { - padding: [0, 35], - color: "#FDCC00", - // fontSize: 14, - fontSize: "0.0729rem", - fontWeight: 600, - }, - tline: { - padding: [0, 27], - color: "#fff", - // fontSize: 12, - fontSize: "0.0625rem", - }, - }, + // .0625rem /* 12/192 */ + // fontSize: 12, // 选中地图文字字号和字体颜色 + fontSize: "0.0625rem", // 选中地图文字字号和字体颜色 + color: "#fff", }, - itemStyle: { - opacity: 0.8, // 透明度 - borderWidth: 2, //分界线宽度 - borderColor: "#0699E4", //分界线颜色 - areaColor: { - x: 0.5, - y: 0.7, - r: 0.5, - colorStops: [ - { - offset: 0, - color: "rgba(20,110,230,0.4)", - }, - { - offset: 1, - color: "rgba(6,33,121,0.4)", - }, - ], - global: false, // 缺省为 false - }, - }, - groundplane: { - show: true, - }, - data: data, - z: 999, - shading: "realistic", - // 真实感材质相关配置 shading: 'realistic'时有效 - realisticMaterial: { - detailTexture: "rgb(0, 102, 204)", // 纹理贴图 - textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数 - roughness: 0.8, // 调整光照模型的粗糙度 - metalness: 0.0, // 调整金属感，0.0 为非金属 - roughnessAdjust: 0, - }, - viewControl: { - distance: 90, // 地图视角 控制初始大小 - rotateSensitivity: 0, // 旋转 - zoomSensitivity: 1.5, // 缩放 - }, - zoom: 1.25, }, - ], - animation: true, - }; + label: { + show: true, //是否显示市 + formatter: function (params) { + var name = params.name; + var value = params.value; + var text = ` {fline|${value}}\n{tline|${name}} `; + return text; + }, + textStyle: { + color: "#000", //文字颜色 + // fontSize: 16, //文字大小 + fontSize: "0.0833rem", //文字大小 + fontFamily: "微软雅黑", + // backgroundColor: { + // image: "../assets/客户侧总体用能情况分析/光标.png", + // }, + // padding: [15, 20], + }, + rich: { + fline: { + padding: [0, 35], + color: "#FDCC00", + // fontSize: 14, + fontSize: "0.0729rem", + fontWeight: 600, + }, + tline: { + padding: [0, 27], + color: "#fff", + // fontSize: 12, + fontSize: "0.0625rem", + }, + }, + }, + itemStyle: { + opacity: 0.8, // 透明度 + borderWidth: 2, //分界线宽度 + borderColor: "#0699E4", //分界线颜色 + areaColor: { + x: 0.5, + y: 0.7, + r: 0.5, + colorStops: [ + { + offset: 0, + color: "rgba(20,110,230,0.4)", + }, + { + offset: 1, + color: "rgba(6,33,121,0.4)", + }, + ], + global: false, // 缺省为 false + }, + }, + groundplane: { + show: true, + }, + data: data, + z: 999, + shading: "realistic", + // 真实感材质相关配置 shading: 'realistic'时有效 + realisticMaterial: { + detailTexture: "rgb(0, 102, 204)", // 纹理贴图 + textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数 + roughness: 0.8, // 调整光照模型的粗糙度 + metalness: 0.0, // 调整金属感，0.0 为非金属 + roughnessAdjust: 0, + }, + viewControl: { + distance: 90, // 地图视角 控制初始大小 + rotateSensitivity: 0, // 旋转 + zoomSensitivity: 1.5, // 缩放 + }, + zoom: 1.25, + }, + ], + animation: true, + }; - myChart.setOption(option); - myChart.on("click", chartClick); - //点击地图区域事件 - function chartClick(param) { - console.log(param); - myChart.setOption(option, false); - window.addEventListener("resize", function () { - myChart.resize(); - }); - // var selectedPro = param.name; - // if (!cityProper[selectedPro]) { - // option.series.splice(1); - // option.legend = null; - // option.visualMap = null; - // myChart.setOption(option, true); - // return; - // } - //获取点击区域数据 - // $.get(cityProper[selectedPro], function (geojson) { - // echarts.registerMap(selectedPro, geojson); - // //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。 - // option.series[0] = { - // name: "", - // type: "map", - // map: selectedPro, - // boxDepth: 80, //地图倾斜度 - // regionHeight: 5, //地图厚度 - // itemStyle: { - // normal: { - // label: { - // show: true, - // }, - // }, - // emphasis: { - // label: { - // show: true, - // }, - // }, - // }, - // groundplane: { - // show: false, - // }, - // data: data, - // shading: "realistic", - // // 真实感材质相关配置 shading: 'realistic'时有效 - // realisticMaterial: { - // detailTexture: "#fff", // 纹理贴图 - // textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数 - // roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙 - // metalness: 0, // 0材质是非金属 ，1金属 - // roughnessAdjust: 0, - // }, - // viewControl: { - // distance: 30, // 地图视角 控制初始大小 - // rotateSensitivity: 1, // 旋转 - // zoomSensitivity: 1, // 缩放 - // }, - // }; - // myChart.setOption(option); - // }); - } + myChart.setOption(option); + myChart.on("click", chartClick); + //点击地图区域事件 + function chartClick(param) { + console.log(param); + myChart.setOption(option, false); + window.addEventListener("resize", function () { + myChart.resize(); + }); + // var selectedPro = param.name; + // if (!cityProper[selectedPro]) { + // option.series.splice(1); + // option.legend = null; + // option.visualMap = null; + // myChart.setOption(option, true); + // return; + // } + //获取点击区域数据 + // $.get(cityProper[selectedPro], function (geojson) { + // echarts.registerMap(selectedPro, geojson); + // //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。 + // option.series[0] = { + // name: "", + // type: "map", + // map: selectedPro, + // boxDepth: 80, //地图倾斜度 + // regionHeight: 5, //地图厚度 + // itemStyle: { + // normal: { + // label: { + // show: true, + // }, + // }, + // emphasis: { + // label: { + // show: true, + // }, + // }, + // }, + // groundplane: { + // show: false, + // }, + // data: data, + // shading: "realistic", + // // 真实感材质相关配置 shading: 'realistic'时有效 + // realisticMaterial: { + // detailTexture: "#fff", // 纹理贴图 + // textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数 + // roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙 + // metalness: 0, // 0材质是非金属 ，1金属 + // roughnessAdjust: 0, + // }, + // viewControl: { + // distance: 30, // 地图视角 控制初始大小 + // rotateSensitivity: 1, // 旋转 + // zoomSensitivity: 1, // 缩放 + // }, + // }; + // myChart.setOption(option); + // }); } - ); + } + registerMap(); }, nyxhqk() { var attaData1 = [62, 52, 34, 61, 75, 140]; diff --git a/src/views/Two.vue b/src/views/Two.vue index d69092b..0ef4242 100644 --- a/src/views/Two.vue +++ b/src/views/Two.vue @@ -17,28 +17,28 @@
-
+

用电量(MWH)

84.00-13.20%

-
+

用蒸汽量(m2)

45.32-23.20%

-
+

用水量(m2)

56.00-33.20%

-
+

用汽量(m2)

37.0043.20%

@@ -180,7 +180,7 @@ export default { borderWidth: 2, // 高亮时的边框宽度 }, label: { - fontSize: 12, // 选中地图文字字号和字体颜色 + fontSize: "0.06rem", // 选中地图文字字号和字体颜色 color: "#fff", }, }, @@ -194,7 +194,7 @@ export default { }, textStyle: { color: "#000", //文字颜色 - fontSize: 16, //文字大小 + fontSize: "0.08rem", //文字大小 fontFamily: "微软雅黑", // backgroundColor: { // image: "../assets/客户侧总体用能情况分析/光标.png", @@ -205,13 +205,13 @@ export default { fline: { padding: [0, 35], color: "#FDCC00", - fontSize: 14, + fontSize: "0.07rem", fontWeight: 600, }, tline: { padding: [0, 27], color: "#fff", - fontSize: 12, + fontSize: "0.06rem", }, }, }, @@ -444,17 +444,18 @@ export default { width: 72px; height: 72px; } - - div { + .box1 { + display: flex; + flex-direction: column; + height: 72px; p:nth-of-type(1) { width: 120px; margin-bottom: 10px; margin-top: 5px; font-size: 14px; - font-family: " AlibabaPuHuiTi"; + font-family: "AlibabaPuHuiTi"; font-weight: 400; } - span:nth-of-type(1) { font-size: 20px; font-family: "AlibabaPuHuiTi"; diff --git a/src/views/XQXY.vue b/src/views/XQXY.vue index 4c1b716..d9ac45d 100644 --- a/src/views/XQXY.vue +++ b/src/views/XQXY.vue @@ -1298,173 +1298,172 @@ export default { myChart.resize(); }); //获取山东地图数据。 - $.get( - "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json", - function (geojson) { - echarts.registerMap("山东", geojson); - let option = { - series: [ - { - tooltip: { - trigger: "item", - // show: false, - }, - name: "山东", - type: "map", - map: "山东", - boxDepth: 60, //地图倾斜度 - regionHeight: 6, //地图厚度 - aspectScale: 0.9, //地图长宽比 - emphasis: { - itemStyle: { - areaColor: "#70EAF4", // 高亮时候地图显示的颜色 - borderWidth: 2, // 高亮时的边框宽度 - }, - label: { - fontSize: "0.0625rem", // 选中地图文字字号和字体颜色 - color: "#fff", - }, + let src = require("../assets/shandong.json"); + function registerMap() { + echarts.registerMap("山东", src); + let option = { + series: [ + { + tooltip: { + trigger: "item", + // show: false, + }, + name: "山东", + type: "map", + map: "山东", + boxDepth: 60, //地图倾斜度 + regionHeight: 6, //地图厚度 + aspectScale: 0.9, //地图长宽比 + emphasis: { + itemStyle: { + areaColor: "#70EAF4", // 高亮时候地图显示的颜色 + borderWidth: 2, // 高亮时的边框宽度 }, label: { - show: true, //是否显示市 - formatter: function (params) { - var name = params.name; - var value = params.value; - var text = ` {fline|${value}}\n{tline|${name}} `; - return text; - }, - textStyle: { - color: "#000", //文字颜色 - fontSize: "0.0833rem", //文字大小 - fontFamily: "微软雅黑", - // backgroundColor: { - // image: "../assets/客户侧总体用能情况分析/光标.png", - // }, - // padding: [15, 20], - }, - rich: { - fline: { - padding: [0, 35], - color: "#FDCC00", - fontSize: "0.0729rem", - fontWeight: 600, - }, - tline: { - padding: [0, 27], - color: "#fff", - fontSize: "0.0625rem", - }, - }, + fontSize: "0.0625rem", // 选中地图文字字号和字体颜色 + color: "#fff", }, - itemStyle: { - opacity: 0.8, // 透明度 - borderWidth: 2, //分界线宽度 - borderColor: "#0699E4", //分界线颜色 - areaColor: { - x: 0.5, - y: 0.7, - r: 0.5, - colorStops: [ - { - offset: 0, - color: "rgba(20,110,230,0.4)", - }, - { - offset: 1, - color: "rgba(6,33,121,0.4)", - }, - ], - global: false, // 缺省为 false - }, - }, - groundplane: { - show: true, - }, - data: data, - z: 999, - shading: "realistic", - // 真实感材质相关配置 shading: 'realistic'时有效 - realisticMaterial: { - detailTexture: "rgb(0, 102, 204)", // 纹理贴图 - textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数 - roughness: 0.8, // 调整光照模型的粗糙度 - metalness: 0.0, // 调整金属感，0.0 为非金属 - roughnessAdjust: 0, - }, - viewControl: { - distance: 90, // 地图视角 控制初始大小 - rotateSensitivity: 0, // 旋转 - zoomSensitivity: 1.5, // 缩放 - }, - zoom: 1.25, }, - ], - animation: true, - }; + label: { + show: true, //是否显示市 + formatter: function (params) { + var name = params.name; + var value = params.value; + var text = ` {fline|${value}}\n{tline|${name}} `; + return text; + }, + textStyle: { + color: "#000", //文字颜色 + fontSize: "0.0833rem", //文字大小 + fontFamily: "微软雅黑", + // backgroundColor: { + // image: "../assets/客户侧总体用能情况分析/光标.png", + // }, + // padding: [15, 20], + }, + rich: { + fline: { + padding: [0, 35], + color: "#FDCC00", + fontSize: "0.0729rem", + fontWeight: 600, + }, + tline: { + padding: [0, 27], + color: "#fff", + fontSize: "0.0625rem", + }, + }, + }, + itemStyle: { + opacity: 0.8, // 透明度 + borderWidth: 2, //分界线宽度 + borderColor: "#0699E4", //分界线颜色 + areaColor: { + x: 0.5, + y: 0.7, + r: 0.5, + colorStops: [ + { + offset: 0, + color: "rgba(20,110,230,0.4)", + }, + { + offset: 1, + color: "rgba(6,33,121,0.4)", + }, + ], + global: false, // 缺省为 false + }, + }, + groundplane: { + show: true, + }, + data: data, + z: 999, + shading: "realistic", + // 真实感材质相关配置 shading: 'realistic'时有效 + realisticMaterial: { + detailTexture: "rgb(0, 102, 204)", // 纹理贴图 + textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数 + roughness: 0.8, // 调整光照模型的粗糙度 + metalness: 0.0, // 调整金属感，0.0 为非金属 + roughnessAdjust: 0, + }, + viewControl: { + distance: 90, // 地图视角 控制初始大小 + rotateSensitivity: 0, // 旋转 + zoomSensitivity: 1.5, // 缩放 + }, + zoom: 1.25, + }, + ], + animation: true, + }; - myChart.setOption(option); - myChart.on("click", chartClick); - //点击地图区域事件 - function chartClick(param) { - console.log(param); - myChart.setOption(option, false); - window.addEventListener("resize", function () { - myChart.resize(); - }); - // var selectedPro = param.name; - // if (!cityProper[selectedPro]) { - // option.series.splice(1); - // option.legend = null; - // option.visualMap = null; - // myChart.setOption(option, true); - // return; - // } - //获取点击区域数据 - // $.get(cityProper[selectedPro], function (geojson) { - // echarts.registerMap(selectedPro, geojson); - // //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。 - // option.series[0] = { - // name: "", - // type: "map", - // map: selectedPro, - // boxDepth: 80, //地图倾斜度 - // regionHeight: 5, //地图厚度 - // itemStyle: { - // normal: { - // label: { - // show: true, - // }, - // }, - // emphasis: { - // label: { - // show: true, - // }, - // }, - // }, - // groundplane: { - // show: false, - // }, - // data: data, - // shading: "realistic", - // // 真实感材质相关配置 shading: 'realistic'时有效 - // realisticMaterial: { - // detailTexture: "#fff", // 纹理贴图 - // textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数 - // roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙 - // metalness: 0, // 0材质是非金属 ，1金属 - // roughnessAdjust: 0, - // }, - // viewControl: { - // distance: 30, // 地图视角 控制初始大小 - // rotateSensitivity: 1, // 旋转 - // zoomSensitivity: 1, // 缩放 - // }, - // }; - // myChart.setOption(option); - // }); - } + myChart.setOption(option); + myChart.on("click", chartClick); + //点击地图区域事件 + function chartClick(param) { + console.log(param); + myChart.setOption(option, false); + window.addEventListener("resize", function () { + myChart.resize(); + }); + // var selectedPro = param.name; + // if (!cityProper[selectedPro]) { + // option.series.splice(1); + // option.legend = null; + // option.visualMap = null; + // myChart.setOption(option, true); + // return; + // } + //获取点击区域数据 + // $.get(cityProper[selectedPro], function (geojson) { + // echarts.registerMap(selectedPro, geojson); + // //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。 + // option.series[0] = { + // name: "", + // type: "map", + // map: selectedPro, + // boxDepth: 80, //地图倾斜度 + // regionHeight: 5, //地图厚度 + // itemStyle: { + // normal: { + // label: { + // show: true, + // }, + // }, + // emphasis: { + // label: { + // show: true, + // }, + // }, + // }, + // groundplane: { + // show: false, + // }, + // data: data, + // shading: "realistic", + // // 真实感材质相关配置 shading: 'realistic'时有效 + // realisticMaterial: { + // detailTexture: "#fff", // 纹理贴图 + // textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数 + // roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙 + // metalness: 0, // 0材质是非金属 ，1金属 + // roughnessAdjust: 0, + // }, + // viewControl: { + // distance: 30, // 地图视角 控制初始大小 + // rotateSensitivity: 1, // 旋转 + // zoomSensitivity: 1, // 缩放 + // }, + // }; + // myChart.setOption(option); + // }); } - ); + } + registerMap(); }, }, mounted() { diff --git a/src/views/ZHDY.vue b/src/views/ZHDY.vue index 1867c4d..a878f22 100644 --- a/src/views/ZHDY.vue +++ b/src/views/ZHDY.vue @@ -1160,177 +1160,176 @@ export default { myChart.resize(); }); //获取山东地图数据。 - $.get( - "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json", - function (geojson) { - echarts.registerMap("山东", geojson); - let option = { - series: [ - { - tooltip: { - trigger: "item", - // show: false, - }, - name: "山东", - type: "map", - map: "山东", - boxDepth: 60, //地图倾斜度 - regionHeight: 6, //地图厚度 - aspectScale: 0.9, //地图长宽比 - emphasis: { - itemStyle: { - areaColor: "#70EAF4", // 高亮时候地图显示的颜色 - borderWidth: 2, // 高亮时的边框宽度 - }, - label: { - // fontSize: 12, // 选中地图文字字号和字体颜色 - fontSize: "0.0625rem", // 选中地图文字字号和字体颜色 - color: "#fff", - }, + let src = require("../assets/shandong.json"); + function registerMap() { + echarts.registerMap("山东", src); + let option = { + series: [ + { + tooltip: { + trigger: "item", + // show: false, + }, + name: "山东", + type: "map", + map: "山东", + boxDepth: 60, //地图倾斜度 + regionHeight: 6, //地图厚度 + aspectScale: 0.9, //地图长宽比 + emphasis: { + itemStyle: { + areaColor: "#70EAF4", // 高亮时候地图显示的颜色 + borderWidth: 2, // 高亮时的边框宽度 }, label: { - show: true, //是否显示市 - formatter: function (params) { - var name = params.name; - var value = params.value; - var text = ` {fline|${value}}\n{tline|${name}} `; - return text; - }, - textStyle: { - color: "#000", //文字颜色 - // fontSize: 16, //文字大小 - fontSize: "0.0833rem", //文字大小 - fontFamily: "微软雅黑", - // backgroundColor: { - // image: "../assets/客户侧总体用能情况分析/光标.png", - // }, - // padding: [15, 20], - }, - rich: { - fline: { - padding: [0, 35], - color: "#FDCC00", - // fontSize: 14, - fontSize: "0.0729rem", - fontWeight: 600, - }, - tline: { - padding: [0, 27], - color: "#fff", - // fontSize: 12, - fontSize: "0.0625rem", - }, - }, + // fontSize: 12, // 选中地图文字字号和字体颜色 + fontSize: "0.0625rem", // 选中地图文字字号和字体颜色 + color: "#fff", }, - itemStyle: { - opacity: 0.8, // 透明度 - borderWidth: 2, //分界线宽度 - borderColor: "#0699E4", //分界线颜色 - areaColor: { - x: 0.5, - y: 0.7, - r: 0.5, - colorStops: [ - { - offset: 0, - color: "rgba(20,110,230,0.4)", - }, - { - offset: 1, - color: "rgba(6,33,121,0.4)", - }, - ], - global: false, // 缺省为 false - }, - }, - groundplane: { - show: true, - }, - data: data, - z: 999, - shading: "realistic", - // 真实感材质相关配置 shading: 'realistic'时有效 - realisticMaterial: { - detailTexture: "rgb(0, 102, 204)", // 纹理贴图 - textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数 - roughness: 0.8, // 调整光照模型的粗糙度 - metalness: 0.0, // 调整金属感，0.0 为非金属 - roughnessAdjust: 0, - }, - viewControl: { - distance: 90, // 地图视角 控制初始大小 - rotateSensitivity: 0, // 旋转 - zoomSensitivity: 1.5, // 缩放 - }, - zoom: 1.25, }, - ], - animation: true, - }; + label: { + show: true, //是否显示市 + formatter: function (params) { + var name = params.name; + var value = params.value; + var text = ` {fline|${value}}\n{tline|${name}} `; + return text; + }, + textStyle: { + color: "#000", //文字颜色 + // fontSize: 16, //文字大小 + fontSize: "0.0833rem", //文字大小 + fontFamily: "微软雅黑", + // backgroundColor: { + // image: "../assets/客户侧总体用能情况分析/光标.png", + // }, + // padding: [15, 20], + }, + rich: { + fline: { + padding: [0, 35], + color: "#FDCC00", + // fontSize: 14, + fontSize: "0.0729rem", + fontWeight: 600, + }, + tline: { + padding: [0, 27], + color: "#fff", + // fontSize: 12, + fontSize: "0.0625rem", + }, + }, + }, + itemStyle: { + opacity: 0.8, // 透明度 + borderWidth: 2, //分界线宽度 + borderColor: "#0699E4", //分界线颜色 + areaColor: { + x: 0.5, + y: 0.7, + r: 0.5, + colorStops: [ + { + offset: 0, + color: "rgba(20,110,230,0.4)", + }, + { + offset: 1, + color: "rgba(6,33,121,0.4)", + }, + ], + global: false, // 缺省为 false + }, + }, + groundplane: { + show: true, + }, + data: data, + z: 999, + shading: "realistic", + // 真实感材质相关配置 shading: 'realistic'时有效 + realisticMaterial: { + detailTexture: "rgb(0, 102, 204)", // 纹理贴图 + textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数 + roughness: 0.8, // 调整光照模型的粗糙度 + metalness: 0.0, // 调整金属感，0.0 为非金属 + roughnessAdjust: 0, + }, + viewControl: { + distance: 90, // 地图视角 控制初始大小 + rotateSensitivity: 0, // 旋转 + zoomSensitivity: 1.5, // 缩放 + }, + zoom: 1.25, + }, + ], + animation: true, + }; - myChart.setOption(option); - myChart.on("click", chartClick); - //点击地图区域事件 - function chartClick(param) { - console.log(param); - myChart.setOption(option, false); - window.addEventListener("resize", function () { - myChart.resize(); - }); - // var selectedPro = param.name; - // if (!cityProper[selectedPro]) { - // option.series.splice(1); - // option.legend = null; - // option.visualMap = null; - // myChart.setOption(option, true); - // return; - // } - //获取点击区域数据 - // $.get(cityProper[selectedPro], function (geojson) { - // echarts.registerMap(selectedPro, geojson); - // //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。 - // option.series[0] = { - // name: "", - // type: "map", - // map: selectedPro, - // boxDepth: 80, //地图倾斜度 - // regionHeight: 5, //地图厚度 - // itemStyle: { - // normal: { - // label: { - // show: true, - // }, - // }, - // emphasis: { - // label: { - // show: true, - // }, - // }, - // }, - // groundplane: { - // show: false, - // }, - // data: data, - // shading: "realistic", - // // 真实感材质相关配置 shading: 'realistic'时有效 - // realisticMaterial: { - // detailTexture: "#fff", // 纹理贴图 - // textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数 - // roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙 - // metalness: 0, // 0材质是非金属 ，1金属 - // roughnessAdjust: 0, - // }, - // viewControl: { - // distance: 30, // 地图视角 控制初始大小 - // rotateSensitivity: 1, // 旋转 - // zoomSensitivity: 1, // 缩放 - // }, - // }; - // myChart.setOption(option); - // }); - } + myChart.setOption(option); + myChart.on("click", chartClick); + //点击地图区域事件 + function chartClick(param) { + console.log(param); + myChart.setOption(option, false); + window.addEventListener("resize", function () { + myChart.resize(); + }); + // var selectedPro = param.name; + // if (!cityProper[selectedPro]) { + // option.series.splice(1); + // option.legend = null; + // option.visualMap = null; + // myChart.setOption(option, true); + // return; + // } + //获取点击区域数据 + // $.get(cityProper[selectedPro], function (geojson) { + // echarts.registerMap(selectedPro, geojson); + // //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。 + // option.series[0] = { + // name: "", + // type: "map", + // map: selectedPro, + // boxDepth: 80, //地图倾斜度 + // regionHeight: 5, //地图厚度 + // itemStyle: { + // normal: { + // label: { + // show: true, + // }, + // }, + // emphasis: { + // label: { + // show: true, + // }, + // }, + // }, + // groundplane: { + // show: false, + // }, + // data: data, + // shading: "realistic", + // // 真实感材质相关配置 shading: 'realistic'时有效 + // realisticMaterial: { + // detailTexture: "#fff", // 纹理贴图 + // textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数 + // roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙 + // metalness: 0, // 0材质是非金属 ，1金属 + // roughnessAdjust: 0, + // }, + // viewControl: { + // distance: 30, // 地图视角 控制初始大小 + // rotateSensitivity: 1, // 旋转 + // zoomSensitivity: 1, // 缩放 + // }, + // }; + // myChart.setOption(option); + // }); } - ); + } + registerMap(); }, }, mounted() { @@ -1377,7 +1376,7 @@ export default { line-height: 47px; letter-spacing: 3px; color: #fff; - margin-left: -60px; + margin-left: 60px; } img:nth-of-type(1) { @@ -2010,7 +2009,7 @@ export default { line-height: 36px; } p.second { - width:118px; + width: 118px; height: 36px; padding-left: 15px; font-size: 30px; From efde66960f2f67e80bdd0ca555027e3c9f6873bf Mon Sep 17 00:00:00 2001 From: lll Date: Tue, 5 Dec 2023 10:27:32 +0800 Subject: [PATCH 2/3] 11 --- public/index.html | 2 - src/assets/客户侧总体用能情况分析/logo.png | Bin 0 -> 11380 bytes src/views/KHC.vue | 370 +++++++++------------ 3 files changed, 164 insertions(+), 208 deletions(-) create mode 100644 src/assets/客户侧总体用能情况分析/logo.png diff --git a/public/index.html b/public/index.html index e17bc69..4913f31 100644 --- a/public/index.html +++ b/public/index.html @@ -9,8 +9,6 @@ <%= htmlWebpackPlugin.options.title %> - - diff --git a/src/assets/客户侧总体用能情况分析/logo.png b/src/assets/客户侧总体用能情况分析/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..e4660e623ec8b9f9738560fa822b502be78652de GIT binary patch literal 11380 zcmV-)EQ`~LP){002A)1^@s6pr6dD00001b5ch_0Itp) z=>Px#1am@3R0s$N2z&@+hyVZ}07*naRCt{2op+p7)wRdJduAA5=p9866tP!g!-lA_ z0(KE&i<%gFY_VZ)i6uUx*f5F}HBlob5X7#aQEX39suTeM>2-#gS?`bE+MF|Y?j2?T zUlO_N^SPgyd+t8FuD;gZJCKJugP8@O6)-P^U~BPyJD>nq3M^flI`WW*xTCzx5A+1i1crtXD(cv;QNV7%$-r|VgvuJqHUb&}E2-T$ zihzO;!o0flDGxt=DEfDI;75jofCs2MQ|klFG_ykxQARMJ0niI*0Sp1|Ftb$|W#)wt z1_GE_5l|7Ox0w}qe+qHJ1XdG!W_iRA?g18i-8GHHfMVbaV81$!IS)T^_{kExtJ;wW zzXLvsKjnC(0N593nJV*h;39GpSbgA{EYHUQ1I?@+Fc{e0%wnAZ*v$XG1-Lx<2?J&T zy@7InHV+YSOJG^5j}EiJ5@t~e zYy@nVqkKpIq+tjf{Vh(x8LlsyjVmGrwAcPRg zLkN{-b_7B;12zU)1Ggd-6repKfX$HKm{NlK!Q@mcVpi4v7sL zkWIWRlKK_E3K9vswqV}Zs6Ctp^aY*-UL>(~FVA>yq_;l`_y=pY{htF~0@BXCNbn00 zK^Bmh7mI-J{r?52^4T<*Z4i@~2Q>D6jqv&!B26imc9e%a)LF6@0sA8&nd{$IkT{vX zM+n>mA>bI`e57(NM+m#p%hU%tBO(G3`{qJ2!^8qoNnwZIW z#Qb*g@9zM6BW(#}g5*PZdB_QCbmX|BE5c^L-;krID5aLII>5U|RBcKzK)KL{J z1^NNU0k@D?JH_Q-ba13c?(hE#02 zD=;O5P+H6Jr6uSCBys9nfvu5hygAZTK0z_<%=iBQv;n>W_Ce0ELhtYSsj@?WUxpA? zWV|0?N5t3+#pprIEr!#&uVE|&NFyon??)kN9!-K@kl6ou$U`-#$!2c`JdY&XuE4QK za;-p)t69K%NS(b35&la^(k(*7&;UuGlM$gVLJp?6$X0&~CB6*sHXlJ@xof>|FNY9T znOS}0O+ONN%gk;9%Igr4Yk)L|D0QRlJ_#kP{0tAKiZ($p+%15K zh**XK$A=KUHM2h<#Jdn7|8+=meTclymB?l=Ji9)tnomFhxa-m zsoD@Y7)i(5%&fGQ1Rw4H%zj*!`u|bydm5G_EoK*_alDA6@)5|PX238sKl=bjo7pp| zJ{2G)I0vc!)6v`byg&a!rqm@!OPU7!5;+H-25w%%T;yQ` zg=~_&07=$;f&WEFT{#GIl#KEeQjKRLWIY}cPkkhHI^<}-7{!kFM{4pN zD13Dr@C;%CEs;}jAyQdaAv0heLh#zaJnv67$5@0S-~dF-k=V+8F1A6E^-v%05)_l~ zjwI}($TNOFu)xelgb>P+6h6_*tn~T{kgeSYcnFy*hRmD>zzM)rW_E7~VJ-=SnuwwW zv(P+G^?qE8B>lmN_#t=VP#!j5$mO8B71@LBk+dj4_Tc>p`MU!TBM(gbNZhj@9AcJeIpjyD7TinNZFAp{E{EDIql4k48JhL;KwX0s7uggYWLU>l@K zTm#(TzLQwC82BuN@LdRD6>=KxiWp%FpR;HZ)YhkwhYcM(A*W^K&u7Bjoq z%sw@uzR0^Y0a2_t9RqotcgDXUolO_gwum zvsb*Gax+_+`Yca9KhU%eXLy~TnM|x~^)>W)i7;ecaUc&rJ;>^y^StuKNJ>A3RO%Cu zhkXW;I(5ttrA_^^h44MzF$F{~M* z1jRni5x~2?4qqVOLQScfRi%vZQEPohA z9%=+vQ6Dk0{miU`nH9QvxR;r|Xl93**}RmhSZZe7{N3%%?C-AXUTS7t%xsLA{opF; zy1;xh+uzLoYG(VoWQ~1pVP+%DZ1)^vYGX1b=9}3vGke#}zBIF4vX%e;05fZBX7`xc zOfy^Qf4?!AM?dMqMDp3IlJX=fn^ z*48MKt^ty)jamClxE9Fk{u|&5pr4tQBhUPO$oaO1nT?^klpTOla~}r&jvQ`#0sEQR zM3RJ*G%N@qEHlOS+W<>K2#ZqRGhqpG++{+kd(&5g*D(Zz-d;x`#{H3+-W#~t%re_B z@6&QK+la)8xC(jjtF#Hsuj|P=~0YYkQMMu&J;Kb2eJ;w)Y>q!)Y;vl-X=Zc1 zjuj@y=J{AJx7f@!_qi(eaV;{lUH!L8uVacygPLq+JDQwum1efeq-`zo z@AJLv5;J?r%v%3{<4_*{^P#{AWGTw-8iAZsD^RxEAt;z(pi_d+rD-YAjfbT9uPifwlV{>Ps^fI?^2qWSA(RaNue-k-04DI^ZXVxG)L<8Ql#p4LIl&0-07cng~q_)h*%FsYH%dN{!~3-2BhZRg$TX? zMGN{MPxaHtdH4^K?XxQoW9x%<_w9j_dJ527T!xZhVhp<+ZSv_&vax1cq?)%tME9?Z zF+}fsJmjL#`|>u*MtqHgVU?ix`_KIQOz)#1CbTkDc1Z}K%=^0xCD%00GKYECfS~|M zgpr77-$IB!6Cv^I$X3pTPZ7dxhY-AzzgLckWG|Fz+ZHjC^(AG_^}hB;K7t9zW`7y^ z3pP%bZR~yPi6r6>L}Y>F@C_rSv3Rn|*C@iU1QA^D@BfQJTvfD(5W;69C-F2!<2Drb zo1NhqkBlYe<_E+mx}i-mi%GWho{Tc%jz*fpefptH;_MjmfN z$hr?A`UA7PQwe;A5cMFWnzlyUT8oiX-xMKU3G4Ty(;`H4-*~@Aq14i|QFLI>RM`b6 zGH@1Bm3Q&qyP}OLV-R6%;^jLdiF-NH5N`Flhx!;!Bsr-jo)Fu_6f@t+>uBrsEtJS`(cXdvXs^P` z8fP*O8y=Y1oo4pDnN2mt(R-NL4Q95dnSGMQD_-WF;YOykR&$T=31-&WJ;G~~qFP({ z(9HHRv)fE5rDpP2e_>{?W{mCE-p6T{q_<8tvjZ%N8cg!fWHUR>%qIHxr%hh}@&4N+ zGwWsY@W*#fFnRdD@$VB;|Bp4r`P2FK1!lIJ_qEbLb4(t8Go>U?Ox4xfG}qsly!?~= z?-Vn8In|d5-p>hUcCndd`dIRi2a1rII|@08CZkOuU6C5NMV5D>m%9Y1&+*x8v~gyA z+UVKZo`j@hE0hoLEXo5Y1`agEvdi37ehNwEMIAy$S zy%I^@N|F;}45{U@O!^{+Dtqp|%}`D9a8UEVpBhdg9J5sJ~?<=TfHH^*eAz%Jv*Q{Sheq>|By zpi7aOU5d<*`l#Q<$niBTdo_8;!-fk*$csH6d3?VnxtJlB-4~DqZ%(gG0 zVZKwmZ%t61`>&84UV`H7t5CAd79?47dB{T^Qc#4#SkXacC@eGsNyk-4S}r3wJ~?hH z&4k9taTX=)y2AG;^fbup+#cltY=^>p^S%EaPqJ?alrU zWpmB<&tu37+z@4uJ?iC}ql~q5f=M%!_%VMS`eTTYA4Z2dK7>nE&3|zfU7c zRH+SA_-8cAO&^R@@k(^Y+EpkQKAH@lp-|LJlpOOq@TULv3?h6pvqtD_^-M@-on_wG zlK=jn{T=>u*6+U#f|+#yx}cp@3lZV%fil%@MV{_^(Q(D`G?Y8hF0n1qri)%ECG{^z z8lSd?c4s3({StTqX&2K;B=uoPHQ$Nq6Z}W-!?Pq8Nwz{}$TSi)zB0?ZP!(C$*Y~ua zqNeXZM%x?G_xS8Tr9b~o-$O8MaczUno7)ndgFYOo@Wxd|e`J5eg>=V*)QaI`7r zBXr8?Ql#SdL~4D!5-K3=VGJ?@=964aT#imzJpv`H9PjO=oqtPFDrpn1`%3Tc14s*q zn{~?Sa-35h{yV{R=3hQ>sE$yCh$>#B_#QgsaU62e?SzPSG&&;reUz@bkC1@Sc1htR1f*P-pM zdm|hAU=+vhiY`996RFx0&_3*Y(1|I}`m=+)zSrx}2SZYS3L^0S=-BGbfxD3=5d8NS z(eAXkpZ;;=Fl>OdhV^y5^9Bp{UvR=rwmzDU63dw;{ogRI9~**ci)Lr!lxvKLH^#I_ zp%Y#Hg$S<@5!pK^JoXw%D9rq~cpK|A$QJKLvenfPK~6??{~|=h<4EGQjAb(~TYzl%e!z!W4tNaI-h=w19Kmd6?NJiaceT|zOncxDM4HsZH5^MF(7cob zpG2R9>EOykfPaP%=G3yyGtt_PTf0Xb&p0+T`r6{hp{w)SUJvc2zfF$dwxn%1T~ zgi!AFc81kw57a{r-quui+|3Ii%*@f>L%qz$A%vRF;LkSRcIdXAsXn%>ej(E)tW3OZ zPLjhCp$PaPgs_Y(5PcH9CiT%ls%1IK#`e~TyTLoS3gyRNghE;)(Vq4r5YgY~zok|4 z3KS-L4ru}tP@MiFlGND(k`q(n;xYXD))7UBa60J&*l*B7|_gBStsmyQrk*GxUmqS3?NHvi<0i=5L5__dlHKF zSq~9w-0ijna%L_@noXLC1$3_cDzB#=V#-^1zkeV(O6yg$i|;HSN7nP~y)V7d9G3xI z`*~2d`crU22w{+!?T3y> zOB2zFi0MPskk}0&gzK~PxuN%W4}?p9C&7ttfe%tlvVi3HuvqUo=(w?)kanAi6U%)^ zB+oS>F&sm0N9{dBtQWLkDU+<8yb77wdsEwM~Gh%1=N;b1KK}g?Bq-utevshj3nZrq#Z!AmB8JuonRC@V_1@=e5TOTz)5no8 z`B@0B<5)W*<{357Kyseng;YPL?R&3#nfI?f@+lqfWZRVi_(>(w9x*D zfi6S`sWeBLb^+BlcLju7^~imBYCsXR#_8Q*Q~fg=seczB8~zT2Tvz!(2O$qS$WFe} z2X~ea_Ee~BGiz-`fFK93|vM68iH-jDu(q29Mlt-+8+aywPI zVkGeUQI5f-h?(7m2%{^Sr$1430gBP4qPG#@WrH?oUPdCq0WqTG2=QC^XCYz;5#iDV zztsPBKx;D|arUQ3j@$ZxON5c>8=qSr@j-q6SSvYGYIP>UO&XiPhwqbK}X z5hCIOJ)4*^G|x3E^CiR+6d zdlhn&U5*Ii?}%F+fhMT4zjr87Ic6any{UKjG=FCh*$=H;6HG;t<97(DCL@Nk9m?nb zlUw$mIA4M4F`;*6B!d`h?^t>Z#~3jk^)z21NAF0?SkOU<2g$cnBfQ#Yp-T zA%=P>FviRVAXDTAzdYk^gah%u_$A24@;YJ!&mc{2N5n*LMvP})B!OQ>lB?9`u`QC~ z3rMmw8=^G_;gxya5mswTNRztL=kzP8tIIq2yxfd5hd+8-+jw6GknHp%gfPR*dXh-Q zH@(hLUQaYj3;nm(Gqg%Wn(-o(s}k$~-uu{+{;-GNug9&QeZIj+9@4@O2i}|MkdAGNIPha<~JU&8O^SUTpu8Yw~Lp#5HZ0okyK5? z%V>Qtv#rqFZR`Dc2hGXl2q71s+=@NX{NIdBfiIBM>znFBC1S*{Bkk)%#GD!;<~0H_ z$=@J#{Yf83v@yR!Vbdr{PbEV_JG_Ai;Sdu0J(?@?ecY`x-dpAMwFS091h)m!h$bPe zs1hhPv*=uoj=&B`E8X1d>67Y95hA4dA%xec4vmoz>F(c4(cY2*BqX=;envB6Z*;im zrU+Mu0KLuZL&RkMjGU)$0hgHBNW^I8A`>v4nv~Ws3Vb}DB5kYc;S}y<80Qo8S0p9Q zMN;foZ*&@B2p1w% zD?|%h;{}W<=;`l8wJ{*cZsK!C> z`$6`TXv)2VL%aiLp^UiSAp{zM7WVfDQI12z+?&LUiFfWvB=tuimGd)XUVk0P zDIZsLV)qKl(1M+gIN(uef(Ii<&jW~Pjz&cJBvRLZfjCiAx4R%!{!d6X{R48AU4am6 z3|fR25uyzA&Yg&C)(!}HpYVa)gw(<4Ev+rFPw+Mh5K}5d4DEQTUM!IbJECykQbZK@ z`tznpvsqtYh>2W|oMZ8Jmp2e0or{?38OR)o>RMENry{fB1Ed}|LyLbsBJklP`3v4kx#SGT?v^!aG@h`(JeR)^YwlAc?&fLh6GNlJ5sB6HanHlF*xZzZxJWaT;Pg z(eapenCo!j0{F%by2!-`ZOCU(4X3lI@m0X> z_yS~u{0TW|-azX8nMk5sg*a$u#3j4>;6{+BfJKPl4XNs1A|!nVsZcACG&>Lx=S@hG zzJr)WC!_+cO-k%YG=bS*35mU$34@Twbqrdh$w>X1j|e>%F|;wW-e|(3TD>Q7g0&*G z5WdJU*8H&d=V&CYqe}k>BBomqA@?=2$%vUAk8IVw5i;$A80|+$J)DWOn)8A4%FXHe^lpsk>m;9}R)}eJL>G4UKzST- z4q76bh*z;ih+4>MTw5ctJCq}?c`@QXlhDK;fEM;#Bnd_%3Gsk8)X2*?$*}$I*hXM4HD* zRQG^Jgx>{8;WXTv@jXgBL-yR&$RTqSLW+BlbXeqN?m-KFE@F`TBgD87G2DSj67@m8 zjcrMsQa5<{^N?K_i9PoBaKud0ecOSWVWjsh?pBQR(98R>5hB!8Na7rhB>rCh>@Y;! zkCWWw^9s@^?bMvg_uLS|9M9a_2TA6S5yRaS3AI-cqkO^Ni-)*^*6=Xz z*Gd!}nTZ(T0Ft}`NbY%vv=RGVgz#`M5@uFgVz2N{y^j#(G-R_CqsbiV9k~l}!F$nS zeU270HarX2%m<-`pNberQ-sX@5vP9{#Y|uH_oIqc*W;lVAscr#RqskmLxGQ@G?l`- z5~+>TaDq&kHkesVniz{DR|G>+c{!=rZ3Z+}(%0TIW62oXmkhs>S`5kDoll;Ubc zAWxBO_3eXH^kpdSI@8NthSqH?(iYD4ab+^S3Zw#Vo$)+gl97qfCH}k+5nywlgD;TQ z(Gw9o$kch%+vw|KoP+G}u}CVlK+dPBh{+EmNhT>n1iTlCuo;UqtO~^R%*WdrnTZeJ z`y9+HMkb~p1~Ld~2u;1NazuF5^64EmCfV;1O`pYxc$OlKC=K(F=8KnKVP=ma6YSS$ z9X|DUPealk-&-&gF~zSC^Qt7V_g5f-zSrl+Qf(|FJF~+5GLNCP9GYW{)m|!yfBnBCgh zl}ay}u6QaiUDH%xYq4v|%!>T|SVyi;b2BSRy;oyfUT7&U$9tvUX=G-bdby3vtecrNiECtL z%~JI=OubiaPQ82!(`6s6GUg;|S_NKzFtfHkA4NVlneP-@>LN|Adpmz8U9OXv^)p>p zmUTW;?RGY^W~t{b9hcju+e(cmWIQW2t148zTs54o3Ge)!I%T4I8(n?8#dRj2SP9}5 zCCF*=Ig<39k*&QYaxnZAaiJqny5GY{%JxS`L)S;D&7YBE-voIb$D^G-bye9j`9N*UjjvV*QZb^lY$s%!?~GKgjz}fD9;tc9AcEf+saoa8hG~Yp@z)_6Fy1e|J`kuF z*=i+-v9v>~9*8;3LF(o(Gy55dqh~IOBM4wv2w|mj=N^b5O+~6^XD>4cIqkMWs%Jb( zdluU1R_0uJU!=Nzft)t=&^)y?vyc7%y-_yWzQ~T70(3Klu8hQ+ya1`~-OyZ?BUSus z|2x6o-_GlJ+xxVq&qcKF#+unS$blK>XTJ9nZ}(GV0vzJ)eoSJwmYdl}A%yR}o?>r1 z?KNMFRA-Ql+0;LkD5CJ4BjrIPw+elZ{01{kJ2TU3V#o}N2b(TL=1&{6<_nOjzXh<$ zG>C=B+$ll+gK{$)LlRM`^tp>puBBd2M`X@zOyc7jYf3lX+50gUdEoJR9P49Q0=yYQ zSZ>K~!R-+Kyz6a6ljf6524dRYdjP_<*AdQan`$Sn*D~Z=T1*C1xoa@<$8`l)8=E4h z+&qNPyC7nJ2iYTS(14e&g&khoew>IxWh0Q|V^cIaQxPJ}LGjdnNDJ8nA!$HFJ<6Z` zF@*4vnVo{{;JZ<%=MrSsUx94K3;efRknMdxVsd}>|Mx-m)+>mR8hQPXB3o>CWPjh} zWe-8ln1|5sQwgrAR+ zNSYwV@-4D;_aKQB^zuG*M*gF7ef+2UI0qnyR2M|JCy_9PTac!CozL%B6-kRO2vJvfo4-Jw_)`(WJm-CzgF=AcAp-5>Wrunn zCn5>|9*Gye1JWSgMN;xuG~biGz4sCE?T6OlGB5i*avptwB;yR^oZS@>@i;`#(-8wW z07=z75EI`T5&yXe7p_Cht|@Zfo$vD%BMt`a;1X!2&rM?==XjJYxwrRc4$^pDKpB+t zQT)4*gs7iEjH0#oVILH`9-3-nE1$oOy&wA`PyI7UqW4D{%6uAE|?l5b?J|i!cFk%Ht5BG(w9Q zeGyL~$#T3S$s~lVW&TbvLe!B6X`%|-(d*dG%fCyK)$}F`C2mP_yw+Wa3B(hDZt(xN zLSF8Fd3~Lb=lU4LOkYEY+|$SUHDaze`WVNh+UbXwhj|_K{I}_dXg2eA+moCMypgv( z6M3#@lcY|!_TN87h~2?|yC21|PeF{V01<9e#Pt8*Wx62=b&St-^k6sfHb?oqv_;{! zwn&R;jF?+z?^7`%%AIjWjiB}{uo5~F$CJezwhqP#+ca^X11A`_4mHk z^SSPTG|0ozTDL+Bt}SA)eGo(MVP?H@Ir@G~$@*^vGi!^abPKe2^N_@vK{8PvBHME! zk|-4jc}^q=Z#))4nCAA=X(axLxd`dr@ps#Jy`?0KU^0?ID-go}5)tjINGcY4e>$PH zSb`R9AOAiRF^Hde{Vfo)c>(zYB2ySjlDP8-;`)yvrnU{zBA!6n#qs{mDrD@ut6f0wSJok?L*8EIHE4jz)~5y^nn}f7S>wKYZQ{F{BD4*+#43 zvI#PWPDf$8J&^|UmapC6{?1~AM}}G)kBPQ2-3vLLkRDa1^y3Ug3
- +

客户侧总体用能情况分析

@@ -551,30 +551,63 @@ export default { }, //用能分类占比 initYnflzb() { - let getParametricEquation = function ( + let optionData = [ + { + name: "楼宇", + value: 60, + itemStyle: { + color: "#37FFC9", + }, + }, + { + name: "工业", + value: 44, + itemStyle: { + color: "#31A1FF", + }, + }, + { + name: "其他", + value: 32, + itemStyle: { + color: "#FFF777", + }, + }, + ]; + let option = getPie3D(optionData, 0.59); + // 生成扇形的曲面参数方程 + function getParametricEquation( startRatio, endRatio, isSelected, isHovered, k, - height + h ) { // 计算 - let midRatio = (startRatio + endRatio) / 2; - let startRadian = startRatio * Math.PI * 2; - let endRadian = endRatio * Math.PI * 2; - let midRadian = midRatio * Math.PI * 2; + const midRatio = (startRatio + endRatio) / 2; + + const startRadian = startRatio * Math.PI * 2; + const endRadian = endRatio * Math.PI * 2; + const midRadian = midRatio * Math.PI * 2; + // 如果只有一个扇形，则不实现选中效果。 if (startRatio === 0 && endRatio === 1) { + // eslint-disable-next-line no-param-reassign isSelected = false; } + // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3） + // eslint-disable-next-line no-param-reassign k = typeof k !== "undefined" ? k : 1 / 3; + // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0） - let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0; - let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0; + const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0; + const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0; + // 计算高亮效果的放大比例（未高亮，则比例为 1） - let hoverRate = isHovered ? 1.05 : 1; + const hoverRate = isHovered ? 1.05 : 1; + // 返回曲面参数方程 return { u: { @@ -582,12 +615,14 @@ export default { max: Math.PI * 3, step: Math.PI / 32, }, + v: { min: 0, max: Math.PI * 2, step: Math.PI / 20, }, - x: function (u, v) { + + x(u, v) { if (u < startRadian) { return ( offsetX + @@ -603,7 +638,7 @@ export default { return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate; }, - y: function (u, v) { + y(u, v) { if (u < startRadian) { return ( offsetY + @@ -619,34 +654,36 @@ export default { return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate; }, - z: function (u, v) { + z(u, v) { if (u < -Math.PI * 0.5) { return Math.sin(u); } if (u > Math.PI * 2.5) { - return Math.sin(u); + return Math.sin(u) * h * 0.1; } - return Math.sin(v) > 0 ? 1 * height : -1; + // 当前图形的高度是Z根据h（每个value的值决定的） + return Math.sin(v) > 0 ? 1 * h * 0.1 : -1; }, }; - }; + } // 生成模拟 3D 饼图的配置项 - let getPie3D = function (pieData, internalDiameterRatio) { - let series = []; + function getPie3D(pieData, internalDiameterRatio) { + const series = []; + // 总和 let sumValue = 0; let startValue = 0; let endValue = 0; - let legendData = []; - let k = + const legendData = []; + const k = typeof internalDiameterRatio !== "undefined" ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3; // 为每一个饼图数据，生成一个 series-surface 配置 - for (let i = 0; i < pieData.length; i++) { + for (let i = 0; i < pieData.length; i += 1) { sumValue += pieData[i].value; - let seriesItem = { + const seriesItem = { name: typeof pieData[i].name === "undefined" ? `series${i}` @@ -660,17 +697,19 @@ export default { pieStatus: { selected: false, hovered: false, - k: k, + k, }, }; - if (typeof pieData[i].itemStyle != "undefined") { - let itemStyle = {}; + if (typeof pieData[i].itemStyle !== "undefined") { + const { itemStyle } = pieData[i]; - typeof pieData[i].itemStyle.color != "undefined" + // eslint-disable-next-line no-unused-expressions + typeof pieData[i].itemStyle.color !== "undefined" ? (itemStyle.color = pieData[i].itemStyle.color) : null; - typeof pieData[i].itemStyle.opacity != "undefined" + // eslint-disable-next-line no-unused-expressions + typeof pieData[i].itemStyle.opacity !== "undefined" ? (itemStyle.opacity = pieData[i].itemStyle.opacity) : null; @@ -678,12 +717,11 @@ export default { } series.push(seriesItem); } - // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数， // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。 - for (let i = 0; i < series.length; i++) { + for (let i = 0; i < series.length; i += 1) { endValue = startValue + series[i].pieData.value; - console.log(series[i]); + series[i].pieData.startRatio = startValue / sumValue; series[i].pieData.endRatio = endValue / sumValue; series[i].parametricEquation = getParametricEquation( @@ -692,189 +730,107 @@ export default { false, false, k, - series[i].pieData.value + // 我这里做了一个处理，使除了第一个之外的值都是10 + series[i].pieData.value === series[0].pieData.value ? 35 : 10 ); startValue = endValue; legendData.push(series[i].name); } - return series; - }; - // 传入数据生成 option - const optionsData = [ - { - name: "楼宇", - value: 4256, - itemStyle: { - // opacity: 0.5, - color: "#2A71FF", - }, - }, - { - name: "工业", - value: 2356, - itemStyle: { - // opacity: 0.5, - color: "#00EDFE", + // 准备待返回的配置项，把准备好的 legendData、series 传入。 + const option = { + // animation: false, + legend: { + left: "80%", + top: "40%", + data: ["楼宇", "工业", "其他"], + orient: "vertical", + icon: "roundRect", + itemWidth: 10, // 图标宽度 + itemHeight: 10, // 图标高度 + textStyle: { + fontSize: "0.06rem", + fontFamily: "AlibabaPuHuiTi", + fontWeight: 400, + color: "rgba(255,255,255,0.8)", + }, + formatter: (name) => { + if (optionData.length) { + const item = optionData.filter((item) => item.name === name)[0]; + return ` ${name} ${item.value}%`; + } + }, }, - }, - { - name: "其他", - value: 2018, - itemStyle: { - // opacity: 0.5, - color: "#FEDB4B", - }, - }, - ]; - const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5); - series.push({ - name: "pie2d", - type: "pie", - - label: { - show: false, - opacity: 1, - fontSize: "0.07rem", - lineHeight: 20, - textStyle: { - fontSize: "0.07rem", - color: "#fff", - }, - }, - labelLine: { - length: 30, - length2: 30, - }, - startAngle: -30, //起始角度，支持范围[0, 360]。 - clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式 - radius: ["40%", "60%"], - // center: ["30%", "50%"], - center: ["40%", "50%"], - data: optionsData, - itemStyle: { - opacity: 0, - }, - }); - let data = [ - { - name: "楼宇", - value: "30%", - }, - { - name: "工业", - value: "30%", - }, - { - name: "其他", - value: "40%", - }, - ]; - // 准备待返回的配置项，把准备好的 legendData、series 传入。 - let option = { - legend: { - show: true, tooltip: { + formatter: (params) => { + if (params.seriesName !== "mouseoutSeries") { + return `${ + params.seriesName + }
${option.series[params.seriesIndex].pieData.value}`; + } + return ""; + }, + }, + xAxis3D: { + min: -1, + max: 1, + }, + yAxis3D: { + min: -1, + max: 1, + }, + zAxis3D: { + min: -1, + max: 1, + }, + grid3D: { show: false, + boxHeight: 10, + top: "0%", + viewControl: { + // 3d效果可以放大、旋转等，请自己去查看官方配置 + alpha: 20, + beta: 30, + autoRotate: false, // 禁用自动旋转 + distance: 200, // 初始视角距离主体的距离 + panMouseButton: "none", // 设置中键拖拽进行平移 + rotateMouseButton: "none", // 设置右键拖拽进行旋转 + zoomMouseButton: "none", // 禁用鼠标缩放 + }, + // 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。 + postEffect: { + // 配置这项会出现锯齿，请自己去查看官方配置有办法解决 + enable: false, + bloom: { + enable: true, + bloomIntensity: 0.1, + }, + SSAO: { + enable: true, + quality: "medium", + radius: 2, + }, + // temporalSuperSampling: { + // enable: true, + // }, + }, }, - orient: "vertical", - data: data, - top: "center", - itemGap: 14, - itemHeight: 8, - itemWidth: 17, - right: "2%", - textStyle: { - color: "#fff", - fontSize: "0.06rem", - }, - formatter: function (name) { - let res = data.filter((v) => v.name === name); - res = res[0] || {}; - let unit = res.unit || ""; - return name + " " + res.value + unit; - }, - }, - animation: false, - tooltip: { - show: false, - formatter: (params) => { - if ( - params.seriesName !== "mouseoutSeries" && - params.seriesName !== "pie2d" - ) { - return `${ - params.seriesName - }
${ - option.series[params.seriesIndex].pieData.value + "%" - }`; - } - }, - textStyle: { - fontSize: "0.07rem", - }, - }, - title: { - x: "center", - top: "20", - textStyle: { - color: "#fff", - fontSize: "0.11rem", - }, - }, - // backgroundColor: "#0E3567", - labelLine: { - show: false, - lineStyle: { - color: "#7BC0CB", - }, - normal: { - show: true, - length: 10, - length2: 10, - }, - }, - label: { - show: false, - // position: "outside", - // formatter: "{b} \n{d}%", - // textStyle: { - // color: "#fff", - // fontSize: "14px", - // }, - }, - xAxis3D: { - min: -1, - max: 1, - }, - yAxis3D: { - min: -1, - max: 1, - }, - zAxis3D: { - min: -1, - max: 1, - }, - grid3D: { - show: false, - boxHeight: 0.01, - //top: '30%', - bottom: "500%", - left: "-7%", - // environment: "rgba(255,255,255,0)", - viewControl: { - distance: 180, - alpha: 25, - beta: 60, - }, - }, - series: series, - }; - this.defineEcharts("ynflzb", option); + series, + }; + return option; + } + let chartDom = document.getElementById("ynflzb"); + var myChart = this.$echarts.init(chartDom, null, { + devicePixelRatio: 10, // 设置为2或更高的值 + }); + myChart.setOption(option); + window.addEventListener("resize", function () { + myChart.resize(); + }); }, //地图 initMap() { @@ -1582,14 +1538,16 @@ export default { #ynflzb { width: 100%; height: 100%; + padding-right: 40px; + box-sizing: border-box; } .pic { - width: 300px; + width: 250px; position: absolute; - height: 150px; - top: 100px; - left: 40px; + height: 120px; + top: 120px; + left: 70px; } } From 0a8f46e8f9d83c8aa1c06f0c626d89f6c9815ada Mon Sep 17 00:00:00 2001 From: lll Date: Tue, 5 Dec 2023 10:39:37 +0800 Subject: [PATCH 3/3] 12 --- src/views/KHC.vue | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/views/KHC.vue b/src/views/KHC.vue index 92e8286..028443e 100644 --- a/src/views/KHC.vue +++ b/src/views/KHC.vue @@ -93,8 +93,8 @@

企业用电量排名

    -
  • -

    {{ index + 1 }}

    +
  • +

    {{ index + 1 }}

    {{ item.name }}

    {{ item.value }}

    • @@ -408,11 +408,11 @@ export default { methods: { listClass(index) { if (index == 0) { - return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;'; + return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;backgroundColor:#6A6847;'; } else if (index == 1) { - return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;'; + return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;backgroundColor:#4C4D6A;'; } else if (index == 2) { - return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;'; + return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;backgroundColor:#202450;'; } }, defineEcharts(dom, option) { @@ -425,7 +425,6 @@ export default { myChart.resize(); }); }, - //用户行业占比 initYhhyzb() { let color = ["#0098FA", "#0CD9B5", "#3B72AD", "#FDCC00", "#F27629"]; @@ -488,7 +487,7 @@ export default { legend: { orient: "vertical", icon: "circle", - x: "70%", + x: "65%", y: "center", itemWidth: 12, itemHeight: 12, @@ -556,21 +555,21 @@ export default { name: "楼宇", value: 60, itemStyle: { - color: "#37FFC9", + color: "#91DAFF", }, }, { name: "工业", value: 44, itemStyle: { - color: "#31A1FF", + color: "#4466E1", }, }, { name: "其他", value: 32, itemStyle: { - color: "#FFF777", + color: "#83E7BA", }, }, ]; @@ -1598,6 +1597,7 @@ export default { text-align: center; border: 1px solid #b1b1b1; background-size: cover; + background-color: #203265; } p:nth-of-type(2) {