2377 lines
62 KiB
Vue
2377 lines
62 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="centers">
|
||
<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>
|
||
<div id="ynl"></div>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="tyjg">
|
||
<p class="title">碳源结构</p>
|
||
<div id="tyjg">
|
||
<div class="t_content">
|
||
<div class="left">
|
||
<div
|
||
v-for="(item, index) in controls1"
|
||
:key="index"
|
||
class="t_con"
|
||
>
|
||
<p class="t_name">{{ item.name }}</p>
|
||
<p class="t_footer">
|
||
<span class="t_count">{{ item.count }}</span>
|
||
<span class="t_img1" v-if="item.isShow == true">
|
||
{{ item.percent }}
|
||
<img src="../assets/tan/325数值上升.png" alt="" />
|
||
</span>
|
||
<span class="t_img2" v-else>
|
||
{{ item.percent }}%
|
||
<img src="../assets/tan/325数值上升 (2).png" alt="" />
|
||
</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="cen_img">
|
||
<img src="../assets/tan/组 3141.png" alt="" />
|
||
</div>
|
||
<div class="right">
|
||
<div
|
||
v-for="(item, index) in controls2"
|
||
:key="index"
|
||
class="t_con"
|
||
>
|
||
<p class="t_name">{{ item.name }}</p>
|
||
<p class="t_footer">
|
||
<span class="t_count">{{ item.count }}</span>
|
||
<span class="t_img1" v-if="item.isShow == true">
|
||
{{ item.percent }}
|
||
<img src="../assets/tan/325数值上升.png" alt="" />
|
||
</span>
|
||
<span class="t_img2" v-else>
|
||
{{ item.percent }}%
|
||
<img src="../assets/tan/325数值上升 (2).png" alt="" />
|
||
</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="nyxhqk">
|
||
<p class="title">主要能源消耗情况</p>
|
||
<div id="nyxhqk"></div>
|
||
</div>
|
||
<div class="qyydlpm">
|
||
<p class="title">
|
||
企业碳排放量排名 <span class="danwei">单位（万吨）</span>
|
||
</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 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>
|
||
<div id="qyhyfb"></div>
|
||
</div>
|
||
<div class="hytpfzl">
|
||
<p class="title">行业碳排放总量</p>
|
||
<div id="hytpfzl">
|
||
<div id="dl"></div>
|
||
<div id="gt"></div>
|
||
<div id="sn"></div>
|
||
<div id="zj"></div>
|
||
<div id="sh"></div>
|
||
<div id="hg"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
// import * as echarts from "echarts";
|
||
const fontSizeRem = (size) => {
|
||
const clientWidth =
|
||
window.innerWidth ||
|
||
document.documentElement.clientWidth ||
|
||
document.body.clientWidth;
|
||
if (!clientWidth) return;
|
||
console.log(clientWidth);
|
||
let fontSize = clientWidth / 1920; //尺寸大小
|
||
return size * fontSize;
|
||
};
|
||
import * as echarts from "echarts";
|
||
// import { fontSizeRem } from "../assets/function";
|
||
export default {
|
||
data() {
|
||
return {
|
||
res: "日",
|
||
type: "总量",
|
||
tjlist: [
|
||
{
|
||
name: "工业生产",
|
||
count: "10",
|
||
},
|
||
{
|
||
name: "商业楼宇",
|
||
count: "22",
|
||
},
|
||
{
|
||
name: "公共建设",
|
||
count: "18",
|
||
},
|
||
{
|
||
name: "其他",
|
||
count: "50",
|
||
},
|
||
],
|
||
controls2: [
|
||
{
|
||
name: "汽油（万升）",
|
||
count: "2566",
|
||
isShow: true,
|
||
percent: "10",
|
||
},
|
||
{
|
||
name: "柴油（万升）",
|
||
count: "6566",
|
||
isShow: true,
|
||
percent: "10",
|
||
},
|
||
{
|
||
name: "煤（吨）",
|
||
count: "4566",
|
||
isShow: true,
|
||
percent: "10",
|
||
},
|
||
],
|
||
controls1: [
|
||
{
|
||
name: "电（万度）",
|
||
count: "4566",
|
||
isShow: true,
|
||
percent: "10",
|
||
},
|
||
|
||
{
|
||
name: "水（万吨）",
|
||
count: "5566",
|
||
isShow: false,
|
||
percent: "10",
|
||
},
|
||
|
||
{
|
||
name: "燃气（立方）",
|
||
count: "7566",
|
||
isShow: true,
|
||
percent: "10",
|
||
},
|
||
],
|
||
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%",
|
||
top: "20%",
|
||
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: {
|
||
// .0625rem /* 12/192 */
|
||
// fontSize: fontSizeRem(12),
|
||
fontSize: "0.0625rem",
|
||
fontFamily: "AlibabaPuHuiTi",
|
||
fontWeight: 400,
|
||
color: "rgba(255,255,255,0.8)",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
name: "单位:万吨标煤",
|
||
nameTextStyle: {
|
||
color: "#fff",
|
||
// .072917rem /* 14/192 */
|
||
// fontSize: fontSizeRem(14),
|
||
fontSize: "0.072rem",
|
||
// .052083rem /* 10/192 */
|
||
padding: 10,
|
||
// padding: "0.052rem",
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
// fontSize: fontSizeRem(14),
|
||
fontSize: "0.072rem",
|
||
fontFamily: "AlibabaPuHuiTi",
|
||
fontWeight: 400,
|
||
color: "rgba(255,255,255,0.8)",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "",
|
||
type: "line",
|
||
stack: "Total",
|
||
smooth: true,
|
||
// .010417rem /* 2/192 */
|
||
lineStyle: {
|
||
width: 2,
|
||
// width: "0.010rem",
|
||
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",
|
||
top: 40,
|
||
data: [
|
||
{ icon: "", name: "2022" },
|
||
{ icon: "", name: "2023" },
|
||
],
|
||
textStyle: {
|
||
// fontSize: fontSizeRem(14),
|
||
fontSize: "0.072rem",
|
||
fontFamily: "AlibabaPuHuiTi",
|
||
fontWeight: 400,
|
||
color: "rgba(255,255,255,0.8)",
|
||
},
|
||
},
|
||
grid: {
|
||
left: "4%",
|
||
right: "4%",
|
||
bottom: "3%",
|
||
top: "30%",
|
||
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: {
|
||
// .0625rem /* 12/192 */
|
||
// fontSize: fontSizeRem(12),
|
||
fontSize: "0.0625rem",
|
||
fontFamily: "AlibabaPuHuiTi",
|
||
fontWeight: 400,
|
||
color: "rgba(255,255,255,0.8)",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
name: "单位:万吨",
|
||
nameTextStyle: {
|
||
color: "#fff",
|
||
// fontSize: fontSizeRem(14),
|
||
fontSize: "0.072rem",
|
||
// .052083rem /* 10/192 */
|
||
padding: 10,
|
||
// padding: "0.052083rem",
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
// fontSize: fontSizeRem(14),
|
||
fontSize: "0.072rem",
|
||
fontFamily: "AlibabaPuHuiTi",
|
||
fontWeight: 400,
|
||
color: "rgba(255,255,255,0.8)",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "2022",
|
||
type: "line",
|
||
stack: "Total",
|
||
smooth: true,
|
||
lineStyle: {
|
||
// width: fontSizeRem(2),
|
||
width: "0.01rem",
|
||
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,
|
||
// width: "0.01rem",
|
||
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,
|
||
],
|
||
},
|
||
],
|
||
},
|
||
circles1: {
|
||
// backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
|
||
title: [
|
||
// {
|
||
// text: "单位：%",
|
||
// top: 0,
|
||
// left: 0,
|
||
// textStyle: {
|
||
// fontWeight: "normal",
|
||
// fontSize: 16,
|
||
// color: "#fff",
|
||
// },
|
||
// },
|
||
{
|
||
text: "{a|" + Math.round((845 * 100) / 100) + "}",
|
||
show: true,
|
||
x: "center",
|
||
y: "36%",
|
||
textStyle: {
|
||
rich: {
|
||
a: {
|
||
// .083333rem /* 16/192 */
|
||
// fontSize: fontSizeRem(16),
|
||
fontSize: "0.0833rem",
|
||
color: "#FFFFFF",
|
||
fontWeight: "bold",
|
||
},
|
||
},
|
||
},
|
||
},
|
||
{
|
||
text: "电力",
|
||
x: "center",
|
||
y: "50%",
|
||
borderColor: "#fff",
|
||
textStyle: {
|
||
fontWeight: "normal",
|
||
// fontSize: fontSizeRem(12),
|
||
fontSize: "0.0625rem",
|
||
color: "#fff",
|
||
},
|
||
},
|
||
],
|
||
polar: {
|
||
center: ["50%", "40%"],
|
||
radius: ["60%", "75%"],
|
||
},
|
||
angleAxis: {
|
||
max: 1000,
|
||
show: false,
|
||
},
|
||
radiusAxis: {
|
||
type: "category",
|
||
show: true,
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
data: [845],
|
||
name: "",
|
||
type: "bar",
|
||
roundCap: true,
|
||
showBackground: true,
|
||
backgroundStyle: {
|
||
color: "rgba(19, 84, 146, .4)",
|
||
},
|
||
coordinateSystem: "polar",
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||
{
|
||
offset: 0,
|
||
color: "#005DCF",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#00CCFF",
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
circles2: {
|
||
// backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
|
||
title: [
|
||
// {
|
||
// text: "单位：%",
|
||
// top: 0,
|
||
// left: 0,
|
||
// textStyle: {
|
||
// fontWeight: "normal",
|
||
// fontSize: 16,
|
||
// color: "#fff",
|
||
// },
|
||
// },
|
||
{
|
||
text: "{a|" + Math.round((845 * 100) / 100) + "}",
|
||
show: true,
|
||
x: "center",
|
||
y: "36%",
|
||
textStyle: {
|
||
rich: {
|
||
a: {
|
||
// fontSize: fontSizeRem(16),
|
||
fontSize: "0.0833rem",
|
||
color: "#FFFFFF",
|
||
fontWeight: "bold",
|
||
},
|
||
},
|
||
},
|
||
},
|
||
{
|
||
text: "钢铁",
|
||
x: "center",
|
||
y: "50%",
|
||
borderColor: "#fff",
|
||
textStyle: {
|
||
fontWeight: "normal",
|
||
// fontSize: fontSizeRem(12),
|
||
fontSize: "0.0625rem",
|
||
color: "#fff",
|
||
},
|
||
},
|
||
],
|
||
polar: {
|
||
center: ["50%", "40%"],
|
||
radius: ["60%", "75%"],
|
||
},
|
||
angleAxis: {
|
||
max: 1000,
|
||
show: false,
|
||
},
|
||
radiusAxis: {
|
||
type: "category",
|
||
show: true,
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
data: [845],
|
||
name: "",
|
||
type: "bar",
|
||
roundCap: true,
|
||
showBackground: true,
|
||
backgroundStyle: {
|
||
color: "rgba(19, 84, 146, .4)",
|
||
},
|
||
coordinateSystem: "polar",
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||
{
|
||
offset: 0,
|
||
color: "#005DCF",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#00CCFF",
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
circles3: {
|
||
// backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
|
||
title: [
|
||
// {
|
||
// text: "单位：%",
|
||
// top: 0,
|
||
// left: 0,
|
||
// textStyle: {
|
||
// fontWeight: "normal",
|
||
// fontSize: 16,
|
||
// color: "#fff",
|
||
// },
|
||
// },
|
||
{
|
||
text: "{a|" + Math.round((845 * 100) / 100) + "}",
|
||
show: true,
|
||
x: "center",
|
||
y: "36%",
|
||
textStyle: {
|
||
rich: {
|
||
a: {
|
||
// .083333rem /* 16/192 */
|
||
// fontSize: fontSizeRem(16),
|
||
fontSize: "0.0833rem",
|
||
color: "#FFFFFF",
|
||
fontWeight: "bold",
|
||
},
|
||
},
|
||
},
|
||
},
|
||
{
|
||
text: "水泥",
|
||
x: "center",
|
||
y: "50%",
|
||
borderColor: "#fff",
|
||
textStyle: {
|
||
fontWeight: "normal",
|
||
// .0625rem /* 12/192 */
|
||
// fontSize: fontSizeRem(12),
|
||
fontSize:"0.0625rem",
|
||
color: "#fff",
|
||
},
|
||
},
|
||
],
|
||
polar: {
|
||
center: ["50%", "40%"],
|
||
radius: ["60%", "75%"],
|
||
},
|
||
angleAxis: {
|
||
max: 1000,
|
||
show: false,
|
||
},
|
||
radiusAxis: {
|
||
type: "category",
|
||
show: true,
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
data: [845],
|
||
name: "",
|
||
type: "bar",
|
||
roundCap: true,
|
||
showBackground: true,
|
||
backgroundStyle: {
|
||
color: "rgba(19, 84, 146, .4)",
|
||
},
|
||
coordinateSystem: "polar",
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||
{
|
||
offset: 0,
|
||
color: "#005DCF",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#00CCFF",
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
circles4: {
|
||
// backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
|
||
title: [
|
||
// {
|
||
// text: "单位：%",
|
||
// top: 0,
|
||
// left: 0,
|
||
// textStyle: {
|
||
// fontWeight: "normal",
|
||
// fontSize: 16,
|
||
// color: "#fff",
|
||
// },
|
||
// },
|
||
{
|
||
text: "{a|" + Math.round((845 * 100) / 100) + "}",
|
||
show: true,
|
||
x: "center",
|
||
y: "35%",
|
||
textStyle: {
|
||
rich: {
|
||
a: {
|
||
// fontSize: fontSizeRem(16),
|
||
fontSize: "0.0833rem",
|
||
color: "#FFFFFF",
|
||
fontWeight: "bold",
|
||
},
|
||
},
|
||
},
|
||
},
|
||
{
|
||
text: "治金",
|
||
x: "center",
|
||
y: "50%",
|
||
borderColor: "#fff",
|
||
textStyle: {
|
||
fontWeight: "normal",
|
||
// fontSize: fontSizeRem(12),
|
||
fontSize: "0.0625rem",
|
||
color: "#fff",
|
||
},
|
||
},
|
||
],
|
||
polar: {
|
||
center: ["50%", "40%"],
|
||
radius: ["60%", "75%"],
|
||
},
|
||
angleAxis: {
|
||
max: 1000,
|
||
show: false,
|
||
},
|
||
radiusAxis: {
|
||
type: "category",
|
||
show: true,
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
data: [845],
|
||
name: "",
|
||
type: "bar",
|
||
roundCap: true,
|
||
showBackground: true,
|
||
backgroundStyle: {
|
||
color: "rgba(19, 84, 146, .4)",
|
||
},
|
||
coordinateSystem: "polar",
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||
{
|
||
offset: 0,
|
||
color: "#005DCF",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#00CCFF",
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
circles5: {
|
||
// backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
|
||
title: [
|
||
// {
|
||
// text: "单位：%",
|
||
// top: 0,
|
||
// left: 0,
|
||
// textStyle: {
|
||
// fontWeight: "normal",
|
||
// fontSize: 16,
|
||
// color: "#fff",
|
||
// },
|
||
// },
|
||
{
|
||
text: "{a|" + Math.round((845 * 100) / 100) + "}",
|
||
show: true,
|
||
x: "center",
|
||
y: "36%",
|
||
textStyle: {
|
||
rich: {
|
||
a: {
|
||
// fontSize: fontSizeRem(16),
|
||
fontSize: "0.0833rem",
|
||
color: "#FFFFFF",
|
||
fontWeight: "bold",
|
||
},
|
||
},
|
||
},
|
||
},
|
||
{
|
||
text: "石化",
|
||
x: "center",
|
||
y: "50%",
|
||
borderColor: "#fff",
|
||
textStyle: {
|
||
fontWeight: "normal",
|
||
// fontSize: fontSizeRem(12),
|
||
fontSize: "0.0625rem",
|
||
color: "#fff",
|
||
},
|
||
},
|
||
],
|
||
polar: {
|
||
center: ["50%", "40%"],
|
||
radius: ["60%", "75%"],
|
||
},
|
||
angleAxis: {
|
||
max: 1000,
|
||
show: false,
|
||
},
|
||
radiusAxis: {
|
||
type: "category",
|
||
show: true,
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
data: [845],
|
||
name: "",
|
||
type: "bar",
|
||
roundCap: true,
|
||
showBackground: true,
|
||
backgroundStyle: {
|
||
color: "rgba(19, 84, 146, .4)",
|
||
},
|
||
coordinateSystem: "polar",
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||
{
|
||
offset: 0,
|
||
color: "#005DCF",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#00CCFF",
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
circles6: {
|
||
// backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
|
||
title: [
|
||
// {
|
||
// text: "单位：%",
|
||
// top: 0,
|
||
// left: 0,
|
||
// textStyle: {
|
||
// fontWeight: "normal",
|
||
// fontSize: 16,
|
||
// color: "#fff",
|
||
// },
|
||
// },
|
||
{
|
||
text: "{a|" + Math.round((845 * 100) / 100) + "}",
|
||
show: true,
|
||
x: "center",
|
||
y: "36%",
|
||
textStyle: {
|
||
rich: {
|
||
a: {
|
||
// fontSize: fontSizeRem(16),
|
||
fontSize: "0.0833rem",
|
||
color: "#FFFFFF",
|
||
fontWeight: "bold",
|
||
},
|
||
},
|
||
},
|
||
},
|
||
{
|
||
text: "化工",
|
||
x: "center",
|
||
y: "50%",
|
||
borderColor: "#fff",
|
||
textStyle: {
|
||
fontWeight: "normal",
|
||
// fontSize: fontSizeRem(12),
|
||
fontSize: "0.0625rem",
|
||
color: "#fff",
|
||
},
|
||
},
|
||
],
|
||
polar: {
|
||
center: ["50%", "40%"],
|
||
radius: ["60%", "75%"],
|
||
},
|
||
angleAxis: {
|
||
max: 1000,
|
||
show: false,
|
||
},
|
||
radiusAxis: {
|
||
type: "category",
|
||
show: true,
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
data: [845],
|
||
name: "",
|
||
type: "bar",
|
||
roundCap: true,
|
||
showBackground: true,
|
||
backgroundStyle: {
|
||
color: "rgba(19, 84, 146, .4)",
|
||
},
|
||
coordinateSystem: "polar",
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||
{
|
||
offset: 0,
|
||
color: "#005DCF",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#00CCFF",
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
};
|
||
},
|
||
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, null, {
|
||
devicePixelRatio: 10, // 设置为2或更高的值
|
||
});
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
},
|
||
//用户行业占比
|
||
initYhhyzb() {
|
||
let color = [
|
||
"#2B4C86",
|
||
"#86ACCE ",
|
||
"#9CA5B4",
|
||
"#23BAA6",
|
||
"#459EA2",
|
||
"#2B7DE4",
|
||
"#7C7062",
|
||
"#6B7BC0",
|
||
"#294A83",
|
||
];
|
||
let echartData = [
|
||
{
|
||
name: "发电行业",
|
||
value: "20",
|
||
},
|
||
{
|
||
name: "石化行业",
|
||
value: "20",
|
||
},
|
||
{
|
||
name: "化工行业",
|
||
value: "30",
|
||
},
|
||
{
|
||
name: "建材行业",
|
||
value: "20",
|
||
},
|
||
{
|
||
name: "钢铁行业",
|
||
value: "20",
|
||
},
|
||
{
|
||
name: "有色行业",
|
||
value: "20",
|
||
},
|
||
{
|
||
name: "造纸行业",
|
||
value: "20",
|
||
},
|
||
{
|
||
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:
|
||
"{val|" +
|
||
echartData[0].value +
|
||
"%" +
|
||
"}\n{name|" +
|
||
echartData[0].name +
|
||
"}",
|
||
top: "center",
|
||
left: "34%",
|
||
textStyle: {
|
||
rich: {
|
||
name: {
|
||
// fontSize: fontSizeRem(12),
|
||
fontSize: "0.0625rem",
|
||
fontWeight: "normal",
|
||
color: "#fff",
|
||
align: "center",
|
||
padding: [10, 0],
|
||
},
|
||
val: {
|
||
// fontSize: fontSizeRem(24),
|
||
fontSize: "0.125rem",
|
||
fontWeight: "bold",
|
||
align: "center",
|
||
color: "#fff",
|
||
},
|
||
},
|
||
},
|
||
},
|
||
],
|
||
legend: {
|
||
orient: "vertical",
|
||
icon: "circle",
|
||
x: "70%",
|
||
y: "20%",
|
||
itemWidth: 12,
|
||
itemHeight: 12,
|
||
align: "left",
|
||
textStyle: {
|
||
color: "#",
|
||
rich: {
|
||
name: {
|
||
// fontSize: fontSizeRem(12),
|
||
fontSize: "0.0625rem",
|
||
},
|
||
value: {
|
||
// fontSize: fontSizeRem(16),
|
||
fontSize: "0.0833rem",
|
||
padding: [0, 5, 0, 15],
|
||
},
|
||
unit: {
|
||
// fontSize: fontSizeRem(12),
|
||
fontSize: "0.0625rem",
|
||
},
|
||
},
|
||
},
|
||
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("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: {
|
||
// .0625rem /* 12/192 */
|
||
// fontSize: 12, // 选中地图文字字号和字体颜色
|
||
fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
|
||
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, //文字大小
|
||
fontSize:"0.0833rem", //文字大小
|
||
fontFamily: "微软雅黑",
|
||
// backgroundColor: {
|
||
// image: "../assets/客户侧总体用能情况分析/光标.png",
|
||
// },
|
||
// padding: [15, 20],
|
||
},
|
||
rich: {
|
||
fline: {
|
||
padding: [0, 35],
|
||
color: "#FDCC00",
|
||
// fontSize: 14,
|
||
fontSize: "0.0729rem",
|
||
fontWeight: 600,
|
||
},
|
||
tline: {
|
||
padding: [0, 27],
|
||
color: "#fff",
|
||
// fontSize: 12,
|
||
fontSize: "0.0625rem",
|
||
},
|
||
},
|
||
},
|
||
itemStyle: {
|
||
opacity: 0.8, // 透明度
|
||
borderWidth: 2, //分界线宽度
|
||
borderColor: "#0699E4", //分界线颜色
|
||
areaColor: {
|
||
x: 0.5,
|
||
y: 0.7,
|
||
r: 0.5,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(20,110,230,0.4)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(6,33,121,0.4)",
|
||
},
|
||
],
|
||
global: false, // 缺省为 false
|
||
},
|
||
},
|
||
groundplane: {
|
||
show: true,
|
||
},
|
||
data: data,
|
||
z: 999,
|
||
shading: "realistic",
|
||
// 真实感材质相关配置 shading: 'realistic'时有效
|
||
realisticMaterial: {
|
||
detailTexture: "rgb(0, 102, 204)", // 纹理贴图
|
||
textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
|
||
roughness: 0.8, // 调整光照模型的粗糙度
|
||
metalness: 0.0, // 调整金属感，0.0 为非金属
|
||
roughnessAdjust: 0,
|
||
},
|
||
viewControl: {
|
||
distance: 90, // 地图视角 控制初始大小
|
||
rotateSensitivity: 0, // 旋转
|
||
zoomSensitivity: 1.5, // 缩放
|
||
},
|
||
zoom: 1.25,
|
||
},
|
||
],
|
||
animation: true,
|
||
};
|
||
|
||
myChart.setOption(option);
|
||
myChart.on("click", chartClick);
|
||
//点击地图区域事件
|
||
function chartClick(param) {
|
||
console.log(param);
|
||
myChart.setOption(option, false);
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
// var selectedPro = param.name;
|
||
// if (!cityProper[selectedPro]) {
|
||
// option.series.splice(1);
|
||
// option.legend = null;
|
||
// option.visualMap = null;
|
||
// myChart.setOption(option, true);
|
||
// return;
|
||
// }
|
||
//获取点击区域数据
|
||
// $.get(cityProper[selectedPro], function (geojson) {
|
||
// echarts.registerMap(selectedPro, geojson);
|
||
// //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
|
||
// option.series[0] = {
|
||
// name: "",
|
||
// type: "map",
|
||
// map: selectedPro,
|
||
// boxDepth: 80, //地图倾斜度
|
||
// regionHeight: 5, //地图厚度
|
||
// itemStyle: {
|
||
// normal: {
|
||
// label: {
|
||
// show: true,
|
||
// },
|
||
// },
|
||
// emphasis: {
|
||
// label: {
|
||
// show: true,
|
||
// },
|
||
// },
|
||
// },
|
||
// groundplane: {
|
||
// show: false,
|
||
// },
|
||
// data: data,
|
||
// shading: "realistic",
|
||
// // 真实感材质相关配置 shading: 'realistic'时有效
|
||
// realisticMaterial: {
|
||
// detailTexture: "#fff", // 纹理贴图
|
||
// textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
|
||
// roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
|
||
// metalness: 0, // 0材质是非金属 ，1金属
|
||
// roughnessAdjust: 0,
|
||
// },
|
||
// viewControl: {
|
||
// distance: 30, // 地图视角 控制初始大小
|
||
// rotateSensitivity: 1, // 旋转
|
||
// zoomSensitivity: 1, // 缩放
|
||
// },
|
||
// };
|
||
// myChart.setOption(option);
|
||
// });
|
||
}
|
||
}
|
||
);
|
||
},
|
||
nyxhqk() {
|
||
var attaData1 = [62, 52, 34, 61, 75, 140];
|
||
var attaData2 = [162, 152, 134, 161, 115, 150];
|
||
let option = {
|
||
// backgroundColor: "#000",
|
||
tooltip: {
|
||
trigger: "axis",
|
||
},
|
||
grid: {
|
||
top: 60,
|
||
left: 60,
|
||
bottom: 20,
|
||
right: 40,
|
||
},
|
||
legend: {
|
||
left: "center",
|
||
top: 40,
|
||
data: [
|
||
{
|
||
name: "2020",
|
||
icon: "rect",
|
||
},
|
||
{
|
||
name: "2021",
|
||
icon: "rect",
|
||
},
|
||
],
|
||
textStyle: {
|
||
// fontSize: 14,
|
||
fontSize: "0.0729rem",
|
||
fontWeight: 400,
|
||
color: "rgba(255,255,255,0.8)",
|
||
},
|
||
},
|
||
xAxis: {
|
||
show: false,
|
||
type: "value",
|
||
name: "",
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "rgba(255, 255, 255, 0.5)",
|
||
type: "dashed",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: "rgba(255, 255, 255, 0.5)",
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "rgba(255, 255, 255, 0.5)",
|
||
type: "dashed",
|
||
},
|
||
},
|
||
},
|
||
yAxis: {
|
||
data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "rgba(255, 255, 255, 0.5)",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: "rgba(255, 255, 255, 0.5)",
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: "2020",
|
||
type: "bar",
|
||
barWidth: 8,
|
||
zlevel: 2,
|
||
itemStyle: {
|
||
borderRadius: 4,
|
||
color: "#12FFFA",
|
||
},
|
||
data: attaData1,
|
||
showBackground: true, //柱状背景
|
||
backgroundStyle: {
|
||
//背景颜色，加透明度
|
||
color: "#0E296D",
|
||
},
|
||
},
|
||
{
|
||
name: "2021",
|
||
type: "bar",
|
||
barWidth: 8,
|
||
zlevel: 2,
|
||
itemStyle: {
|
||
color: "#FF8B4D",
|
||
borderRadius: 4,
|
||
},
|
||
data: attaData2,
|
||
showBackground: true, //柱状背景
|
||
backgroundStyle: {
|
||
//背景颜色，加透明度
|
||
color: "#0E296D",
|
||
},
|
||
},
|
||
],
|
||
};
|
||
this.defineEcharts("nyxhqk", option);
|
||
},
|
||
},
|
||
mounted() {
|
||
this.initYhhyzb();
|
||
this.defineEcharts("ssfhzs", this.option);
|
||
this.defineEcharts("ynl", this.option1);
|
||
// this.dl();
|
||
this.defineEcharts("dl", this.circles1);
|
||
this.defineEcharts("gt", this.circles2);
|
||
this.defineEcharts("sn", this.circles3);
|
||
this.defineEcharts("zj", this.circles4);
|
||
this.defineEcharts("sh", this.circles5);
|
||
this.defineEcharts("hg", this.circles6);
|
||
this.nyxhqk();
|
||
this.initMap();
|
||
},
|
||
beforeDestroy() {
|
||
//离开页面后，删除屏幕监听，防止监听事件一直存在
|
||
window.removeEventListener("resize", this.getResize);
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped lang="less">
|
||
.box {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
color: #fff;
|
||
|
||
.title {
|
||
width: 100%;
|
||
height: 76px;
|
||
background: url(../assets/客户侧总体用能情况分析/标题背景.png);
|
||
background-position: center center;
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 10px;
|
||
|
||
p {
|
||
width: 527px;
|
||
height: 47px;
|
||
font-size: 44px;
|
||
font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
|
||
font-weight: 600;
|
||
line-height: 47px;
|
||
letter-spacing: 3px;
|
||
color: #fff;
|
||
margin-left: 164px;
|
||
}
|
||
|
||
img:nth-of-type(1) {
|
||
width: 231px;
|
||
height: 59px;
|
||
}
|
||
|
||
img:nth-of-type(2) {
|
||
width: 158px;
|
||
height: 28px;
|
||
}
|
||
}
|
||
|
||
.containter {
|
||
width: 100%;
|
||
height: 967px;
|
||
display: flex;
|
||
position: relative;
|
||
justify-content: space-between;
|
||
|
||
.left {
|
||
width: 436px;
|
||
height: 100%;
|
||
|
||
.jrtj {
|
||
height: 294px;
|
||
width: 100%;
|
||
background: url("../assets/客户侧总体用能情况分析/组 3117.png");
|
||
background-size: cover;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.title {
|
||
position: absolute;
|
||
left: 160px;
|
||
width: 144px;
|
||
height: 36px;
|
||
font-size: 18;
|
||
font-weight: 700;
|
||
color: rgba(255, 255, 255, 0.87);
|
||
line-height: 36px;
|
||
}
|
||
|
||
.centers {
|
||
width: 217px;
|
||
height: 126px;
|
||
position: absolute;
|
||
// left: 70px;
|
||
// top: 50px;
|
||
left: 0.45rem;
|
||
top: 0.45rem;
|
||
// text-align: center;
|
||
display: block;
|
||
|
||
p:nth-child(1) {
|
||
width: 81px;
|
||
height: 25px;
|
||
font-size: 24;
|
||
text-align: center;
|
||
font-weight: 500;
|
||
color: #29f1fa;
|
||
line-height: 22px;
|
||
position: absolute;
|
||
left: 72px;
|
||
// top: 50px;
|
||
top: 0.13rem;
|
||
}
|
||
|
||
p:nth-child(2) {
|
||
// width: 71px;
|
||
height: 25px;
|
||
text-align: center;
|
||
font-size: 12;
|
||
font-weight: 250;
|
||
color: #ffffff;
|
||
line-height: 22px;
|
||
position: absolute;
|
||
left: 72px;
|
||
top: 0.25rem;
|
||
// top: 80px;
|
||
}
|
||
|
||
img {
|
||
width: 217px;
|
||
height: 126px;
|
||
}
|
||
}
|
||
|
||
.insides {
|
||
margin-top: 56px;
|
||
width: 436px;
|
||
height: 294px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
flex-wrap: wrap;
|
||
position: relative;
|
||
|
||
.con {
|
||
width: 156px;
|
||
display: flex;
|
||
|
||
img {
|
||
width: 50px;
|
||
height: 60px;
|
||
display: block;
|
||
}
|
||
|
||
p:nth-child(1) {
|
||
color: #fff;
|
||
}
|
||
|
||
p:nth-child(2) {
|
||
width: 56px;
|
||
height: 22px;
|
||
font-size: 14;
|
||
// font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
|
||
font-weight: 300;
|
||
color: #7dd9dd;
|
||
line-height: 22px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.ssfhzs {
|
||
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;
|
||
// 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;
|
||
}
|
||
}
|
||
|
||
#ssfhzs {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 210px;
|
||
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: 300px;
|
||
bottom: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.right {
|
||
width: 436px;
|
||
height: 100%;
|
||
|
||
.tyjg {
|
||
height: 294px;
|
||
width: 100%;
|
||
background: url("../assets/tan/组\ 3142.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;
|
||
}
|
||
|
||
#tyjg {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.t_content {
|
||
width: 100%;
|
||
height: 300px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
// flex-wrap: wrap;
|
||
// align-content: space-between;
|
||
}
|
||
|
||
.cen_img {
|
||
width: 159px;
|
||
height: 159px;
|
||
border: none;
|
||
display: block;
|
||
margin: 0 auto;
|
||
margin-top: 90px;
|
||
|
||
img {
|
||
width: 159px;
|
||
height: 159px;
|
||
border: none;
|
||
display: block;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
|
||
.t_con {
|
||
width: 106px;
|
||
height: 60px;
|
||
margin-left: 20px;
|
||
margin-top: 60px;
|
||
border-radius: 4px 4px 4px 4px;
|
||
opacity: 1;
|
||
padding: 2px;
|
||
border: 1px solid #6bfffe;
|
||
text-align: center;
|
||
box-sizing: border-box;
|
||
|
||
.t_name {
|
||
width: 90px;
|
||
height: 30px;
|
||
font-size: 12px;
|
||
// font-family: Source Han Sans, Source Han Sans;
|
||
font-weight: 350;
|
||
color: #ffffff;
|
||
line-height: 30px;
|
||
display: block;
|
||
}
|
||
|
||
.t.footer {
|
||
display: flex;
|
||
|
||
.t_count {
|
||
width: 42px;
|
||
height: 36px;
|
||
font-size: 18px;
|
||
// font-family: Source Han Sans, Source Han Sans;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
line-height: 36px;
|
||
display: block;
|
||
}
|
||
|
||
.t_img1 {
|
||
width: 25px;
|
||
height: 36px;
|
||
font-size: 12px;
|
||
font-family: Source Han Sans, Source Han Sans;
|
||
font-weight: 350;
|
||
color: #0cd9b5;
|
||
line-height: 36px;
|
||
display: block;
|
||
}
|
||
|
||
.t_img2 {
|
||
padding: 0;
|
||
width: 25px;
|
||
height: 36px;
|
||
font-size: 12px;
|
||
font-family: Source Han Sans, Source Han Sans;
|
||
font-weight: 350;
|
||
line-height: 36px;
|
||
color: #f71f1f;
|
||
display: block;
|
||
|
||
img {
|
||
width: 12px;
|
||
height: 12px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.t_con:nth-child(n + 2) {
|
||
margin-top: 20px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.nyxhqk {
|
||
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;
|
||
}
|
||
|
||
#nyxhqk {
|
||
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: 136px;
|
||
width: 246px;
|
||
height: 36px;
|
||
font-size: 18px;
|
||
font-family: "Source Han Sans";
|
||
font-weight: 700;
|
||
color: rgba(255, 255, 255, 0.87);
|
||
line-height: 36px;
|
||
display: flex;
|
||
// justify-content: flex-start;
|
||
|
||
.danwei {
|
||
// position: absolute;
|
||
// right: 50px;
|
||
width: 75px;
|
||
height: 14px;
|
||
font-size: 12px;
|
||
// font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
line-height: 14px;
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.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%);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.qyhyfb {
|
||
width: 492px;
|
||
height: 100%;
|
||
background: url(../assets/tan/组\ 3126.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;
|
||
}
|
||
|
||
#qyhyfb {
|
||
width: 100%;
|
||
height: 300px;
|
||
}
|
||
}
|
||
|
||
.hytpfzl {
|
||
width: 492px;
|
||
height: 100%;
|
||
background: url(../assets/tan/组\ 3126.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;
|
||
}
|
||
|
||
#hytpfzl {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding-top: 50px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-around;
|
||
align-content: center;
|
||
// align-items: center;
|
||
|
||
#dl,
|
||
#gt,
|
||
#sn,
|
||
#zj,
|
||
#sh,
|
||
#hg {
|
||
width: 132px;
|
||
height: 132px;
|
||
// background-color: red;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#map {
|
||
width: 994px;
|
||
position: absolute;
|
||
height: 627px;
|
||
left: 50%;
|
||
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>
|