<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>
<!-- <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="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="ynflzb">
<p class="title">主要能源消耗情况</p>
<div id="ynflzb"></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="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;
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%",
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(1),
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],
},
],
},
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: {
fontSize: fontSizeRem(16),
color: "#FFFFFF",
fontWeight: "bold",
},
},
},
},
{
text: '电力',
x: "center",
y: "50%",
borderColor: "#fff",
textStyle: {
fontWeight: "normal",
fontSize: fontSizeRem(12),
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),
color: "#FFFFFF",
fontWeight: "bold",
},
},
},
},
{
text: '钢铁',
x: "center",
y: "50%",
borderColor: "#fff",
textStyle: {
fontWeight: "normal",
fontSize: fontSizeRem(12),
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: {
fontSize: fontSizeRem(16),
color: "#FFFFFF",
fontWeight: "bold",
},
},
},
},
{
text: '水泥',
x: "center",
y: "50%",
borderColor: "#fff",
textStyle: {
fontWeight: "normal",
fontSize: fontSizeRem(12),
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),
color: "#FFFFFF",
fontWeight: "bold",
},
},
},
},
{
text: '治金',
x: "center",
y: "50%",
borderColor: "#fff",
textStyle: {
fontWeight: "normal",
fontSize: fontSizeRem(12),
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),
color: "#FFFFFF",
fontWeight: "bold",
},
},
},
},
{
text: '石化',
x: "center",
y: "50%",
borderColor: "#fff",
textStyle: {
fontWeight: "normal",
fontSize: fontSizeRem(12),
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),
color: "#FFFFFF",
fontWeight: "bold",
},
},
},
},
{
text: '化工',
x: "center",
y: "50%",
borderColor: "#fff",
textStyle: {
fontWeight: "normal",
fontSize: fontSizeRem(12),
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: "{name|" + "总量" + "}\n{val|" + formatNumber(total) + "}",
top: "center",
left: 110,
textStyle: {
rich: {
name: {
fontSize: fontSizeRem(14),
fontWeight: "normal",
color: "#fff",
padding: [10, 0],
},
val: {
fontSize: fontSizeRem(32),
fontWeight: "bold",
color: "#fff",
},
},
},
},
],
legend: {
orient: "vertical",
icon: "circle",
x: "70%",
y: "20%",
itemWidth: 12,
itemHeight: 12,
align: "left",
textStyle: {
color: "#",
rich: {
name: {
fontSize: fontSizeRem(12),
},
value: {
fontSize: fontSizeRem(16),
padding: [0, 5, 0, 15],
},
unit: {
fontSize: fontSizeRem(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("qyhyfb", option);
},
// dl() {
// const value = 845;
// const rate = Math.round(value * 100 / 100);
// let option = {
// title: [
// {
// text: "{a|" + rate + "}",
// show: true,
// x: "center",
// y: "32%",
// textStyle: {
// rich: {
// a: {
// fontSize: fontSizeRem(14),
// color: "#27E9BF",
// fontWeight: "bold",
// },
// },
// },
// },
// {
// text: '电力',
// x: "center",
// y: "50%",
// borderColor: "#fff",
// textStyle: {
// fontWeight: "normal",
// fontSize: fontSizeRem(12),
// 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: [value],
// 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",
// },
// ]),
// },
// },
// },
// ],
// }
// this.defineEcharts("dl", 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);
var data = [
{
name: "南京市",
value: 1,
},
{
name: "济南市",
value: 2,
},
{
name: "徐州市",
value: 3,
},
{
name: "常州市",
value: 4,
},
{
name: "苏州市",
value: 5,
},
{
name: "南通市",
value: 6,
},
{
name: "连云港市",
value: 7,
},
{
name: "淮安市",
value: 8,
},
{
name: "盐城市",
value: 9,
},
{
name: "扬州市",
value: 10,
},
{
name: "镇江市",
value: 11,
},
{
name: "泰州市",
value: 12,
},
{
name: "宿迁市",
value: 13,
},
];
var splitList = [
{
start: 1,
end: 1,
label: "济南市",
color: "#236da8",
},
{
start: 2,
end: 2,
label: "无锡市",
color: "#2884db",
},
{
start: 3,
end: 3,
label: "徐州市",
color: "#244779",
},
{
start: 4,
end: 4,
label: "常州市",
color: "#246198",
},
{
start: 5,
end: 5,
label: "苏州市",
color: "#2884db",
},
{
start: 6,
end: 6,
label: "南通市",
color: "#2884db",
},
{
start: 7,
end: 7,
label: "连云港市",
color: "#244779",
},
{
start: 8,
end: 8,
label: "淮安市",
color: "#244779",
},
{
start: 9,
end: 9,
label: "盐城市",
color: "#244779",
},
{
start: 10,
end: 10,
label: "扬州市",
color: "#246198",
},
{
start: 11,
end: 11,
label: "镇江市",
color: "#2884db",
},
{
start: 12,
end: 12,
label: "泰州市",
color: "#2884db",
},
{
start: 13,
end: 13,
label: "宿迁市",
color: "#244779",
},
];
var chartDom = document.getElementById("map");
var myChart = this.$echarts.init(chartDom, null, {
devicePixelRatio: 10, // 设置为2或更高的值
});
//获取山东地图数据。
$.get(
"https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
function (geojson) {
echarts.registerMap("山东", geojson);
let option = {
series: [
{
tooltip: {
trigger: "item",
},
name: "山东",
type: "map3D",
map: "山东",
boxDepth: 60, //地图倾斜度
regionHeight: 6, //地图厚度
label: {
show: true, //是否显示市
textStyle: {
color: "#fff", //文字颜色
fontSize: 12, //文字大小
fontFamily: "微软雅黑",
backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
},
},
itemStyle: {
opacity: 1, // 透明度
borderWidth: 1.5, //分界线宽度
borderColor: "#0699E4", //分界线颜色
},
groundplane: {
show: true,
},
data: data,
//shading: 'realistic',
// 真实感材质相关配置 shading: 'realistic'时有效
realisticMaterial: {
detailTexture: "#093099", // 纹理贴图
textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
metalness: 1, // 0材质是非金属 ，1金属
roughnessAdjust: 0,
},
viewControl: {
distance: 80, // 地图视角 控制初始大小
rotateSensitivity: 1, // 旋转
zoomSensitivity: 1, // 缩放
},
},
],
dataRange: {
show: false,
splitList: splitList,
},
animation: true,
};
myChart.setOption(option);
myChart.on("click", this.chartClick);
let chartClick = function (param) {
console.log(param);
myChart.setOption(option, false);
window.addEventListener("resize", function () {
myChart.resize();
});
var selectedPro = param.name;
if (!cityProper[selectedPro]) {
option.series.splice(1);
option.legend = null;
option.visualMap = null;
myChart.setOption(option, true);
return;
}
//获取点击区域数据
$.get(cityProper[selectedPro], function (geojson) {
echarts.registerMap(selectedPro, geojson);
//根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
option.series[0] = {
name: "",
type: "map",
map: selectedPro,
boxDepth: 80, //地图倾斜度
regionHeight: 5, //地图厚度
itemStyle: {
normal: {
label: {
show: true,
},
},
emphasis: {
label: {
show: true,
},
},
},
groundplane: {
show: false,
},
data: data,
shading: "realistic",
// 真实感材质相关配置 shading: 'realistic'时有效
realisticMaterial: {
detailTexture: "#fff", // 纹理贴图
textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
metalness: 0, // 0材质是非金属 ，1金属
roughnessAdjust: 0,
},
viewControl: {
distance: 100, // 地图视角 控制初始大小
rotateSensitivity: 1, // 旋转
zoomSensitivity: 1, // 缩放
},
};
myChart.setOption(option);
});
};
}
);
},
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: -60px;
}
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: 50px;
top: 36px;
// 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: 50px;
}
p:nth-child(2) {
width: 71px;
height: 25px;
text-align: center;
font-size: 12;
font-weight: 250;
color: #FFFFFF;
line-height: 22px;
}
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: 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%;
.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: 52px;
margin-left: 20px;
margin-top: 60px;
box-shadow: inset 16px 10px 39px 12px #6BFFFE;
border-radius: 4px 4px 4px 4px;
opacity: 1;
padding: 2px;
border: 1px solid #061A4D;
box-sizing: border-box;
.t_name {
width: 90px;
height: 36px;
font-size: 12px;
// font-family: Source Han Sans, Source Han Sans;
font-weight: 350;
color: #FFFFFF;
line-height: 36px;
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;
}
}
}
.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: 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;
}
}
}
</style>