This commit is contained in:
lll
parent
687cf494d3
commit
dc8d3c20d1
|
|
@ -26,7 +26,7 @@ const routes = [
|
|||
];
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: "history",
|
||||
mode: "hash",
|
||||
base: process.env.BASE_URL,
|
||||
routes,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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];
|
||||
|
|
|
|||
|
|
@ -17,28 +17,28 @@
|
|||
<div class="bottom">
|
||||
<div class="bottomBox">
|
||||
<img src="../assets/客户侧总体用能情况分析/图标.png" alt="" />
|
||||
<div>
|
||||
<div class="box1">
|
||||
<p>用电量(MWH)</p>
|
||||
<p><span>84.00</span><span>-13.20%</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottomBox">
|
||||
<img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" />
|
||||
<div>
|
||||
<div class="box1">
|
||||
<p>用蒸汽量(m2)</p>
|
||||
<p><span>45.32</span><span>-23.20%</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottomBox">
|
||||
<img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" />
|
||||
<div>
|
||||
<div class="box1">
|
||||
<p>用水量(m2)</p>
|
||||
<p><span>56.00</span><span>-33.20%</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottomBox">
|
||||
<img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" />
|
||||
<div>
|
||||
<div class="box1">
|
||||
<p>用汽量(m2)</p>
|
||||
<p><span>37.00</span><span>43.20%</span></p>
|
||||
</div>
|
||||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue