zyh
This commit is contained in:
unknown
parent
787023b2bd
commit
46c36491af
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -47,17 +47,6 @@
|
|||
</div>
|
||||
<div class="ynl">
|
||||
<p class="title">用能量</p>
|
||||
<!-- <ul class="typeBox">
|
||||
<li :class="type == '电' ? 'active' : ''" @click="type = '电'">
|
||||
电
|
||||
</li>
|
||||
<li :class="type == '水' ? 'active' : ''" @click="type = '水'">
|
||||
水
|
||||
</li>
|
||||
<li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
|
||||
蒸汽
|
||||
</li>
|
||||
</ul> -->
|
||||
<div id="ynl"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -130,6 +119,24 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="map"></div>
|
||||
<div class="tooltip">
|
||||
<img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
|
||||
<div class="title1">碳排放监测数据总览</div>
|
||||
<div class="txt">
|
||||
<div class="one">
|
||||
<span>接入用户数:</span>
|
||||
<p style="color: #d9e363">
|
||||
300<span style="color: #d9e363">户</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="two">
|
||||
<span>碳排放总量:</span>
|
||||
<p style="color: #44bfd6">
|
||||
450<span style="color: #44bfd6">万千瓦时</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="qyhyfb">
|
||||
<p class="title">企业行业分布</p>
|
||||
|
|
@ -1244,6 +1251,264 @@ export default {
|
|||
};
|
||||
this.defineEcharts("qyhyfb", option);
|
||||
},
|
||||
initMap() {
|
||||
//后端返回的数据
|
||||
var data = [
|
||||
{
|
||||
name: "济南市",
|
||||
value: 1,
|
||||
coord: [117.000923, 36.675807],
|
||||
},
|
||||
{
|
||||
name: "青岛市",
|
||||
value: 2,
|
||||
coord: [120.382639, 36.067082],
|
||||
},
|
||||
{
|
||||
name: "淄博市",
|
||||
value: 3,
|
||||
coord: [118.059134, 36.804685],
|
||||
},
|
||||
{
|
||||
name: "枣庄市",
|
||||
value: 4,
|
||||
coord: [117.557964, 34.856424],
|
||||
},
|
||||
{
|
||||
name: "东营市",
|
||||
value: 5,
|
||||
coord: [118.674767, 37.434751],
|
||||
},
|
||||
{
|
||||
name: "烟台市",
|
||||
value: 6,
|
||||
coord: [121.447935, 37.463822],
|
||||
},
|
||||
{
|
||||
name: "潍坊市",
|
||||
value: 7,
|
||||
coord: [119.161756, 36.706774],
|
||||
},
|
||||
{
|
||||
name: "济宁市",
|
||||
value: 8,
|
||||
coord: [116.587245, 35.415393],
|
||||
},
|
||||
{
|
||||
name: "泰安市",
|
||||
value: 9,
|
||||
coord: [117.089415, 36.188078],
|
||||
},
|
||||
{
|
||||
name: "威海市",
|
||||
value: 10,
|
||||
coord: [122.120419, 37.513068],
|
||||
},
|
||||
{
|
||||
name: "日照市",
|
||||
value: 11,
|
||||
coord: [119.526888, 35.416377],
|
||||
},
|
||||
{
|
||||
name: "临沂市",
|
||||
value: 12,
|
||||
coord: [118.356448, 35.104672],
|
||||
},
|
||||
{
|
||||
name: "德州市",
|
||||
value: 13,
|
||||
coord: [116.357465, 37.434093],
|
||||
},
|
||||
{
|
||||
name: "聊城市",
|
||||
value: 14,
|
||||
coord: [115.986869, 36.455829],
|
||||
},
|
||||
{
|
||||
name: "滨州市",
|
||||
value: 15,
|
||||
coord: [118.016974, 37.383542],
|
||||
},
|
||||
{
|
||||
name: "菏泽市",
|
||||
value: 16,
|
||||
coord: [115.469381, 35.246531],
|
||||
},
|
||||
];
|
||||
var chartDom = document.getElementById("map");
|
||||
var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
|
||||
window.addEventListener("resize", function () {
|
||||
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, // 选中地图文字字号和字体颜色
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
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, //文字大小
|
||||
fontFamily: "微软雅黑",
|
||||
// backgroundColor: {
|
||||
// image: "../assets/客户侧总体用能情况分析/光标.png",
|
||||
// },
|
||||
// padding: [15, 20],
|
||||
},
|
||||
rich: {
|
||||
fline: {
|
||||
padding: [0, 35],
|
||||
color: "#FDCC00",
|
||||
fontSize: 14,
|
||||
fontWeight: 600,
|
||||
},
|
||||
tline: {
|
||||
padding: [0, 27],
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
},
|
||||
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);
|
||||
// });
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
nyxhqk() {
|
||||
var attaData1 = [62, 52, 34, 61, 75, 140];
|
||||
var attaData2 = [162, 152, 134, 161, 115, 150];
|
||||
|
|
@ -1260,7 +1525,7 @@ export default {
|
|||
},
|
||||
legend: {
|
||||
left: "center",
|
||||
top:40,
|
||||
top: 40,
|
||||
data: [
|
||||
{
|
||||
name: "2020",
|
||||
|
|
@ -1375,263 +1640,7 @@ export default {
|
|||
this.defineEcharts("sh", this.circles5);
|
||||
this.defineEcharts("hg", this.circles6);
|
||||
this.nyxhqk();
|
||||
var data = [
|
||||
{
|
||||
name: "南京市",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
name: "济南市",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
name: "徐州市",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
name: "常州市",
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
name: "苏州市",
|
||||
value: 5,
|
||||
},
|
||||
{
|
||||
name: "南通市",
|
||||
value: 6,
|
||||
},
|
||||
{
|
||||
name: "连云港市",
|
||||
value: 7,
|
||||
},
|
||||
{
|
||||
name: "淮安市",
|
||||
value: 8,
|
||||
},
|
||||
{
|
||||
name: "盐城市",
|
||||
value: 9,
|
||||
},
|
||||
{
|
||||
name: "扬州市",
|
||||
value: 10,
|
||||
},
|
||||
{
|
||||
name: "镇江市",
|
||||
value: 11,
|
||||
},
|
||||
{
|
||||
name: "泰州市",
|
||||
value: 12,
|
||||
},
|
||||
{
|
||||
name: "宿迁市",
|
||||
value: 13,
|
||||
},
|
||||
];
|
||||
var splitList = [
|
||||
{
|
||||
start: 1,
|
||||
end: 1,
|
||||
label: "济南市",
|
||||
color: "#236da8",
|
||||
},
|
||||
{
|
||||
start: 2,
|
||||
end: 2,
|
||||
label: "无锡市",
|
||||
color: "#2884db",
|
||||
},
|
||||
{
|
||||
start: 3,
|
||||
end: 3,
|
||||
label: "徐州市",
|
||||
color: "#244779",
|
||||
},
|
||||
{
|
||||
start: 4,
|
||||
end: 4,
|
||||
label: "常州市",
|
||||
color: "#246198",
|
||||
},
|
||||
{
|
||||
start: 5,
|
||||
end: 5,
|
||||
label: "苏州市",
|
||||
color: "#2884db",
|
||||
},
|
||||
{
|
||||
start: 6,
|
||||
end: 6,
|
||||
label: "南通市",
|
||||
color: "#2884db",
|
||||
},
|
||||
{
|
||||
start: 7,
|
||||
end: 7,
|
||||
label: "连云港市",
|
||||
color: "#244779",
|
||||
},
|
||||
{
|
||||
start: 8,
|
||||
end: 8,
|
||||
label: "淮安市",
|
||||
color: "#244779",
|
||||
},
|
||||
{
|
||||
start: 9,
|
||||
end: 9,
|
||||
label: "盐城市",
|
||||
color: "#244779",
|
||||
},
|
||||
{
|
||||
start: 10,
|
||||
end: 10,
|
||||
label: "扬州市",
|
||||
color: "#246198",
|
||||
},
|
||||
{
|
||||
start: 11,
|
||||
end: 11,
|
||||
label: "镇江市",
|
||||
color: "#2884db",
|
||||
},
|
||||
{
|
||||
start: 12,
|
||||
end: 12,
|
||||
label: "泰州市",
|
||||
color: "#2884db",
|
||||
},
|
||||
{
|
||||
start: 13,
|
||||
end: 13,
|
||||
label: "宿迁市",
|
||||
color: "#244779",
|
||||
},
|
||||
];
|
||||
var chartDom = document.getElementById("map");
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
|
||||
//获取山东地图数据。
|
||||
$.get(
|
||||
"https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
|
||||
function (geojson) {
|
||||
echarts.registerMap("山东", geojson);
|
||||
let option = {
|
||||
series: [
|
||||
{
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
name: "山东",
|
||||
type: "map3D",
|
||||
map: "山东",
|
||||
boxDepth: 60, //地图倾斜度
|
||||
regionHeight: 6, //地图厚度
|
||||
label: {
|
||||
show: true, //是否显示市
|
||||
textStyle: {
|
||||
color: "#fff", //文字颜色
|
||||
fontSize: 12, //文字大小
|
||||
fontFamily: "微软雅黑",
|
||||
backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
opacity: 1, // 透明度
|
||||
borderWidth: 1.5, //分界线宽度
|
||||
borderColor: "#0699E4", //分界线颜色
|
||||
},
|
||||
groundplane: {
|
||||
show: true,
|
||||
},
|
||||
data: data,
|
||||
//shading: 'realistic',
|
||||
// 真实感材质相关配置 shading: 'realistic'时有效
|
||||
realisticMaterial: {
|
||||
detailTexture: "#093099", // 纹理贴图
|
||||
textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
|
||||
roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
|
||||
metalness: 1, // 0材质是非金属 ，1金属
|
||||
roughnessAdjust: 0,
|
||||
},
|
||||
viewControl: {
|
||||
distance: 80, // 地图视角 控制初始大小
|
||||
rotateSensitivity: 1, // 旋转
|
||||
zoomSensitivity: 1, // 缩放
|
||||
},
|
||||
},
|
||||
],
|
||||
dataRange: {
|
||||
show: false,
|
||||
splitList: splitList,
|
||||
},
|
||||
animation: true,
|
||||
};
|
||||
myChart.setOption(option);
|
||||
myChart.on("click", this.chartClick);
|
||||
let chartClick = function (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: 100, // 地图视角 控制初始大小
|
||||
rotateSensitivity: 1, // 旋转
|
||||
zoomSensitivity: 1, // 缩放
|
||||
},
|
||||
};
|
||||
myChart.setOption(option);
|
||||
});
|
||||
};
|
||||
}
|
||||
);
|
||||
this.initMap();
|
||||
},
|
||||
beforeDestroy() {
|
||||
//离开页面后，删除屏幕监听，防止监听事件一直存在
|
||||
|
|
@ -2231,6 +2240,74 @@ export default {
|
|||
transform: translateX(-50%);
|
||||
overflow: hidden;
|
||||
}
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
width: 281px;
|
||||
height: 170px;
|
||||
background: url("../assets/客户侧总体用能情况分析/组 3123.png");
|
||||
background-size: cover;
|
||||
z-index: 1;
|
||||
top: 418px;
|
||||
right: 542px;
|
||||
padding: 14px;
|
||||
box-sizing: border-box;
|
||||
padding-top: 36px;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
top: 42px;
|
||||
right: 14px;
|
||||
cursor: pointer;
|
||||
margin-right: 14px;
|
||||
}
|
||||
|
||||
.title1 {
|
||||
height: 27px;
|
||||
font-size: 22px;
|
||||
font-family: "YouSheBiaoTiHei";
|
||||
font-weight: 400;
|
||||
color: #60edff;
|
||||
line-height: 25px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.txt {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
font-family: "AlibabaPuHuiTi";
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 10px;
|
||||
margin-left: 0;
|
||||
|
||||
span:nth-of-type(1) {
|
||||
width: 89px;
|
||||
height: 21px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
width: 143px;
|
||||
height: 21px;
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
line-height: 20px;
|
||||
|
||||
span {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1010,7 +1010,7 @@ export default {
|
|||
subtext: "工业",
|
||||
text: "85.2%",
|
||||
left: "48",
|
||||
align:"center",
|
||||
align: "center",
|
||||
top: "40%",
|
||||
// padding: [10, 0],
|
||||
textStyle: {
|
||||
|
|
@ -1127,7 +1127,7 @@ export default {
|
|||
text: "85.2%",
|
||||
left: "48",
|
||||
top: "40%",
|
||||
align:"center",
|
||||
align: "center",
|
||||
padding: [10, 0],
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
|
|
@ -1207,6 +1207,265 @@ export default {
|
|||
};
|
||||
this.defineEcharts("xuefeng", option);
|
||||
},
|
||||
// 地图
|
||||
initMap() {
|
||||
//后端返回的数据
|
||||
var data = [
|
||||
{
|
||||
name: "济南市",
|
||||
value: 1,
|
||||
coord: [117.000923, 36.675807],
|
||||
},
|
||||
{
|
||||
name: "青岛市",
|
||||
value: 2,
|
||||
coord: [120.382639, 36.067082],
|
||||
},
|
||||
{
|
||||
name: "淄博市",
|
||||
value: 3,
|
||||
coord: [118.059134, 36.804685],
|
||||
},
|
||||
{
|
||||
name: "枣庄市",
|
||||
value: 4,
|
||||
coord: [117.557964, 34.856424],
|
||||
},
|
||||
{
|
||||
name: "东营市",
|
||||
value: 5,
|
||||
coord: [118.674767, 37.434751],
|
||||
},
|
||||
{
|
||||
name: "烟台市",
|
||||
value: 6,
|
||||
coord: [121.447935, 37.463822],
|
||||
},
|
||||
{
|
||||
name: "潍坊市",
|
||||
value: 7,
|
||||
coord: [119.161756, 36.706774],
|
||||
},
|
||||
{
|
||||
name: "济宁市",
|
||||
value: 8,
|
||||
coord: [116.587245, 35.415393],
|
||||
},
|
||||
{
|
||||
name: "泰安市",
|
||||
value: 9,
|
||||
coord: [117.089415, 36.188078],
|
||||
},
|
||||
{
|
||||
name: "威海市",
|
||||
value: 10,
|
||||
coord: [122.120419, 37.513068],
|
||||
},
|
||||
{
|
||||
name: "日照市",
|
||||
value: 11,
|
||||
coord: [119.526888, 35.416377],
|
||||
},
|
||||
{
|
||||
name: "临沂市",
|
||||
value: 12,
|
||||
coord: [118.356448, 35.104672],
|
||||
},
|
||||
{
|
||||
name: "德州市",
|
||||
value: 13,
|
||||
coord: [116.357465, 37.434093],
|
||||
},
|
||||
{
|
||||
name: "聊城市",
|
||||
value: 14,
|
||||
coord: [115.986869, 36.455829],
|
||||
},
|
||||
{
|
||||
name: "滨州市",
|
||||
value: 15,
|
||||
coord: [118.016974, 37.383542],
|
||||
},
|
||||
{
|
||||
name: "菏泽市",
|
||||
value: 16,
|
||||
coord: [115.469381, 35.246531],
|
||||
},
|
||||
];
|
||||
var chartDom = document.getElementById("map");
|
||||
var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
|
||||
window.addEventListener("resize", function () {
|
||||
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, // 选中地图文字字号和字体颜色
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
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, //文字大小
|
||||
fontFamily: "微软雅黑",
|
||||
// backgroundColor: {
|
||||
// image: "../assets/客户侧总体用能情况分析/光标.png",
|
||||
// },
|
||||
// padding: [15, 20],
|
||||
},
|
||||
rich: {
|
||||
fline: {
|
||||
padding: [0, 35],
|
||||
color: "#FDCC00",
|
||||
fontSize: 14,
|
||||
fontWeight: 600,
|
||||
},
|
||||
tline: {
|
||||
padding: [0, 27],
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
},
|
||||
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);
|
||||
// });
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.defineEcharts("ndqylfb", this.option1);
|
||||
|
|
@ -1215,263 +1474,7 @@ export default {
|
|||
this.defineEcharts("pcfxb", this.option4);
|
||||
this.gongye();
|
||||
this.xuefeng();
|
||||
var data = [
|
||||
{
|
||||
name: "南京市",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
name: "济南市",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
name: "徐州市",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
name: "常州市",
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
name: "苏州市",
|
||||
value: 5,
|
||||
},
|
||||
{
|
||||
name: "南通市",
|
||||
value: 6,
|
||||
},
|
||||
{
|
||||
name: "连云港市",
|
||||
value: 7,
|
||||
},
|
||||
{
|
||||
name: "淮安市",
|
||||
value: 8,
|
||||
},
|
||||
{
|
||||
name: "盐城市",
|
||||
value: 9,
|
||||
},
|
||||
{
|
||||
name: "扬州市",
|
||||
value: 10,
|
||||
},
|
||||
{
|
||||
name: "镇江市",
|
||||
value: 11,
|
||||
},
|
||||
{
|
||||
name: "泰州市",
|
||||
value: 12,
|
||||
},
|
||||
{
|
||||
name: "宿迁市",
|
||||
value: 13,
|
||||
},
|
||||
];
|
||||
var splitList = [
|
||||
{
|
||||
start: 1,
|
||||
end: 1,
|
||||
label: "济南市",
|
||||
color: "#236da8",
|
||||
},
|
||||
{
|
||||
start: 2,
|
||||
end: 2,
|
||||
label: "无锡市",
|
||||
color: "#2884db",
|
||||
},
|
||||
{
|
||||
start: 3,
|
||||
end: 3,
|
||||
label: "徐州市",
|
||||
color: "#244779",
|
||||
},
|
||||
{
|
||||
start: 4,
|
||||
end: 4,
|
||||
label: "常州市",
|
||||
color: "#246198",
|
||||
},
|
||||
{
|
||||
start: 5,
|
||||
end: 5,
|
||||
label: "苏州市",
|
||||
color: "#2884db",
|
||||
},
|
||||
{
|
||||
start: 6,
|
||||
end: 6,
|
||||
label: "南通市",
|
||||
color: "#2884db",
|
||||
},
|
||||
{
|
||||
start: 7,
|
||||
end: 7,
|
||||
label: "连云港市",
|
||||
color: "#244779",
|
||||
},
|
||||
{
|
||||
start: 8,
|
||||
end: 8,
|
||||
label: "淮安市",
|
||||
color: "#244779",
|
||||
},
|
||||
{
|
||||
start: 9,
|
||||
end: 9,
|
||||
label: "盐城市",
|
||||
color: "#244779",
|
||||
},
|
||||
{
|
||||
start: 10,
|
||||
end: 10,
|
||||
label: "扬州市",
|
||||
color: "#246198",
|
||||
},
|
||||
{
|
||||
start: 11,
|
||||
end: 11,
|
||||
label: "镇江市",
|
||||
color: "#2884db",
|
||||
},
|
||||
{
|
||||
start: 12,
|
||||
end: 12,
|
||||
label: "泰州市",
|
||||
color: "#2884db",
|
||||
},
|
||||
{
|
||||
start: 13,
|
||||
end: 13,
|
||||
label: "宿迁市",
|
||||
color: "#244779",
|
||||
},
|
||||
];
|
||||
var chartDom = document.getElementById("map");
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
|
||||
//获取山东地图数据。
|
||||
$.get(
|
||||
"https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
|
||||
function (geojson) {
|
||||
echarts.registerMap("山东", geojson);
|
||||
let option = {
|
||||
series: [
|
||||
{
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
name: "山东",
|
||||
type: "map3D",
|
||||
map: "山东",
|
||||
boxDepth: 60, //地图倾斜度
|
||||
regionHeight: 6, //地图厚度
|
||||
label: {
|
||||
show: true, //是否显示市
|
||||
textStyle: {
|
||||
color: "#fff", //文字颜色
|
||||
fontSize: 12, //文字大小
|
||||
fontFamily: "微软雅黑",
|
||||
backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
opacity: 1, // 透明度
|
||||
borderWidth: 1.5, //分界线宽度
|
||||
borderColor: "#0699E4", //分界线颜色
|
||||
},
|
||||
groundplane: {
|
||||
show: true,
|
||||
},
|
||||
data: data,
|
||||
//shading: 'realistic',
|
||||
// 真实感材质相关配置 shading: 'realistic'时有效
|
||||
realisticMaterial: {
|
||||
detailTexture: "#093099", // 纹理贴图
|
||||
textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
|
||||
roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
|
||||
metalness: 1, // 0材质是非金属 ，1金属
|
||||
roughnessAdjust: 0,
|
||||
},
|
||||
viewControl: {
|
||||
distance: 80, // 地图视角 控制初始大小
|
||||
rotateSensitivity: 1, // 旋转
|
||||
zoomSensitivity: 1, // 缩放
|
||||
},
|
||||
},
|
||||
],
|
||||
dataRange: {
|
||||
show: false,
|
||||
splitList: splitList,
|
||||
},
|
||||
animation: true,
|
||||
};
|
||||
myChart.setOption(option);
|
||||
myChart.on("click", this.chartClick);
|
||||
let chartClick = function (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: 100, // 地图视角 控制初始大小
|
||||
rotateSensitivity: 1, // 旋转
|
||||
zoomSensitivity: 1, // 缩放
|
||||
},
|
||||
};
|
||||
myChart.setOption(option);
|
||||
});
|
||||
};
|
||||
}
|
||||
);
|
||||
this.initMap();
|
||||
},
|
||||
beforeDestroy() {
|
||||
//离开页面后，删除屏幕监听，防止监听事件一直存在
|
||||
|
|
@ -2069,7 +2072,7 @@ export default {
|
|||
.title {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
width: 144px;
|
||||
width: 1.2rem;
|
||||
height: 36px;
|
||||
font-size: 18px;
|
||||
font-family: "Source Han Sans";
|
||||
|
|
@ -2129,15 +2132,14 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 994px;
|
||||
position: absolute;
|
||||
height: 627px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
#map {
|
||||
width: 994px;
|
||||
position: absolute;
|
||||
height: 627px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -120,6 +120,11 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="map"></div>
|
||||
<div class="tooltip">
|
||||
<p class="first">山东省</p>
|
||||
<p class="second">8000<sapn class="danwei1">户</sapn></p>
|
||||
<p class="thrid">7895<span class="danwei2">（kwh)</span></p>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="ndqylfb">
|
||||
<p class="title">年度签约量分布</p>
|
||||
|
|
@ -669,7 +674,7 @@ export default {
|
|||
shadowBlur: 20,
|
||||
},
|
||||
},
|
||||
data: [300, 400, 200, 250, 320, 180, 190, 400, 160, 300, 480,300],
|
||||
data: [300, 400, 200, 250, 320, 180, 190, 400, 160, 300, 480, 300],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
@ -1055,6 +1060,264 @@ export default {
|
|||
};
|
||||
this.defineEcharts("yhhyzb", option);
|
||||
},
|
||||
initMap() {
|
||||
//后端返回的数据
|
||||
var data = [
|
||||
{
|
||||
name: "济南市",
|
||||
value: 1,
|
||||
coord: [117.000923, 36.675807],
|
||||
},
|
||||
{
|
||||
name: "青岛市",
|
||||
value: 2,
|
||||
coord: [120.382639, 36.067082],
|
||||
},
|
||||
{
|
||||
name: "淄博市",
|
||||
value: 3,
|
||||
coord: [118.059134, 36.804685],
|
||||
},
|
||||
{
|
||||
name: "枣庄市",
|
||||
value: 4,
|
||||
coord: [117.557964, 34.856424],
|
||||
},
|
||||
{
|
||||
name: "东营市",
|
||||
value: 5,
|
||||
coord: [118.674767, 37.434751],
|
||||
},
|
||||
{
|
||||
name: "烟台市",
|
||||
value: 6,
|
||||
coord: [121.447935, 37.463822],
|
||||
},
|
||||
{
|
||||
name: "潍坊市",
|
||||
value: 7,
|
||||
coord: [119.161756, 36.706774],
|
||||
},
|
||||
{
|
||||
name: "济宁市",
|
||||
value: 8,
|
||||
coord: [116.587245, 35.415393],
|
||||
},
|
||||
{
|
||||
name: "泰安市",
|
||||
value: 9,
|
||||
coord: [117.089415, 36.188078],
|
||||
},
|
||||
{
|
||||
name: "威海市",
|
||||
value: 10,
|
||||
coord: [122.120419, 37.513068],
|
||||
},
|
||||
{
|
||||
name: "日照市",
|
||||
value: 11,
|
||||
coord: [119.526888, 35.416377],
|
||||
},
|
||||
{
|
||||
name: "临沂市",
|
||||
value: 12,
|
||||
coord: [118.356448, 35.104672],
|
||||
},
|
||||
{
|
||||
name: "德州市",
|
||||
value: 13,
|
||||
coord: [116.357465, 37.434093],
|
||||
},
|
||||
{
|
||||
name: "聊城市",
|
||||
value: 14,
|
||||
coord: [115.986869, 36.455829],
|
||||
},
|
||||
{
|
||||
name: "滨州市",
|
||||
value: 15,
|
||||
coord: [118.016974, 37.383542],
|
||||
},
|
||||
{
|
||||
name: "菏泽市",
|
||||
value: 16,
|
||||
coord: [115.469381, 35.246531],
|
||||
},
|
||||
];
|
||||
var chartDom = document.getElementById("map");
|
||||
var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
|
||||
window.addEventListener("resize", function () {
|
||||
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, // 选中地图文字字号和字体颜色
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
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, //文字大小
|
||||
fontFamily: "微软雅黑",
|
||||
// backgroundColor: {
|
||||
// image: "../assets/客户侧总体用能情况分析/光标.png",
|
||||
// },
|
||||
// padding: [15, 20],
|
||||
},
|
||||
rich: {
|
||||
fline: {
|
||||
padding: [0, 35],
|
||||
color: "#FDCC00",
|
||||
fontSize: 14,
|
||||
fontWeight: 600,
|
||||
},
|
||||
tline: {
|
||||
padding: [0, 27],
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
},
|
||||
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);
|
||||
// });
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.defineEcharts("ndqylfb", this.option);
|
||||
|
|
@ -1063,263 +1326,7 @@ export default {
|
|||
this.pcfx();
|
||||
this.yhhyzb();
|
||||
this.ndsdl();
|
||||
var data = [
|
||||
{
|
||||
name: "南京市",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
name: "济南市",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
name: "徐州市",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
name: "常州市",
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
name: "苏州市",
|
||||
value: 5,
|
||||
},
|
||||
{
|
||||
name: "南通市",
|
||||
value: 6,
|
||||
},
|
||||
{
|
||||
name: "连云港市",
|
||||
value: 7,
|
||||
},
|
||||
{
|
||||
name: "淮安市",
|
||||
value: 8,
|
||||
},
|
||||
{
|
||||
name: "盐城市",
|
||||
value: 9,
|
||||
},
|
||||
{
|
||||
name: "扬州市",
|
||||
value: 10,
|
||||
},
|
||||
{
|
||||
name: "镇江市",
|
||||
value: 11,
|
||||
},
|
||||
{
|
||||
name: "泰州市",
|
||||
value: 12,
|
||||
},
|
||||
{
|
||||
name: "宿迁市",
|
||||
value: 13,
|
||||
},
|
||||
];
|
||||
var splitList = [
|
||||
{
|
||||
start: 1,
|
||||
end: 1,
|
||||
label: "济南市",
|
||||
color: "#236da8",
|
||||
},
|
||||
{
|
||||
start: 2,
|
||||
end: 2,
|
||||
label: "无锡市",
|
||||
color: "#2884db",
|
||||
},
|
||||
{
|
||||
start: 3,
|
||||
end: 3,
|
||||
label: "徐州市",
|
||||
color: "#244779",
|
||||
},
|
||||
{
|
||||
start: 4,
|
||||
end: 4,
|
||||
label: "常州市",
|
||||
color: "#246198",
|
||||
},
|
||||
{
|
||||
start: 5,
|
||||
end: 5,
|
||||
label: "苏州市",
|
||||
color: "#2884db",
|
||||
},
|
||||
{
|
||||
start: 6,
|
||||
end: 6,
|
||||
label: "南通市",
|
||||
color: "#2884db",
|
||||
},
|
||||
{
|
||||
start: 7,
|
||||
end: 7,
|
||||
label: "连云港市",
|
||||
color: "#244779",
|
||||
},
|
||||
{
|
||||
start: 8,
|
||||
end: 8,
|
||||
label: "淮安市",
|
||||
color: "#244779",
|
||||
},
|
||||
{
|
||||
start: 9,
|
||||
end: 9,
|
||||
label: "盐城市",
|
||||
color: "#244779",
|
||||
},
|
||||
{
|
||||
start: 10,
|
||||
end: 10,
|
||||
label: "扬州市",
|
||||
color: "#246198",
|
||||
},
|
||||
{
|
||||
start: 11,
|
||||
end: 11,
|
||||
label: "镇江市",
|
||||
color: "#2884db",
|
||||
},
|
||||
{
|
||||
start: 12,
|
||||
end: 12,
|
||||
label: "泰州市",
|
||||
color: "#2884db",
|
||||
},
|
||||
{
|
||||
start: 13,
|
||||
end: 13,
|
||||
label: "宿迁市",
|
||||
color: "#244779",
|
||||
},
|
||||
];
|
||||
var chartDom = document.getElementById("map");
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
|
||||
//获取山东地图数据。
|
||||
$.get(
|
||||
"https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
|
||||
function (geojson) {
|
||||
echarts.registerMap("山东", geojson);
|
||||
let option = {
|
||||
series: [
|
||||
{
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
name: "山东",
|
||||
type: "map3D",
|
||||
map: "山东",
|
||||
boxDepth: 60, //地图倾斜度
|
||||
regionHeight: 6, //地图厚度
|
||||
label: {
|
||||
show: true, //是否显示市
|
||||
textStyle: {
|
||||
color: "#fff", //文字颜色
|
||||
fontSize: 12, //文字大小
|
||||
fontFamily: "微软雅黑",
|
||||
backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
opacity: 1, // 透明度
|
||||
borderWidth: 1.5, //分界线宽度
|
||||
borderColor: "#0699E4", //分界线颜色
|
||||
},
|
||||
groundplane: {
|
||||
show: true,
|
||||
},
|
||||
data: data,
|
||||
//shading: 'realistic',
|
||||
// 真实感材质相关配置 shading: 'realistic'时有效
|
||||
realisticMaterial: {
|
||||
detailTexture: "#093099", // 纹理贴图
|
||||
textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
|
||||
roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
|
||||
metalness: 1, // 0材质是非金属 ，1金属
|
||||
roughnessAdjust: 0,
|
||||
},
|
||||
viewControl: {
|
||||
distance: 80, // 地图视角 控制初始大小
|
||||
rotateSensitivity: 1, // 旋转
|
||||
zoomSensitivity: 1, // 缩放
|
||||
},
|
||||
},
|
||||
],
|
||||
dataRange: {
|
||||
show: false,
|
||||
splitList: splitList,
|
||||
},
|
||||
animation: true,
|
||||
};
|
||||
myChart.setOption(option);
|
||||
myChart.on("click", this.chartClick);
|
||||
let chartClick = function (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: 100, // 地图视角 控制初始大小
|
||||
rotateSensitivity: 1, // 旋转
|
||||
zoomSensitivity: 1, // 缩放
|
||||
},
|
||||
};
|
||||
myChart.setOption(option);
|
||||
});
|
||||
};
|
||||
}
|
||||
);
|
||||
this.initMap();
|
||||
},
|
||||
beforeDestroy() {
|
||||
//离开页面后，删除屏幕监听，防止监听事件一直存在
|
||||
|
|
@ -1965,6 +1972,60 @@ export default {
|
|||
transform: translateX(-50%);
|
||||
overflow: hidden;
|
||||
}
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
width: 0.927083rem /* 178/192 */;
|
||||
// width: 178px;
|
||||
height: 193px;
|
||||
background: url("../assets/zhsdy/10.png");
|
||||
background-size: cover;
|
||||
z-index: 1;
|
||||
top: 400px;
|
||||
right: 480px;
|
||||
padding: 14px;
|
||||
box-sizing: border-box;
|
||||
padding-top: 16px;
|
||||
text-align: center;
|
||||
p.first {
|
||||
width: 60px;
|
||||
height: 36px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
padding-left: 30px;
|
||||
color: #ffffff;
|
||||
line-height: 36px;
|
||||
}
|
||||
p.second {
|
||||
width:118px;
|
||||
height: 36px;
|
||||
padding-left: 15px;
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
color: #f1db50;
|
||||
line-height: 36px;
|
||||
.danwei1 {
|
||||
margin-left: 3px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
p.thrid {
|
||||
width: 137px;
|
||||
height: 36px;
|
||||
padding-left: 20px;
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
color: #59f1fc;
|
||||
line-height: 36px;
|
||||
span.danwei2 {
|
||||
margin-left: 3px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue