zhouyonghang
/
zhuzhansheji
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

1

This commit is contained in:
lll 2023-12-04 14:49:57 +08:00
parent 687cf494d3
commit dc8d3c20d1
6 changed files with 671 additions and 681 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/router/index.js
View File

@ -26,7 +26,7 @@ const routes = [
]; ];
const router = new VueRouter({ const router = new VueRouter({
mode: "history", mode: "hash",
base: process.env.BASE_URL, base: process.env.BASE_URL,
routes, routes,
}); });

337
src/views/KHC.vue
View File

@ -561,26 +561,20 @@ export default {
) { ) {
// 计算 // 计算
let midRatio = (startRatio + endRatio) / 2; let midRatio = (startRatio + endRatio) / 2;
let startRadian = startRatio * Math.PI * 2; let startRadian = startRatio * Math.PI * 2;
let endRadian = endRatio * Math.PI * 2; let endRadian = endRatio * Math.PI * 2;
let midRadian = midRatio * Math.PI * 2; let midRadian = midRatio * Math.PI * 2;
// 如果只有一个扇形，则不实现选中效果。 // 如果只有一个扇形，则不实现选中效果。
if (startRatio === 0 && endRatio === 1) { if (startRatio === 0 && endRatio === 1) {
isSelected = false; isSelected = false;
} }
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3） // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
k = typeof k !== "undefined" ? k : 1 / 3; k = typeof k !== "undefined" ? k : 1 / 3;
// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0） // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0; let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0; let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
// 计算高亮效果的放大比例（未高亮，则比例为 1） // 计算高亮效果的放大比例（未高亮，则比例为 1）
let hoverRate = isHovered ? 1.05 : 1; let hoverRate = isHovered ? 1.05 : 1;
// 返回曲面参数方程 // 返回曲面参数方程
return { return {
u: { u: {
@ -588,13 +582,11 @@ export default {
max: Math.PI * 3, max: Math.PI * 3,
step: Math.PI / 32, step: Math.PI / 32,
}, },
v: { v: {
min: 0, min: 0,
max: Math.PI * 2, max: Math.PI * 2,
step: Math.PI / 20, step: Math.PI / 20,
}, },
x: function (u, v) { x: function (u, v) {
if (u < startRadian) { if (u < startRadian) {
return ( return (
@ -884,6 +876,7 @@ export default {
}; };
this.defineEcharts("ynflzb", option); this.defineEcharts("ynflzb", option);
}, },
//地图
initMap() { initMap() {
//后端返回的数据 //后端返回的数据
var data = [ var data = [
@ -974,174 +967,173 @@ export default {
myChart.resize(); myChart.resize();
}); });
//获取山东地图数据。 //获取山东地图数据。
$.get( let src = require("../assets/shandong.json");
"https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json", function registerMap() {
function (geojson) { echarts.registerMap("山东", src);
echarts.registerMap("山东", geojson); let option = {
let option = { series: [
series: [ {
{ tooltip: {
tooltip: { trigger: "item",
trigger: "item", // show: false,
// show: false, },
},
name: "山东", name: "山东",
type: "map", type: "map",
map: "山东", map: "山东",
boxDepth: 60, //地图倾斜度 boxDepth: 60, //地图倾斜度
regionHeight: 6, //地图厚度 regionHeight: 6, //地图厚度
aspectScale: 0.9, //地图长宽比 aspectScale: 0.9, //地图长宽比
emphasis: { emphasis: {
itemStyle: { itemStyle: {
areaColor: "#70EAF4", // 高亮时候地图显示的颜色 areaColor: "#70EAF4", // 高亮时候地图显示的颜色
borderWidth: 2, // 高亮时的边框宽度 borderWidth: 2, // 高亮时的边框宽度
},
label: {
fontSize: "0.06rem", // 选中地图文字字号和字体颜色
color: "#fff",
},
}, },
label: { label: {
show: true, //是否显示市 fontSize: "0.06rem", // 选中地图文字字号和字体颜色
formatter: function (params) { color: "#fff",
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,
}, },
], label: {
animation: true, 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.setOption(option);
myChart.on("click", chartClick); myChart.on("click", chartClick);
//点击地图区域事件 //点击地图区域事件
function chartClick(param) { function chartClick(param) {
console.log(param); console.log(param);
myChart.setOption(option, false); myChart.setOption(option, false);
window.addEventListener("resize", function () { window.addEventListener("resize", function () {
myChart.resize(); myChart.resize();
}); });
// var selectedPro = param.name; // var selectedPro = param.name;
// if (!cityProper[selectedPro]) { // if (!cityProper[selectedPro]) {
// option.series.splice(1); // option.series.splice(1);
// option.legend = null; // option.legend = null;
// option.visualMap = null; // option.visualMap = null;
// myChart.setOption(option, true); // myChart.setOption(option, true);
// return; // return;
// } // }
//获取点击区域数据 //获取点击区域数据
// $.get(cityProper[selectedPro], function (geojson) { // $.get(cityProper[selectedPro], function (geojson) {
// echarts.registerMap(selectedPro, geojson); // echarts.registerMap(selectedPro, geojson);
// //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。 // //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
// option.series[0] = { // option.series[0] = {
// name: "", // name: "",
// type: "map", // type: "map",
// map: selectedPro, // map: selectedPro,
// boxDepth: 80, //地图倾斜度 // boxDepth: 80, //地图倾斜度
// regionHeight: 5, //地图厚度 // regionHeight: 5, //地图厚度
// itemStyle: { // itemStyle: {
// normal: { // normal: {
// label: { // label: {
// show: true, // show: true,
// }, // },
// }, // },
// emphasis: { // emphasis: {
// label: { // label: {
// show: true, // show: true,
// }, // },
// }, // },
// }, // },
// groundplane: { // groundplane: {
// show: false, // show: false,
// }, // },
// data: data, // data: data,
// shading: "realistic", // shading: "realistic",
// // 真实感材质相关配置 shading: 'realistic'时有效 // // 真实感材质相关配置 shading: 'realistic'时有效
// realisticMaterial: { // realisticMaterial: {
// detailTexture: "#fff", // 纹理贴图 // detailTexture: "#fff", // 纹理贴图
// textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数 // textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
// roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙 // roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
// metalness: 0, // 0材质是非金属 ，1金属 // metalness: 0, // 0材质是非金属 ，1金属
// roughnessAdjust: 0, // roughnessAdjust: 0,
// }, // },
// viewControl: { // viewControl: {
// distance: 30, // 地图视角 控制初始大小 // distance: 30, // 地图视角 控制初始大小
// rotateSensitivity: 1, // 旋转 // rotateSensitivity: 1, // 旋转
// zoomSensitivity: 1, // 缩放 // zoomSensitivity: 1, // 缩放
// }, // },
// }; // };
// myChart.setOption(option); // myChart.setOption(option);
// }); // });
}
} }
); }
registerMap();
}, },
//用户资源分布情况 //用户资源分布情况
initfbqk() { initfbqk() {
@ -1490,9 +1482,7 @@ export default {
background: url("../assets/客户侧总体用能情况分析/用能量-框.png"); background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
background-size: cover; background-size: cover;
margin-top: 6px; margin-top: 6px;
position: relative; position: relative;
.title { .title {
position: absolute; position: absolute;
left: 190px; left: 190px;
@ -1690,6 +1680,7 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
background: url();
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -1708,8 +1699,8 @@ export default {
} }
#yhzyfbqk { #yhzyfbqk {
width: 100%; width: 994px;
height: 100%; height: 324px;
} }
} }
} }

334
src/views/TAN.vue
View File

@ -790,7 +790,7 @@ export default {
fontWeight: "normal", fontWeight: "normal",
// .0625rem /* 12/192 */ // .0625rem /* 12/192 */
// fontSize: fontSizeRem(12), // fontSize: fontSizeRem(12),
fontSize:"0.0625rem", fontSize: "0.0625rem",
color: "#fff", color: "#fff",
}, },
}, },
@ -1392,178 +1392,178 @@ export default {
myChart.resize(); myChart.resize();
}); });
//获取山东地图数据。 //获取山东地图数据。
$.get( let src = require("../assets/shandong.json");
"https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
function (geojson) { function registerMap() {
echarts.registerMap("山东", geojson); echarts.registerMap("山东", src);
let option = { let option = {
series: [ series: [
{ {
tooltip: { tooltip: {
trigger: "item", trigger: "item",
// show: false, // show: false,
}, },
name: "山东", name: "山东",
type: "map", type: "map",
map: "山东", map: "山东",
boxDepth: 60, //地图倾斜度 boxDepth: 60, //地图倾斜度
regionHeight: 6, //地图厚度 regionHeight: 6, //地图厚度
aspectScale: 0.9, //地图长宽比 aspectScale: 0.9, //地图长宽比
emphasis: { emphasis: {
itemStyle: { itemStyle: {
areaColor: "#70EAF4", // 高亮时候地图显示的颜色 areaColor: "#70EAF4", // 高亮时候地图显示的颜色
borderWidth: 2, // 高亮时的边框宽度 borderWidth: 2, // 高亮时的边框宽度
},
label: {
// .0625rem /* 12/192 */
// fontSize: 12, // 选中地图文字字号和字体颜色
fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
color: "#fff",
},
}, },
label: { label: {
show: true, //是否显示市 // .0625rem /* 12/192 */
formatter: function (params) { // fontSize: 12, // 选中地图文字字号和字体颜色
var name = params.name; fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
var value = params.value; color: "#fff",
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,
}, },
], label: {
animation: true, 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.setOption(option);
myChart.on("click", chartClick); myChart.on("click", chartClick);
//点击地图区域事件 //点击地图区域事件
function chartClick(param) { function chartClick(param) {
console.log(param); console.log(param);
myChart.setOption(option, false); myChart.setOption(option, false);
window.addEventListener("resize", function () { window.addEventListener("resize", function () {
myChart.resize(); myChart.resize();
}); });
// var selectedPro = param.name; // var selectedPro = param.name;
// if (!cityProper[selectedPro]) { // if (!cityProper[selectedPro]) {
// option.series.splice(1); // option.series.splice(1);
// option.legend = null; // option.legend = null;
// option.visualMap = null; // option.visualMap = null;
// myChart.setOption(option, true); // myChart.setOption(option, true);
// return; // return;
// } // }
//获取点击区域数据 //获取点击区域数据
// $.get(cityProper[selectedPro], function (geojson) { // $.get(cityProper[selectedPro], function (geojson) {
// echarts.registerMap(selectedPro, geojson); // echarts.registerMap(selectedPro, geojson);
// //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。 // //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
// option.series[0] = { // option.series[0] = {
// name: "", // name: "",
// type: "map", // type: "map",
// map: selectedPro, // map: selectedPro,
// boxDepth: 80, //地图倾斜度 // boxDepth: 80, //地图倾斜度
// regionHeight: 5, //地图厚度 // regionHeight: 5, //地图厚度
// itemStyle: { // itemStyle: {
// normal: { // normal: {
// label: { // label: {
// show: true, // show: true,
// }, // },
// }, // },
// emphasis: { // emphasis: {
// label: { // label: {
// show: true, // show: true,
// }, // },
// }, // },
// }, // },
// groundplane: { // groundplane: {
// show: false, // show: false,
// }, // },
// data: data, // data: data,
// shading: "realistic", // shading: "realistic",
// // 真实感材质相关配置 shading: 'realistic'时有效 // // 真实感材质相关配置 shading: 'realistic'时有效
// realisticMaterial: { // realisticMaterial: {
// detailTexture: "#fff", // 纹理贴图 // detailTexture: "#fff", // 纹理贴图
// textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数 // textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
// roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙 // roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
// metalness: 0, // 0材质是非金属 ，1金属 // metalness: 0, // 0材质是非金属 ，1金属
// roughnessAdjust: 0, // roughnessAdjust: 0,
// }, // },
// viewControl: { // viewControl: {
// distance: 30, // 地图视角 控制初始大小 // distance: 30, // 地图视角 控制初始大小
// rotateSensitivity: 1, // 旋转 // rotateSensitivity: 1, // 旋转
// zoomSensitivity: 1, // 缩放 // zoomSensitivity: 1, // 缩放
// }, // },
// }; // };
// myChart.setOption(option); // myChart.setOption(option);
// }); // });
}
} }
); }
registerMap();
}, },
nyxhqk() { nyxhqk() {
var attaData1 = [62, 52, 34, 61, 75, 140]; var attaData1 = [62, 52, 34, 61, 75, 140];

25
src/views/Two.vue
View File

@ -17,28 +17,28 @@
<div class="bottom"> <div class="bottom">
<div class="bottomBox"> <div class="bottomBox">
<img src="../assets/客户侧总体用能情况分析/图标.png" alt="" /> <img src="../assets/客户侧总体用能情况分析/图标.png" alt="" />
<div> <div class="box1">
<p>用电量(MWH)</p> <p>用电量(MWH)</p>
<p><span>84.00</span><span>-13.20%</span></p> <p><span>84.00</span><span>-13.20%</span></p>
</div> </div>
</div> </div>
<div class="bottomBox"> <div class="bottomBox">
<img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" /> <img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" />
<div> <div class="box1">
<p>用蒸汽量(m2)</p> <p>用蒸汽量(m2)</p>
<p><span>45.32</span><span>-23.20%</span></p> <p><span>45.32</span><span>-23.20%</span></p>
</div> </div>
</div> </div>
<div class="bottomBox"> <div class="bottomBox">
<img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" /> <img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" />
<div> <div class="box1">
<p>用水量(m2)</p> <p>用水量(m2)</p>
<p><span>56.00</span><span>-33.20%</span></p> <p><span>56.00</span><span>-33.20%</span></p>
</div> </div>
</div> </div>
<div class="bottomBox"> <div class="bottomBox">
<img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" /> <img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" />
<div> <div class="box1">
<p>用汽量(m2)</p> <p>用汽量(m2)</p>
<p><span>37.00</span><span>43.20%</span></p> <p><span>37.00</span><span>43.20%</span></p>
</div> </div>
@ -180,7 +180,7 @@ export default {
borderWidth: 2, // 高亮时的边框宽度 borderWidth: 2, // 高亮时的边框宽度
}, },
label: { label: {
fontSize: 12, // 选中地图文字字号和字体颜色 fontSize: "0.06rem", // 选中地图文字字号和字体颜色
color: "#fff", color: "#fff",
}, },
}, },
@ -194,7 +194,7 @@ export default {
}, },
textStyle: { textStyle: {
color: "#000", //文字颜色 color: "#000", //文字颜色
fontSize: 16, //文字大小 fontSize: "0.08rem", //文字大小
fontFamily: "微软雅黑", fontFamily: "微软雅黑",
// backgroundColor: { // backgroundColor: {
// image: "../assets/客户侧总体用能情况分析/光标.png", // image: "../assets/客户侧总体用能情况分析/光标.png",
@ -205,13 +205,13 @@ export default {
fline: { fline: {
padding: [0, 35], padding: [0, 35],
color: "#FDCC00", color: "#FDCC00",
fontSize: 14, fontSize: "0.07rem",
fontWeight: 600, fontWeight: 600,
}, },
tline: { tline: {
padding: [0, 27], padding: [0, 27],
color: "#fff", color: "#fff",
fontSize: 12, fontSize: "0.06rem",
}, },
}, },
}, },
@ -444,17 +444,18 @@ export default {
width: 72px; width: 72px;
height: 72px; height: 72px;
} }
.box1 {
div { display: flex;
flex-direction: column;
height: 72px;
p:nth-of-type(1) { p:nth-of-type(1) {
width: 120px; width: 120px;
margin-bottom: 10px; margin-bottom: 10px;
margin-top: 5px; margin-top: 5px;
font-size: 14px; font-size: 14px;
font-family: " AlibabaPuHuiTi"; font-family: "AlibabaPuHuiTi";
font-weight: 400; font-weight: 400;
} }
span:nth-of-type(1) { span:nth-of-type(1) {
font-size: 20px; font-size: 20px;
font-family: "AlibabaPuHuiTi"; font-family: "AlibabaPuHuiTi";

321
src/views/XQXY.vue
View File

@ -1298,173 +1298,172 @@ export default {
myChart.resize(); myChart.resize();
}); });
//获取山东地图数据。 //获取山东地图数据。
$.get( let src = require("../assets/shandong.json");
"https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json", function registerMap() {
function (geojson) { echarts.registerMap("山东", src);
echarts.registerMap("山东", geojson); let option = {
let option = { series: [
series: [ {
{ tooltip: {
tooltip: { trigger: "item",
trigger: "item", // show: false,
// show: false, },
}, name: "山东",
name: "山东", type: "map",
type: "map", map: "山东",
map: "山东", boxDepth: 60, //地图倾斜度
boxDepth: 60, //地图倾斜度 regionHeight: 6, //地图厚度
regionHeight: 6, //地图厚度 aspectScale: 0.9, //地图长宽比
aspectScale: 0.9, //地图长宽比 emphasis: {
emphasis: { itemStyle: {
itemStyle: { areaColor: "#70EAF4", // 高亮时候地图显示的颜色
areaColor: "#70EAF4", // 高亮时候地图显示的颜色 borderWidth: 2, // 高亮时的边框宽度
borderWidth: 2, // 高亮时的边框宽度
},
label: {
fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
color: "#fff",
},
}, },
label: { label: {
show: true, //是否显示市 fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
formatter: function (params) { color: "#fff",
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,
}, },
], label: {
animation: true, 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.setOption(option);
myChart.on("click", chartClick); myChart.on("click", chartClick);
//点击地图区域事件 //点击地图区域事件
function chartClick(param) { function chartClick(param) {
console.log(param); console.log(param);
myChart.setOption(option, false); myChart.setOption(option, false);
window.addEventListener("resize", function () { window.addEventListener("resize", function () {
myChart.resize(); myChart.resize();
}); });
// var selectedPro = param.name; // var selectedPro = param.name;
// if (!cityProper[selectedPro]) { // if (!cityProper[selectedPro]) {
// option.series.splice(1); // option.series.splice(1);
// option.legend = null; // option.legend = null;
// option.visualMap = null; // option.visualMap = null;
// myChart.setOption(option, true); // myChart.setOption(option, true);
// return; // return;
// } // }
//获取点击区域数据 //获取点击区域数据
// $.get(cityProper[selectedPro], function (geojson) { // $.get(cityProper[selectedPro], function (geojson) {
// echarts.registerMap(selectedPro, geojson); // echarts.registerMap(selectedPro, geojson);
// //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。 // //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
// option.series[0] = { // option.series[0] = {
// name: "", // name: "",
// type: "map", // type: "map",
// map: selectedPro, // map: selectedPro,
// boxDepth: 80, //地图倾斜度 // boxDepth: 80, //地图倾斜度
// regionHeight: 5, //地图厚度 // regionHeight: 5, //地图厚度
// itemStyle: { // itemStyle: {
// normal: { // normal: {
// label: { // label: {
// show: true, // show: true,
// }, // },
// }, // },
// emphasis: { // emphasis: {
// label: { // label: {
// show: true, // show: true,
// }, // },
// }, // },
// }, // },
// groundplane: { // groundplane: {
// show: false, // show: false,
// }, // },
// data: data, // data: data,
// shading: "realistic", // shading: "realistic",
// // 真实感材质相关配置 shading: 'realistic'时有效 // // 真实感材质相关配置 shading: 'realistic'时有效
// realisticMaterial: { // realisticMaterial: {
// detailTexture: "#fff", // 纹理贴图 // detailTexture: "#fff", // 纹理贴图
// textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数 // textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
// roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙 // roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
// metalness: 0, // 0材质是非金属 ，1金属 // metalness: 0, // 0材质是非金属 ，1金属
// roughnessAdjust: 0, // roughnessAdjust: 0,
// }, // },
// viewControl: { // viewControl: {
// distance: 30, // 地图视角 控制初始大小 // distance: 30, // 地图视角 控制初始大小
// rotateSensitivity: 1, // 旋转 // rotateSensitivity: 1, // 旋转
// zoomSensitivity: 1, // 缩放 // zoomSensitivity: 1, // 缩放
// }, // },
// }; // };
// myChart.setOption(option); // myChart.setOption(option);
// }); // });
}
} }
); }
registerMap();
}, },
}, },
mounted() { mounted() {

333
src/views/ZHDY.vue
View File

@ -1160,177 +1160,176 @@ export default {
myChart.resize(); myChart.resize();
}); });
//获取山东地图数据。 //获取山东地图数据。
$.get( let src = require("../assets/shandong.json");
"https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json", function registerMap() {
function (geojson) { echarts.registerMap("山东", src);
echarts.registerMap("山东", geojson); let option = {
let option = { series: [
series: [ {
{ tooltip: {
tooltip: { trigger: "item",
trigger: "item", // show: false,
// show: false, },
}, name: "山东",
name: "山东", type: "map",
type: "map", map: "山东",
map: "山东", boxDepth: 60, //地图倾斜度
boxDepth: 60, //地图倾斜度 regionHeight: 6, //地图厚度
regionHeight: 6, //地图厚度 aspectScale: 0.9, //地图长宽比
aspectScale: 0.9, //地图长宽比 emphasis: {
emphasis: { itemStyle: {
itemStyle: { areaColor: "#70EAF4", // 高亮时候地图显示的颜色
areaColor: "#70EAF4", // 高亮时候地图显示的颜色 borderWidth: 2, // 高亮时的边框宽度
borderWidth: 2, // 高亮时的边框宽度
},
label: {
// fontSize: 12, // 选中地图文字字号和字体颜色
fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
color: "#fff",
},
}, },
label: { label: {
show: true, //是否显示市 // fontSize: 12, // 选中地图文字字号和字体颜色
formatter: function (params) { fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
var name = params.name; color: "#fff",
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,
}, },
], label: {
animation: true, 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.setOption(option);
myChart.on("click", chartClick); myChart.on("click", chartClick);
//点击地图区域事件 //点击地图区域事件
function chartClick(param) { function chartClick(param) {
console.log(param); console.log(param);
myChart.setOption(option, false); myChart.setOption(option, false);
window.addEventListener("resize", function () { window.addEventListener("resize", function () {
myChart.resize(); myChart.resize();
}); });
// var selectedPro = param.name; // var selectedPro = param.name;
// if (!cityProper[selectedPro]) { // if (!cityProper[selectedPro]) {
// option.series.splice(1); // option.series.splice(1);
// option.legend = null; // option.legend = null;
// option.visualMap = null; // option.visualMap = null;
// myChart.setOption(option, true); // myChart.setOption(option, true);
// return; // return;
// } // }
//获取点击区域数据 //获取点击区域数据
// $.get(cityProper[selectedPro], function (geojson) { // $.get(cityProper[selectedPro], function (geojson) {
// echarts.registerMap(selectedPro, geojson); // echarts.registerMap(selectedPro, geojson);
// //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。 // //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
// option.series[0] = { // option.series[0] = {
// name: "", // name: "",
// type: "map", // type: "map",
// map: selectedPro, // map: selectedPro,
// boxDepth: 80, //地图倾斜度 // boxDepth: 80, //地图倾斜度
// regionHeight: 5, //地图厚度 // regionHeight: 5, //地图厚度
// itemStyle: { // itemStyle: {
// normal: { // normal: {
// label: { // label: {
// show: true, // show: true,
// }, // },
// }, // },
// emphasis: { // emphasis: {
// label: { // label: {
// show: true, // show: true,
// }, // },
// }, // },
// }, // },
// groundplane: { // groundplane: {
// show: false, // show: false,
// }, // },
// data: data, // data: data,
// shading: "realistic", // shading: "realistic",
// // 真实感材质相关配置 shading: 'realistic'时有效 // // 真实感材质相关配置 shading: 'realistic'时有效
// realisticMaterial: { // realisticMaterial: {
// detailTexture: "#fff", // 纹理贴图 // detailTexture: "#fff", // 纹理贴图
// textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数 // textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
// roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙 // roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
// metalness: 0, // 0材质是非金属 ，1金属 // metalness: 0, // 0材质是非金属 ，1金属
// roughnessAdjust: 0, // roughnessAdjust: 0,
// }, // },
// viewControl: { // viewControl: {
// distance: 30, // 地图视角 控制初始大小 // distance: 30, // 地图视角 控制初始大小
// rotateSensitivity: 1, // 旋转 // rotateSensitivity: 1, // 旋转
// zoomSensitivity: 1, // 缩放 // zoomSensitivity: 1, // 缩放
// }, // },
// }; // };
// myChart.setOption(option); // myChart.setOption(option);
// }); // });
}
} }
); }
registerMap();
}, },
}, },
mounted() { mounted() {
@ -1377,7 +1376,7 @@ export default {
line-height: 47px; line-height: 47px;
letter-spacing: 3px; letter-spacing: 3px;
color: #fff; color: #fff;
margin-left: -60px; margin-left: 60px;
} }
img:nth-of-type(1) { img:nth-of-type(1) {
@ -2010,7 +2009,7 @@ export default {
line-height: 36px; line-height: 36px;
} }
p.second { p.second {
width:118px; width: 118px;
height: 36px; height: 36px;
padding-left: 15px; padding-left: 15px;
font-size: 30px; font-size: 30px;