1348 lines
47 KiB
Vue
1348 lines
47 KiB
Vue
<template>
|
||
<div class="box">
|
||
<div class="title">
|
||
<img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
|
||
<p>客户侧总体用能情况分析</p>
|
||
<img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
|
||
</div>
|
||
<div class="containter">
|
||
<div class="left">
|
||
<div class="jrtj">
|
||
<p class="title">接入统计</p>
|
||
<div class="insides">
|
||
<div class="con" v-for="item in tjlist">
|
||
<img src="../assets/tan/组 3128.png" alt="">
|
||
<div class="r_con">
|
||
<p>{{ item.count }}</p>
|
||
<p>{{ item.name }}</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="center">
|
||
<p>100</p>
|
||
<p>总接入数量</p>
|
||
<img src="../assets/tan/组 3129.png" alt="" class="center_img" />
|
||
</div>
|
||
</div>
|
||
<div class="ssfhzs">
|
||
<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>
|
||
<li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
|
||
钢铁
|
||
</li>
|
||
<li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
|
||
有色
|
||
</li>
|
||
</ul>
|
||
<div id="ssfhzs"></div>
|
||
</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>
|
||
<div class="right">
|
||
<div class="yhhyzb">
|
||
<p class="title">用户行业占比</p>
|
||
<div id="yhhyzb"></div>
|
||
</div>
|
||
<div class="ynflzb">
|
||
<p class="title">用能分类占比</p>
|
||
<img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
|
||
<div id="ynflzb"></div>
|
||
</div>
|
||
<div class="qyydlpm">
|
||
<p class="title">企业用电量排名</p>
|
||
<ul class="list">
|
||
<li v-for="(item, index) in list" :style="listClass(index)">
|
||
<p>{{ index + 1 }}</p>
|
||
<p>{{ item.name }}</p>
|
||
<p>{{ item.value }}</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="footer"></div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import * as echarts from "echarts";
|
||
const fontSizeRem = function (size) {
|
||
const clientWidth =
|
||
window.innerWidth ||
|
||
document.documentElement.clientWidth ||
|
||
document.body.clientWidth;
|
||
if (!clientWidth) return;
|
||
let fontSize = clientWidth / 1920; //尺寸大小
|
||
return size * fontSize;
|
||
};
|
||
export default {
|
||
data() {
|
||
return {
|
||
res: "日",
|
||
type: "总量",
|
||
tjlist: [
|
||
{
|
||
name: "工业生产",
|
||
count: "10",
|
||
},
|
||
{
|
||
name: "商业楼宇",
|
||
count: "22",
|
||
},
|
||
{
|
||
name: "公共建设",
|
||
count: "18",
|
||
},
|
||
{
|
||
name: "其他",
|
||
count: "50",
|
||
},
|
||
],
|
||
list: [
|
||
{
|
||
name: "济南综合新能源服务有线公司",
|
||
value: "236",
|
||
},
|
||
{
|
||
name: "济南综合新能源服务有线公司",
|
||
value: "236",
|
||
},
|
||
{
|
||
name: "济南综合新能源服务有线公司",
|
||
value: "236",
|
||
},
|
||
{
|
||
name: "济南综合新能源服务有线公司",
|
||
value: "236",
|
||
},
|
||
{
|
||
name: "济南综合新能源服务有线公司",
|
||
value: "236",
|
||
},
|
||
{
|
||
name: "济南综合新能源服务有线公司",
|
||
value: "236",
|
||
},
|
||
{
|
||
name: "济南综合新能源服务有线公司",
|
||
value: "236",
|
||
},
|
||
{
|
||
name: "济南综合新能源服务有线公司",
|
||
value: "236",
|
||
},
|
||
{
|
||
name: "济南综合新能源服务有线公司",
|
||
value: "236",
|
||
},
|
||
{
|
||
name: "济南综合新能源服务有线公司",
|
||
value: "236",
|
||
},
|
||
],
|
||
option: {
|
||
// tooltip: {
|
||
// trigger: "axis",
|
||
// axisPointer: {
|
||
// type: "cross",
|
||
// label: {
|
||
// backgroundColor: "#6a7985",
|
||
// },
|
||
// },
|
||
// },
|
||
// legend: {
|
||
// left: "right",
|
||
// data: [
|
||
// { icon: "roundRect", name: "昨日" },
|
||
// { icon: "roundRect", name: "今日" },
|
||
// ],
|
||
// textStyle: {
|
||
// fontSize: 14,
|
||
// fontFamily: "AlibabaPuHuiTi",
|
||
// fontWeight: 400,
|
||
// color: "rgba(255,255,255,0.8)",
|
||
// },
|
||
// },
|
||
|
||
grid: {
|
||
left: "4%",
|
||
right: "4%",
|
||
bottom: "3%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
boundaryGap: false,
|
||
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
|
||
axisLabel: {
|
||
show: true,
|
||
interval: 0,
|
||
textStyle: {
|
||
fontSize: fontSizeRem(12),
|
||
fontFamily: "AlibabaPuHuiTi",
|
||
fontWeight: 400,
|
||
color: "rgba(255,255,255,0.8)",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
name: "单位:万吨标煤",
|
||
nameTextStyle: {
|
||
color: "#fff",
|
||
fontSize: fontSizeRem(14),
|
||
padding: fontSizeRem(10),
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
fontSize: fontSizeRem(14),
|
||
fontFamily: "AlibabaPuHuiTi",
|
||
fontWeight: 400,
|
||
color: "rgba(255,255,255,0.8)",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "",
|
||
type: "line",
|
||
stack: "Total",
|
||
smooth: true,
|
||
lineStyle: {
|
||
width: fontSizeRem(2),
|
||
color: "#29F1FA",
|
||
},
|
||
showSymbol: false,
|
||
itemStyle: {
|
||
color: "#29F1FA",
|
||
},
|
||
areaStyle: {
|
||
opacity: 0.4,
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgb(7, 51, 99)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgb(7, 67, 103)",
|
||
},
|
||
]),
|
||
},
|
||
emphasis: {
|
||
focus: "series",
|
||
},
|
||
data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
|
||
},
|
||
],
|
||
},
|
||
option1: {
|
||
// tooltip: {
|
||
// trigger: "axis",
|
||
// axisPointer: {
|
||
// type: "cross",
|
||
// label: {
|
||
// backgroundColor: "#6a7985",
|
||
// },
|
||
// },
|
||
// },
|
||
legend: {
|
||
left: "right",
|
||
data: [
|
||
{ icon: "circle", name: "2022" },
|
||
{ icon: "circle", name: "2023" },
|
||
],
|
||
textStyle: {
|
||
fontSize: fontSizeRem(14),
|
||
fontFamily: "AlibabaPuHuiTi",
|
||
fontWeight: 400,
|
||
color: "rgba(255,255,255,0.8)",
|
||
},
|
||
},
|
||
grid: {
|
||
left: "4%",
|
||
right: "4%",
|
||
bottom: "3%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
boundaryGap: false,
|
||
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
|
||
axisLabel: {
|
||
show: true,
|
||
interval: 0,
|
||
textStyle: {
|
||
fontSize: fontSizeRem(12),
|
||
fontFamily: "AlibabaPuHuiTi",
|
||
fontWeight: 400,
|
||
color: "rgba(255,255,255,0.8)",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
name: "单位:万吨",
|
||
nameTextStyle: {
|
||
color: "#fff",
|
||
fontSize: fontSizeRem(14),
|
||
padding: 10,
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
fontSize: fontSizeRem(14),
|
||
fontFamily: "AlibabaPuHuiTi",
|
||
fontWeight: 400,
|
||
color: "rgba(255,255,255,0.8)",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "2022",
|
||
type: "line",
|
||
stack: "Total",
|
||
smooth: true,
|
||
lineStyle: {
|
||
width: fontSizeRem(2),
|
||
color: "#FDCC00",
|
||
},
|
||
showSymbol: false,
|
||
itemStyle: {
|
||
color: "#FDCC00",
|
||
},
|
||
areaStyle: {
|
||
opacity: 0.4,
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgb(7, 51, 99)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgb(7, 67, 103)",
|
||
},
|
||
]),
|
||
},
|
||
emphasis: {
|
||
focus: "series",
|
||
},
|
||
data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
|
||
},
|
||
{
|
||
name: "2023",
|
||
type: "line",
|
||
// stack: "Total",
|
||
smooth: true,
|
||
lineStyle: {
|
||
width: 2,
|
||
color: "#1B7EF2",
|
||
},
|
||
showSymbol: false,
|
||
label: {
|
||
show: true,
|
||
position: "top",
|
||
},
|
||
itemStyle: {
|
||
color: "#1B7EF2",
|
||
},
|
||
areaStyle: {
|
||
opacity: 0.4,
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgb(7, 51, 96)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgb(9, 58, 117)",
|
||
},
|
||
]),
|
||
},
|
||
emphasis: {
|
||
focus: "series",
|
||
},
|
||
data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
|
||
},
|
||
],
|
||
},
|
||
};
|
||
},
|
||
methods: {
|
||
listClass(index) {
|
||
if (index == 0) {
|
||
return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
|
||
} else if (index == 1) {
|
||
return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
|
||
} else if (index == 2) {
|
||
return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
|
||
}
|
||
},
|
||
defineEcharts(dom, option) {
|
||
var chartDom = document.getElementById(dom);
|
||
var myChart = this.$echarts.init(chartDom);
|
||
myChart.setOption(option);
|
||
},
|
||
//用户行业占比
|
||
initYhhyzb() {
|
||
let color = ["#0098FA", "#0CD9B5", "#3B72AD", "#FDCC00", "#F27629"];
|
||
let echartData = [
|
||
{
|
||
name: "钢筋",
|
||
value: "10",
|
||
},
|
||
{
|
||
name: "水泥",
|
||
value: "20",
|
||
},
|
||
{
|
||
name: "化工",
|
||
value: "30",
|
||
},
|
||
{
|
||
name: "制造",
|
||
value: "20",
|
||
},
|
||
{
|
||
name: "其他",
|
||
value: "20",
|
||
},
|
||
];
|
||
let formatNumber = function (num) {
|
||
let reg = /(?=(\B)(\d{3})+$)/g;
|
||
return num.toString().replace(reg, ",");
|
||
};
|
||
let total = echartData.reduce((a, b) => {
|
||
return a + b.value * 1;
|
||
}, 0);
|
||
let option = {
|
||
color: color,
|
||
// tooltip: {
|
||
// trigger: "item",
|
||
// },
|
||
title: [
|
||
{
|
||
text: "{name|" + "总量" + "}\n{val|" + formatNumber(total) + "}",
|
||
top: "center",
|
||
left: 140,
|
||
textStyle: {
|
||
rich: {
|
||
name: {
|
||
fontSize: 14,
|
||
fontWeight: "normal",
|
||
color: "#fff",
|
||
padding: [10, 0],
|
||
},
|
||
val: {
|
||
fontSize: 32,
|
||
fontWeight: "bold",
|
||
color: "#fff",
|
||
},
|
||
},
|
||
},
|
||
},
|
||
],
|
||
legend: {
|
||
orient: "vertical",
|
||
icon: "circle",
|
||
x: "70%",
|
||
y: "center",
|
||
itemWidth: 12,
|
||
itemHeight: 12,
|
||
align: "left",
|
||
textStyle: {
|
||
color: "#fff",
|
||
rich: {
|
||
name: {
|
||
fontSize: 12,
|
||
},
|
||
value: {
|
||
fontSize: 16,
|
||
padding: [0, 5, 0, 15],
|
||
},
|
||
unit: {
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
},
|
||
formatter: function (name) {
|
||
let res = echartData.filter((v) => v.name === name);
|
||
res = res[0] || {};
|
||
let unit = res.unit || "";
|
||
return (
|
||
"{name|" +
|
||
name +
|
||
"} {value|" +
|
||
res.value +
|
||
"%" +
|
||
"}{unit|" +
|
||
unit +
|
||
"}"
|
||
);
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
type: "pie",
|
||
roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
|
||
animation: false, // 禁止动画效果
|
||
radius: ["45%", "60%"],
|
||
center: ["40%", "50%"],
|
||
data: echartData,
|
||
|
||
itemStyle: {
|
||
normal: {
|
||
borderWidth: 0,
|
||
},
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
label: {
|
||
show: false,
|
||
},
|
||
},
|
||
],
|
||
};
|
||
this.defineEcharts("yhhyzb", option);
|
||
},
|
||
//用能分类占比
|
||
initYnflzb() {
|
||
let getParametricEquation = function (
|
||
startRatio,
|
||
endRatio,
|
||
isSelected,
|
||
isHovered,
|
||
k,
|
||
height
|
||
) {
|
||
// 计算
|
||
let midRatio = (startRatio + endRatio) / 2;
|
||
|
||
let startRadian = startRatio * Math.PI * 2;
|
||
let endRadian = endRatio * Math.PI * 2;
|
||
let midRadian = midRatio * Math.PI * 2;
|
||
|
||
// 如果只有一个扇形，则不实现选中效果。
|
||
if (startRatio === 0 && endRatio === 1) {
|
||
isSelected = false;
|
||
}
|
||
|
||
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
|
||
k = typeof k !== "undefined" ? k : 1 / 3;
|
||
|
||
// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
|
||
let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
|
||
let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
|
||
|
||
// 计算高亮效果的放大比例（未高亮，则比例为 1）
|
||
let hoverRate = isHovered ? 1.05 : 1;
|
||
|
||
// 返回曲面参数方程
|
||
return {
|
||
u: {
|
||
min: -Math.PI,
|
||
max: Math.PI * 3,
|
||
step: Math.PI / 32,
|
||
},
|
||
|
||
v: {
|
||
min: 0,
|
||
max: Math.PI * 2,
|
||
step: Math.PI / 20,
|
||
},
|
||
|
||
x: function (u, v) {
|
||
if (u < startRadian) {
|
||
return (
|
||
offsetX +
|
||
Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
|
||
);
|
||
}
|
||
if (u > endRadian) {
|
||
return (
|
||
offsetX +
|
||
Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
|
||
);
|
||
}
|
||
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
|
||
},
|
||
|
||
y: function (u, v) {
|
||
if (u < startRadian) {
|
||
return (
|
||
offsetY +
|
||
Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
|
||
);
|
||
}
|
||
if (u > endRadian) {
|
||
return (
|
||
offsetY +
|
||
Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
|
||
);
|
||
}
|
||
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
|
||
},
|
||
|
||
z: function (u, v) {
|
||
if (u < -Math.PI * 0.5) {
|
||
return Math.sin(u);
|
||
}
|
||
if (u > Math.PI * 2.5) {
|
||
return Math.sin(u);
|
||
}
|
||
return Math.sin(v) > 0 ? 1 * height : -1;
|
||
},
|
||
};
|
||
};
|
||
// 生成模拟 3D 饼图的配置项
|
||
let getPie3D = function (pieData, internalDiameterRatio) {
|
||
let series = [];
|
||
let sumValue = 0;
|
||
let startValue = 0;
|
||
let endValue = 0;
|
||
let legendData = [];
|
||
let k =
|
||
typeof internalDiameterRatio !== "undefined"
|
||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||
: 1 / 3;
|
||
|
||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||
for (let i = 0; i < pieData.length; i++) {
|
||
sumValue += pieData[i].value;
|
||
|
||
let seriesItem = {
|
||
name:
|
||
typeof pieData[i].name === "undefined"
|
||
? `series${i}`
|
||
: pieData[i].name,
|
||
type: "surface",
|
||
parametric: true,
|
||
wireframe: {
|
||
show: false,
|
||
},
|
||
pieData: pieData[i],
|
||
pieStatus: {
|
||
selected: false,
|
||
hovered: false,
|
||
k: k,
|
||
},
|
||
};
|
||
|
||
if (typeof pieData[i].itemStyle != "undefined") {
|
||
let itemStyle = {};
|
||
|
||
typeof pieData[i].itemStyle.color != "undefined"
|
||
? (itemStyle.color = pieData[i].itemStyle.color)
|
||
: null;
|
||
typeof pieData[i].itemStyle.opacity != "undefined"
|
||
? (itemStyle.opacity = pieData[i].itemStyle.opacity)
|
||
: null;
|
||
|
||
seriesItem.itemStyle = itemStyle;
|
||
}
|
||
series.push(seriesItem);
|
||
}
|
||
|
||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||
for (let i = 0; i < series.length; i++) {
|
||
endValue = startValue + series[i].pieData.value;
|
||
console.log(series[i]);
|
||
series[i].pieData.startRatio = startValue / sumValue;
|
||
series[i].pieData.endRatio = endValue / sumValue;
|
||
series[i].parametricEquation = getParametricEquation(
|
||
series[i].pieData.startRatio,
|
||
series[i].pieData.endRatio,
|
||
false,
|
||
false,
|
||
k,
|
||
series[i].pieData.value
|
||
);
|
||
|
||
startValue = endValue;
|
||
|
||
legendData.push(series[i].name);
|
||
}
|
||
return series;
|
||
};
|
||
// 传入数据生成 option
|
||
const optionsData = [
|
||
{
|
||
name: "楼宇",
|
||
value: 4256,
|
||
itemStyle: {
|
||
// opacity: 0.5,
|
||
color: "#2A71FF",
|
||
},
|
||
},
|
||
|
||
{
|
||
name: "工业",
|
||
value: 2356,
|
||
itemStyle: {
|
||
// opacity: 0.5,
|
||
color: "#00EDFE",
|
||
},
|
||
},
|
||
{
|
||
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: 14,
|
||
lineHeight: 20,
|
||
textStyle: {
|
||
fontSize: 14,
|
||
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: {
|
||
show: false,
|
||
},
|
||
orient: "vertical",
|
||
data: data,
|
||
top: "center",
|
||
itemGap: 14,
|
||
itemHeight: 8,
|
||
itemWidth: 17,
|
||
right: "2%",
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 12,
|
||
},
|
||
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: 14,
|
||
},
|
||
},
|
||
title: {
|
||
x: "center",
|
||
top: "20",
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 22,
|
||
},
|
||
},
|
||
// 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: "50%",
|
||
left: "-7%",
|
||
// environment: "rgba(255,255,255,0)",
|
||
viewControl: {
|
||
distance: 180,
|
||
alpha: 25,
|
||
beta: 60,
|
||
},
|
||
},
|
||
series: series,
|
||
};
|
||
this.defineEcharts("ynflzb", option);
|
||
},
|
||
},
|
||
mounted() {
|
||
this.defineEcharts("ssfhzs", this.option);
|
||
this.defineEcharts("ynl", this.option1);
|
||
this.initYhhyzb();
|
||
this.initYnflzb();
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped lang="less">
|
||
.box {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
color: #fff;
|
||
|
||
.title {
|
||
width: 100%;
|
||
height: .395833rem
|
||
/* 76/192 */
|
||
;
|
||
background: url(../assets/客户侧总体用能情况分析/标题背景.png);
|
||
background-position: center center;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 10px;
|
||
|
||
p {
|
||
width: 2.744792rem
|
||
/* 527/192 */
|
||
;
|
||
height: .244792rem
|
||
/* 47/192 */
|
||
;
|
||
font-size: .229167rem
|
||
/* 44/192 */
|
||
;
|
||
// font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
|
||
font-weight: 600;
|
||
line-height: .244792rem
|
||
/* 47/192 */
|
||
;
|
||
letter-spacing: .015625rem
|
||
/* 3/192 */
|
||
;
|
||
color: #fff;
|
||
margin-left: -.3125rem
|
||
/* 60/192 */
|
||
;
|
||
}
|
||
}
|
||
|
||
.containter {
|
||
width: 100%;
|
||
height: calc(100vh - .34375rem
|
||
/* 66/192 */
|
||
);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.left {
|
||
width: 2.270833rem
|
||
/* 436/192 */
|
||
;
|
||
height: 100%;
|
||
|
||
.jrtj {
|
||
height: 1.53125rem
|
||
/* 294/192 */
|
||
;
|
||
width: 100%;
|
||
background: url("../assets/客户侧总体用能情况分析/组 3117.png");
|
||
background-size: cover;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.title {
|
||
position: absolute;
|
||
left: .833333rem
|
||
/* 160/192 */
|
||
;
|
||
width: .75rem
|
||
/* 144/192 */
|
||
;
|
||
height: .1875rem
|
||
/* 36/192 */
|
||
;
|
||
font-size: .09375rem
|
||
/* 18/192 */
|
||
;
|
||
font-family: "Source Han Sans";
|
||
font-weight: 700;
|
||
color: rgba(255, 255, 255, 0.87);
|
||
line-height: 36px;
|
||
}
|
||
|
||
.center {
|
||
width: 1.130208rem
|
||
/* 217/192 */
|
||
;
|
||
height: .65625rem
|
||
/* 126/192 */
|
||
;
|
||
position: absolute;
|
||
left: .572917rem
|
||
/* 110/192 */
|
||
;
|
||
top: .572917rem
|
||
/* 110/192 */
|
||
;
|
||
text-align: center;
|
||
display: block;
|
||
|
||
p:nth-child(1) {
|
||
width: .421875rem
|
||
/* 81/192 */
|
||
;
|
||
height: .130208rem
|
||
/* 25/192 */
|
||
;
|
||
font-size: .125rem
|
||
/* 24/192 */
|
||
;
|
||
text-align: center;
|
||
font-weight: 500;
|
||
color: #29F1FA;
|
||
line-height: .114583rem
|
||
/* 22/192 */
|
||
;
|
||
}
|
||
|
||
p:nth-child(2) {
|
||
width: .369792rem
|
||
/* 71/192 */
|
||
;
|
||
height: .130208rem
|
||
/* 25/192 */
|
||
;
|
||
text-align: center;
|
||
font-size: .0625rem
|
||
/* 12/192 */
|
||
;
|
||
font-weight: 250;
|
||
color: #FFFFFF;
|
||
line-height: .114583rem
|
||
/* 22/192 */
|
||
;
|
||
}
|
||
|
||
img {
|
||
width: 1.130208rem
|
||
/* 217/192 */
|
||
;
|
||
height: .65625rem
|
||
/* 126/192 */
|
||
;
|
||
}
|
||
}
|
||
|
||
.insides {
|
||
margin-top: .291667rem
|
||
/* 56/192 */
|
||
;
|
||
width: 2.270833rem
|
||
/* 436/192 */
|
||
;
|
||
height: 1.53125rem
|
||
/* 294/192 */
|
||
;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
flex-wrap: wrap;
|
||
position: relative;
|
||
|
||
.con {
|
||
width: .8125rem
|
||
/* 156/192 */
|
||
;
|
||
display: flex;
|
||
|
||
img {
|
||
width: .260417rem
|
||
/* 50/192 */
|
||
;
|
||
height: .3125rem
|
||
/* 60/192 */
|
||
;
|
||
display: block;
|
||
}
|
||
|
||
p:nth-child(1) {
|
||
color: #fff;
|
||
}
|
||
|
||
p:nth-child(2) {
|
||
width: .291667rem
|
||
/* 56/192 */
|
||
;
|
||
height: .114583rem
|
||
/* 22/192 */
|
||
;
|
||
font-size: .072917rem
|
||
/* 14/192 */
|
||
;
|
||
// font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
|
||
font-weight: 300;
|
||
color: #7DD9DD;
|
||
line-height: .114583rem
|
||
/* 22/192 */
|
||
;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.ssfhzs {
|
||
width: 100%;
|
||
height: 315px;
|
||
background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
|
||
background-size: cover;
|
||
margin-top: 6px;
|
||
position: relative;
|
||
|
||
.title {
|
||
position: absolute;
|
||
left: 160px;
|
||
width: 144px;
|
||
height: 36px;
|
||
font-size: 18px;
|
||
font-family: "Source Han Sans";
|
||
font-weight: 700;
|
||
color: rgba(255, 255, 255, 0.87);
|
||
line-height: 36px;
|
||
}
|
||
|
||
.typeBox {
|
||
list-style: none;
|
||
display: flex;
|
||
position: absolute;
|
||
top: 54px;
|
||
right: 20px;
|
||
|
||
li {
|
||
width: 39px;
|
||
height: 21px;
|
||
background: rgba(29, 29, 29, 0.5);
|
||
border-radius: 2px 2px 2px 2px;
|
||
font-size: 14px;
|
||
border: 1px solid #666666;
|
||
text-align: center;
|
||
margin: 2.5px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.active {
|
||
background: rgba(10, 167, 255, 0.3);
|
||
border: 1px solid #0aa7ff;
|
||
}
|
||
}
|
||
|
||
#ssfhzs {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 200px;
|
||
bottom: 10px;
|
||
}
|
||
}
|
||
|
||
.ynl {
|
||
height: 325px;
|
||
background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
|
||
background-size: cover;
|
||
margin-top: 6px;
|
||
position: relative;
|
||
|
||
.title {
|
||
position: absolute;
|
||
left: 190px;
|
||
width: 144px;
|
||
height: 36px;
|
||
font-size: 18px;
|
||
font-family: "Source Han Sans";
|
||
font-weight: 700;
|
||
color: rgba(255, 255, 255, 0.87);
|
||
line-height: 36px;
|
||
}
|
||
|
||
.typeBox {
|
||
list-style: none;
|
||
display: flex;
|
||
position: absolute;
|
||
top: 54px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
|
||
li {
|
||
width: 39px;
|
||
height: 21px;
|
||
background: rgba(29, 29, 29, 0.5);
|
||
border-radius: 2px 2px 2px 2px;
|
||
font-size: 14px;
|
||
border: 1px solid #666666;
|
||
text-align: center;
|
||
margin: 2.5px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.active {
|
||
background: rgba(10, 167, 255, 0.3);
|
||
border: 1px solid #0aa7ff;
|
||
}
|
||
}
|
||
|
||
#ynl {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 200px;
|
||
bottom: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.right {
|
||
width: 436px;
|
||
height: 100%;
|
||
|
||
.yhhyzb {
|
||
height: 294px;
|
||
width: 100%;
|
||
background: url("../assets/客户侧总体用能情况分析/组 3117.png");
|
||
background-size: cover;
|
||
position: relative;
|
||
|
||
.title {
|
||
position: absolute;
|
||
left: 160px;
|
||
width: 144px;
|
||
height: 36px;
|
||
font-size: 18px;
|
||
font-family: "Source Han Sans";
|
||
font-weight: 700;
|
||
color: rgba(255, 255, 255, 0.87);
|
||
line-height: 36px;
|
||
}
|
||
|
||
#yhhyzb {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.ynflzb {
|
||
height: 294px;
|
||
width: 100%;
|
||
background: url("../assets/客户侧总体用能情况分析/组 3117.png");
|
||
background-size: cover;
|
||
position: relative;
|
||
margin-top: 6px;
|
||
|
||
.title {
|
||
position: absolute;
|
||
left: 160px;
|
||
width: 144px;
|
||
height: 36px;
|
||
font-size: 18px;
|
||
font-family: "Source Han Sans";
|
||
font-weight: 700;
|
||
color: rgba(255, 255, 255, 0.87);
|
||
line-height: 36px;
|
||
}
|
||
|
||
#ynflzb {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.pic {
|
||
width: 300px;
|
||
position: absolute;
|
||
height: 150px;
|
||
top: 100px;
|
||
left: 40px;
|
||
}
|
||
}
|
||
|
||
.qyydlpm {
|
||
height: 353px;
|
||
width: 100%;
|
||
background: url("../assets/客户侧总体用能情况分析/组 3119.png");
|
||
background-size: cover;
|
||
position: relative;
|
||
margin-top: 6px;
|
||
|
||
.title {
|
||
position: absolute;
|
||
left: 160px;
|
||
width: 144px;
|
||
height: 36px;
|
||
font-size: 18px;
|
||
font-family: "Source Han Sans";
|
||
font-weight: 700;
|
||
color: rgba(255, 255, 255, 0.87);
|
||
line-height: 36px;
|
||
}
|
||
|
||
.list {
|
||
list-style: none;
|
||
height: 300px;
|
||
width: 100%;
|
||
float: left;
|
||
margin-top: 50px;
|
||
|
||
li {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 30px 0 30px;
|
||
box-sizing: border-box;
|
||
margin: 9px;
|
||
|
||
p:nth-of-type(1) {
|
||
background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
|
||
width: 24px;
|
||
height: 16px;
|
||
line-height: 16px;
|
||
background: rgba(34, 23, 23, 0.1);
|
||
border-radius: 0px 0px 0px 0px;
|
||
opacity: 1;
|
||
text-align: center;
|
||
border: 1px solid #b1b1b1;
|
||
background-size: cover;
|
||
}
|
||
|
||
p:nth-of-type(2) {
|
||
width: 190px;
|
||
height: 12px;
|
||
font-size: 14px;
|
||
font-family: "AlibabaPuHuiTi";
|
||
font-weight: 400;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
line-height: 12px;
|
||
}
|
||
|
||
p:nth-of-type(3) {
|
||
width: 27px;
|
||
height: 12px;
|
||
font-size: 14px;
|
||
font-family: "AlibabaPuHuiTi";
|
||
font-weight: 500;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
line-height: 12px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
position: absolute;
|
||
width: 994px;
|
||
height: 325px;
|
||
background: url("../assets/客户侧总体用能情况分析/组 3120.png");
|
||
background-size: cover;
|
||
bottom: 10px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
|