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;