Merge branch 'master' of http://git.umayle.com:2023/zhouyonghang/zhuzhansheji
This commit is contained in:
unknown
commit
3ee2396af3
|
|
@ -9,8 +9,6 @@
|
||||||
<title>
|
<title>
|
||||||
<%= htmlWebpackPlugin.options.title %>
|
<%= htmlWebpackPlugin.options.title %>
|
||||||
</title>
|
</title>
|
||||||
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
|
||||||
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
|
<img src="../assets/客户侧总体用能情况分析/logo.png" alt="" />
|
||||||
<p>客户侧总体用能情况分析</p>
|
<p>客户侧总体用能情况分析</p>
|
||||||
<img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
|
<img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -93,8 +93,8 @@
|
||||||
<div class="qyydlpm">
|
<div class="qyydlpm">
|
||||||
<p class="title">企业用电量排名</p>
|
<p class="title">企业用电量排名</p>
|
||||||
<ul class="list">
|
<ul class="list">
|
||||||
<li v-for="(item, index) in list" :style="listClass(index)">
|
<li v-for="(item, index) in list">
|
||||||
<p>{{ index + 1 }}</p>
|
<p :style="listClass(index)">{{ index + 1 }}</p>
|
||||||
<p>{{ item.name }}</p>
|
<p>{{ item.name }}</p>
|
||||||
<p>{{ item.value }}</p>
|
<p>{{ item.value }}</p>
|
||||||
</li>
|
</li>
|
||||||
|
|
@ -408,11 +408,11 @@ export default {
|
||||||
methods: {
|
methods: {
|
||||||
listClass(index) {
|
listClass(index) {
|
||||||
if (index == 0) {
|
if (index == 0) {
|
||||||
return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
|
return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;backgroundColor:#6A6847;';
|
||||||
} else if (index == 1) {
|
} else if (index == 1) {
|
||||||
return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
|
return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;backgroundColor:#4C4D6A;';
|
||||||
} else if (index == 2) {
|
} else if (index == 2) {
|
||||||
return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
|
return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;backgroundColor:#202450;';
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
defineEcharts(dom, option) {
|
defineEcharts(dom, option) {
|
||||||
|
|
@ -425,7 +425,6 @@ export default {
|
||||||
myChart.resize();
|
myChart.resize();
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
//用户行业占比
|
//用户行业占比
|
||||||
initYhhyzb() {
|
initYhhyzb() {
|
||||||
let color = ["#0098FA", "#0CD9B5", "#3B72AD", "#FDCC00", "#F27629"];
|
let color = ["#0098FA", "#0CD9B5", "#3B72AD", "#FDCC00", "#F27629"];
|
||||||
|
|
@ -488,7 +487,7 @@ export default {
|
||||||
legend: {
|
legend: {
|
||||||
orient: "vertical",
|
orient: "vertical",
|
||||||
icon: "circle",
|
icon: "circle",
|
||||||
x: "70%",
|
x: "65%",
|
||||||
y: "center",
|
y: "center",
|
||||||
itemWidth: 12,
|
itemWidth: 12,
|
||||||
itemHeight: 12,
|
itemHeight: 12,
|
||||||
|
|
@ -551,35 +550,62 @@ export default {
|
||||||
},
|
},
|
||||||
//用能分类占比
|
//用能分类占比
|
||||||
initYnflzb() {
|
initYnflzb() {
|
||||||
let getParametricEquation = function (
|
let optionData = [
|
||||||
|
{
|
||||||
|
name: "楼宇",
|
||||||
|
value: 60,
|
||||||
|
itemStyle: {
|
||||||
|
color: "#91DAFF",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "工业",
|
||||||
|
value: 44,
|
||||||
|
itemStyle: {
|
||||||
|
color: "#4466E1",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "其他",
|
||||||
|
value: 32,
|
||||||
|
itemStyle: {
|
||||||
|
color: "#83E7BA",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
let option = getPie3D(optionData, 0.59);
|
||||||
|
// 生成扇形的曲面参数方程
|
||||||
|
function getParametricEquation(
|
||||||
startRatio,
|
startRatio,
|
||||||
endRatio,
|
endRatio,
|
||||||
isSelected,
|
isSelected,
|
||||||
isHovered,
|
isHovered,
|
||||||
k,
|
k,
|
||||||
height
|
h
|
||||||
) {
|
) {
|
||||||
// 计算
|
// 计算
|
||||||
let midRatio = (startRatio + endRatio) / 2;
|
const midRatio = (startRatio + endRatio) / 2;
|
||||||
|
|
||||||
let startRadian = startRatio * Math.PI * 2;
|
const startRadian = startRatio * Math.PI * 2;
|
||||||
let endRadian = endRatio * Math.PI * 2;
|
const endRadian = endRatio * Math.PI * 2;
|
||||||
let midRadian = midRatio * Math.PI * 2;
|
const midRadian = midRatio * Math.PI * 2;
|
||||||
|
|
||||||
// 如果只有一个扇形，则不实现选中效果。
|
// 如果只有一个扇形，则不实现选中效果。
|
||||||
if (startRatio === 0 && endRatio === 1) {
|
if (startRatio === 0 && endRatio === 1) {
|
||||||
|
// eslint-disable-next-line no-param-reassign
|
||||||
isSelected = false;
|
isSelected = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
|
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
|
||||||
|
// eslint-disable-next-line no-param-reassign
|
||||||
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;
|
const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
|
||||||
let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
|
const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
|
||||||
|
|
||||||
// 计算高亮效果的放大比例（未高亮，则比例为 1）
|
// 计算高亮效果的放大比例（未高亮，则比例为 1）
|
||||||
let hoverRate = isHovered ? 1.05 : 1;
|
const hoverRate = isHovered ? 1.05 : 1;
|
||||||
|
|
||||||
// 返回曲面参数方程
|
// 返回曲面参数方程
|
||||||
return {
|
return {
|
||||||
|
|
@ -595,7 +621,7 @@ export default {
|
||||||
step: Math.PI / 20,
|
step: Math.PI / 20,
|
||||||
},
|
},
|
||||||
|
|
||||||
x: function (u, v) {
|
x(u, v) {
|
||||||
if (u < startRadian) {
|
if (u < startRadian) {
|
||||||
return (
|
return (
|
||||||
offsetX +
|
offsetX +
|
||||||
|
|
@ -611,7 +637,7 @@ export default {
|
||||||
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
|
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
|
||||||
},
|
},
|
||||||
|
|
||||||
y: function (u, v) {
|
y(u, v) {
|
||||||
if (u < startRadian) {
|
if (u < startRadian) {
|
||||||
return (
|
return (
|
||||||
offsetY +
|
offsetY +
|
||||||
|
|
@ -627,34 +653,36 @@ export default {
|
||||||
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
|
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
|
||||||
},
|
},
|
||||||
|
|
||||||
z: function (u, v) {
|
z(u, v) {
|
||||||
if (u < -Math.PI * 0.5) {
|
if (u < -Math.PI * 0.5) {
|
||||||
return Math.sin(u);
|
return Math.sin(u);
|
||||||
}
|
}
|
||||||
if (u > Math.PI * 2.5) {
|
if (u > Math.PI * 2.5) {
|
||||||
return Math.sin(u);
|
return Math.sin(u) * h * 0.1;
|
||||||
}
|
}
|
||||||
return Math.sin(v) > 0 ? 1 * height : -1;
|
// 当前图形的高度是Z根据h（每个value的值决定的）
|
||||||
|
return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
};
|
}
|
||||||
// 生成模拟 3D 饼图的配置项
|
// 生成模拟 3D 饼图的配置项
|
||||||
let getPie3D = function (pieData, internalDiameterRatio) {
|
function getPie3D(pieData, internalDiameterRatio) {
|
||||||
let series = [];
|
const series = [];
|
||||||
|
// 总和
|
||||||
let sumValue = 0;
|
let sumValue = 0;
|
||||||
let startValue = 0;
|
let startValue = 0;
|
||||||
let endValue = 0;
|
let endValue = 0;
|
||||||
let legendData = [];
|
const legendData = [];
|
||||||
let k =
|
const k =
|
||||||
typeof internalDiameterRatio !== "undefined"
|
typeof internalDiameterRatio !== "undefined"
|
||||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||||
: 1 / 3;
|
: 1 / 3;
|
||||||
|
|
||||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||||
for (let i = 0; i < pieData.length; i++) {
|
for (let i = 0; i < pieData.length; i += 1) {
|
||||||
sumValue += pieData[i].value;
|
sumValue += pieData[i].value;
|
||||||
|
|
||||||
let seriesItem = {
|
const seriesItem = {
|
||||||
name:
|
name:
|
||||||
typeof pieData[i].name === "undefined"
|
typeof pieData[i].name === "undefined"
|
||||||
? `series${i}`
|
? `series${i}`
|
||||||
|
|
@ -668,17 +696,19 @@ export default {
|
||||||
pieStatus: {
|
pieStatus: {
|
||||||
selected: false,
|
selected: false,
|
||||||
hovered: false,
|
hovered: false,
|
||||||
k: k,
|
k,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
if (typeof pieData[i].itemStyle != "undefined") {
|
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||||
let itemStyle = {};
|
const { itemStyle } = pieData[i];
|
||||||
|
|
||||||
typeof pieData[i].itemStyle.color != "undefined"
|
// eslint-disable-next-line no-unused-expressions
|
||||||
|
typeof pieData[i].itemStyle.color !== "undefined"
|
||||||
? (itemStyle.color = pieData[i].itemStyle.color)
|
? (itemStyle.color = pieData[i].itemStyle.color)
|
||||||
: null;
|
: null;
|
||||||
typeof pieData[i].itemStyle.opacity != "undefined"
|
// eslint-disable-next-line no-unused-expressions
|
||||||
|
typeof pieData[i].itemStyle.opacity !== "undefined"
|
||||||
? (itemStyle.opacity = pieData[i].itemStyle.opacity)
|
? (itemStyle.opacity = pieData[i].itemStyle.opacity)
|
||||||
: null;
|
: null;
|
||||||
|
|
||||||
|
|
@ -686,12 +716,11 @@ export default {
|
||||||
}
|
}
|
||||||
series.push(seriesItem);
|
series.push(seriesItem);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||||
for (let i = 0; i < series.length; i++) {
|
for (let i = 0; i < series.length; i += 1) {
|
||||||
endValue = startValue + series[i].pieData.value;
|
endValue = startValue + series[i].pieData.value;
|
||||||
console.log(series[i]);
|
|
||||||
series[i].pieData.startRatio = startValue / sumValue;
|
series[i].pieData.startRatio = startValue / sumValue;
|
||||||
series[i].pieData.endRatio = endValue / sumValue;
|
series[i].pieData.endRatio = endValue / sumValue;
|
||||||
series[i].parametricEquation = getParametricEquation(
|
series[i].parametricEquation = getParametricEquation(
|
||||||
|
|
@ -700,190 +729,109 @@ export default {
|
||||||
false,
|
false,
|
||||||
false,
|
false,
|
||||||
k,
|
k,
|
||||||
series[i].pieData.value
|
// 我这里做了一个处理，使除了第一个之外的值都是10
|
||||||
|
series[i].pieData.value === series[0].pieData.value ? 35 : 10
|
||||||
);
|
);
|
||||||
|
|
||||||
startValue = endValue;
|
startValue = endValue;
|
||||||
|
|
||||||
legendData.push(series[i].name);
|
legendData.push(series[i].name);
|
||||||
}
|
}
|
||||||
return series;
|
|
||||||
};
|
|
||||||
// 传入数据生成 option
|
|
||||||
const optionsData = [
|
|
||||||
{
|
|
||||||
name: "楼宇",
|
|
||||||
value: 4256,
|
|
||||||
itemStyle: {
|
|
||||||
// opacity: 0.5,
|
|
||||||
color: "#2A71FF",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
// 准备待返回的配置项，把准备好的 legendData、series 传入。
|
||||||
name: "工业",
|
const option = {
|
||||||
value: 2356,
|
// animation: false,
|
||||||
itemStyle: {
|
legend: {
|
||||||
// opacity: 0.5,
|
left: "80%",
|
||||||
color: "#00EDFE",
|
top: "40%",
|
||||||
|
data: ["楼宇", "工业", "其他"],
|
||||||
|
orient: "vertical",
|
||||||
|
icon: "roundRect",
|
||||||
|
itemWidth: 10, // 图标宽度
|
||||||
|
itemHeight: 10, // 图标高度
|
||||||
|
textStyle: {
|
||||||
|
fontSize: "0.06rem",
|
||||||
|
fontFamily: "AlibabaPuHuiTi",
|
||||||
|
fontWeight: 400,
|
||||||
|
color: "rgba(255,255,255,0.8)",
|
||||||
|
},
|
||||||
|
formatter: (name) => {
|
||||||
|
if (optionData.length) {
|
||||||
|
const item = optionData.filter((item) => item.name === name)[0];
|
||||||
|
return ` ${name} ${item.value}%`;
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "其他",
|
|
||||||
value: 2018,
|
|
||||||
itemStyle: {
|
|
||||||
// opacity: 0.5,
|
|
||||||
color: "#FEDB4B",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
];
|
|
||||||
const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
|
||||||
series.push({
|
|
||||||
name: "pie2d",
|
|
||||||
type: "pie",
|
|
||||||
|
|
||||||
label: {
|
|
||||||
show: false,
|
|
||||||
opacity: 1,
|
|
||||||
fontSize: "0.07rem",
|
|
||||||
lineHeight: 20,
|
|
||||||
textStyle: {
|
|
||||||
fontSize: "0.07rem",
|
|
||||||
color: "#fff",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
labelLine: {
|
|
||||||
length: 30,
|
|
||||||
length2: 30,
|
|
||||||
},
|
|
||||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
|
||||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
|
||||||
radius: ["40%", "60%"],
|
|
||||||
// center: ["30%", "50%"],
|
|
||||||
center: ["40%", "50%"],
|
|
||||||
data: optionsData,
|
|
||||||
itemStyle: {
|
|
||||||
opacity: 0,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
let data = [
|
|
||||||
{
|
|
||||||
name: "楼宇",
|
|
||||||
value: "30%",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "工业",
|
|
||||||
value: "30%",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "其他",
|
|
||||||
value: "40%",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
// 准备待返回的配置项，把准备好的 legendData、series 传入。
|
|
||||||
let option = {
|
|
||||||
legend: {
|
|
||||||
show: true,
|
|
||||||
tooltip: {
|
tooltip: {
|
||||||
|
formatter: (params) => {
|
||||||
|
if (params.seriesName !== "mouseoutSeries") {
|
||||||
|
return `${
|
||||||
|
params.seriesName
|
||||||
|
}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
|
||||||
|
params.color
|
||||||
|
};"></span>${option.series[params.seriesIndex].pieData.value}`;
|
||||||
|
}
|
||||||
|
return "";
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis3D: {
|
||||||
|
min: -1,
|
||||||
|
max: 1,
|
||||||
|
},
|
||||||
|
yAxis3D: {
|
||||||
|
min: -1,
|
||||||
|
max: 1,
|
||||||
|
},
|
||||||
|
zAxis3D: {
|
||||||
|
min: -1,
|
||||||
|
max: 1,
|
||||||
|
},
|
||||||
|
grid3D: {
|
||||||
show: false,
|
show: false,
|
||||||
|
boxHeight: 10,
|
||||||
|
top: "0%",
|
||||||
|
viewControl: {
|
||||||
|
// 3d效果可以放大、旋转等，请自己去查看官方配置
|
||||||
|
alpha: 20,
|
||||||
|
beta: 30,
|
||||||
|
autoRotate: false, // 禁用自动旋转
|
||||||
|
distance: 200, // 初始视角距离主体的距离
|
||||||
|
panMouseButton: "none", // 设置中键拖拽进行平移
|
||||||
|
rotateMouseButton: "none", // 设置右键拖拽进行旋转
|
||||||
|
zoomMouseButton: "none", // 禁用鼠标缩放
|
||||||
|
},
|
||||||
|
// 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
|
||||||
|
postEffect: {
|
||||||
|
// 配置这项会出现锯齿，请自己去查看官方配置有办法解决
|
||||||
|
enable: false,
|
||||||
|
bloom: {
|
||||||
|
enable: true,
|
||||||
|
bloomIntensity: 0.1,
|
||||||
|
},
|
||||||
|
SSAO: {
|
||||||
|
enable: true,
|
||||||
|
quality: "medium",
|
||||||
|
radius: 2,
|
||||||
|
},
|
||||||
|
// temporalSuperSampling: {
|
||||||
|
// enable: true,
|
||||||
|
// },
|
||||||
|
},
|
||||||
},
|
},
|
||||||
orient: "vertical",
|
series,
|
||||||
data: data,
|
};
|
||||||
top: "center",
|
return option;
|
||||||
itemGap: 14,
|
}
|
||||||
itemHeight: 8,
|
let chartDom = document.getElementById("ynflzb");
|
||||||
itemWidth: 17,
|
var myChart = this.$echarts.init(chartDom, null, {
|
||||||
right: "2%",
|
devicePixelRatio: 10, // 设置为2或更高的值
|
||||||
textStyle: {
|
});
|
||||||
color: "#fff",
|
myChart.setOption(option);
|
||||||
fontSize: "0.06rem",
|
window.addEventListener("resize", function () {
|
||||||
},
|
myChart.resize();
|
||||||
formatter: function (name) {
|
});
|
||||||
let res = data.filter((v) => v.name === name);
|
|
||||||
res = res[0] || {};
|
|
||||||
let unit = res.unit || "";
|
|
||||||
return name + " " + res.value + unit;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
animation: false,
|
|
||||||
tooltip: {
|
|
||||||
show: false,
|
|
||||||
formatter: (params) => {
|
|
||||||
if (
|
|
||||||
params.seriesName !== "mouseoutSeries" &&
|
|
||||||
params.seriesName !== "pie2d"
|
|
||||||
) {
|
|
||||||
return `${
|
|
||||||
params.seriesName
|
|
||||||
}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
|
|
||||||
params.color
|
|
||||||
};"></span>${
|
|
||||||
option.series[params.seriesIndex].pieData.value + "%"
|
|
||||||
}`;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
textStyle: {
|
|
||||||
fontSize: "0.07rem",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
x: "center",
|
|
||||||
top: "20",
|
|
||||||
textStyle: {
|
|
||||||
color: "#fff",
|
|
||||||
fontSize: "0.11rem",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// backgroundColor: "#0E3567",
|
|
||||||
labelLine: {
|
|
||||||
show: false,
|
|
||||||
lineStyle: {
|
|
||||||
color: "#7BC0CB",
|
|
||||||
},
|
|
||||||
normal: {
|
|
||||||
show: true,
|
|
||||||
length: 10,
|
|
||||||
length2: 10,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
show: false,
|
|
||||||
// position: "outside",
|
|
||||||
// formatter: "{b} \n{d}%",
|
|
||||||
// textStyle: {
|
|
||||||
// color: "#fff",
|
|
||||||
// fontSize: "14px",
|
|
||||||
// },
|
|
||||||
},
|
|
||||||
xAxis3D: {
|
|
||||||
min: -1,
|
|
||||||
max: 1,
|
|
||||||
},
|
|
||||||
yAxis3D: {
|
|
||||||
min: -1,
|
|
||||||
max: 1,
|
|
||||||
},
|
|
||||||
zAxis3D: {
|
|
||||||
min: -1,
|
|
||||||
max: 1,
|
|
||||||
},
|
|
||||||
grid3D: {
|
|
||||||
show: false,
|
|
||||||
boxHeight: 0.01,
|
|
||||||
//top: '30%',
|
|
||||||
bottom: "500%",
|
|
||||||
left: "-7%",
|
|
||||||
// environment: "rgba(255,255,255,0)",
|
|
||||||
viewControl: {
|
|
||||||
distance: 180,
|
|
||||||
alpha: 25,
|
|
||||||
beta: 60,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
series: series,
|
|
||||||
};
|
|
||||||
this.defineEcharts("ynflzb", option);
|
|
||||||
},
|
},
|
||||||
|
//地图
|
||||||
initMap() {
|
initMap() {
|
||||||
//后端返回的数据
|
//后端返回的数据
|
||||||
var data = [
|
var data = [
|
||||||
|
|
@ -974,174 +922,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 +1437,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;
|
||||||
|
|
@ -1592,14 +1537,16 @@ export default {
|
||||||
#ynflzb {
|
#ynflzb {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
padding-right: 40px;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pic {
|
.pic {
|
||||||
width: 300px;
|
width: 250px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 150px;
|
height: 120px;
|
||||||
top: 100px;
|
top: 120px;
|
||||||
left: 40px;
|
left: 70px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1650,6 +1597,7 @@ export default {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border: 1px solid #b1b1b1;
|
border: 1px solid #b1b1b1;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
|
background-color: #203265;
|
||||||
}
|
}
|
||||||
|
|
||||||
p:nth-of-type(2) {
|
p:nth-of-type(2) {
|
||||||
|
|
@ -1690,6 +1638,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 +1657,8 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
#yhzyfbqk {
|
#yhzyfbqk {
|
||||||
width: 100%;
|
width: 994px;
|
||||||
height: 100%;
|
height: 324px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1391,34 +1391,27 @@ 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, //是否显示市
|
show: true, //是否显示市
|
||||||
|
|
@ -1454,115 +1447,150 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
itemStyle: {
|
},
|
||||||
opacity: 0.8, // 透明度
|
label: {
|
||||||
borderWidth: 2, //分界线宽度
|
show: true, //是否显示市
|
||||||
borderColor: "#0699E4", //分界线颜色
|
formatter: function (params) {
|
||||||
areaColor: {
|
var name = params.name;
|
||||||
x: 0.5,
|
var value = params.value;
|
||||||
y: 0.7,
|
var text = ` {fline|${value}}\n{tline|${name}} `;
|
||||||
r: 0.5,
|
return text;
|
||||||
colorStops: [
|
},
|
||||||
{
|
textStyle: {
|
||||||
offset: 0,
|
color: "#000", //文字颜色
|
||||||
color: "rgba(20,110,230,0.4)",
|
// fontSize: 16, //文字大小
|
||||||
},
|
fontSize: "0.0833rem", //文字大小
|
||||||
{
|
fontFamily: "微软雅黑",
|
||||||
offset: 1,
|
// backgroundColor: {
|
||||||
color: "rgba(6,33,121,0.4)",
|
// image: "../assets/客户侧总体用能情况分析/光标.png",
|
||||||
},
|
// },
|
||||||
],
|
// padding: [15, 20],
|
||||||
global: false, // 缺省为 false
|
},
|
||||||
|
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",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
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,
|
|
||||||
},
|
},
|
||||||
],
|
itemStyle: {
|
||||||
animation: true,
|
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];
|
||||||
|
|
|
||||||
|
|
@ -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";
|
||||||
|
|
|
||||||
|
|
@ -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() {
|
||||||
|
|
|
||||||
|
|
@ -1037,7 +1037,17 @@ export default {
|
||||||
console.log(item);
|
console.log(item);
|
||||||
percent = ((item.value / total) * 100).toFixed(2);
|
percent = ((item.value / total) * 100).toFixed(2);
|
||||||
if (name !== "") {
|
if (name !== "") {
|
||||||
return `{name|${name}}` + "\t" + "\t"+"\t" + "\t" + `{num|${percent}}`+"\t" + "\t"+`{name|%}`;
|
return (
|
||||||
|
`{name|${name}}` +
|
||||||
|
"\t" +
|
||||||
|
"\t" +
|
||||||
|
"\t" +
|
||||||
|
"\t" +
|
||||||
|
`{num|${percent}}` +
|
||||||
|
"\t" +
|
||||||
|
"\t" +
|
||||||
|
`{name|%}`
|
||||||
|
);
|
||||||
// return `{name|${name}` + `{num|${percent}}{name|kWh}`;
|
// return `{name|${name}` + `{num|${percent}}{name|kWh}`;
|
||||||
} else {
|
} else {
|
||||||
return "";
|
return "";
|
||||||
|
|
@ -1056,7 +1066,7 @@ export default {
|
||||||
},
|
},
|
||||||
num: {
|
num: {
|
||||||
// fontSize: 12,
|
// fontSize: 12,
|
||||||
fontWeight:700,
|
fontWeight: 700,
|
||||||
fontSize: "0.0833rem",
|
fontSize: "0.0833rem",
|
||||||
color: color[1],
|
color: color[1],
|
||||||
},
|
},
|
||||||
|
|
@ -1161,177 +1171,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() {
|
||||||
|
|
@ -2011,7 +2020,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;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue