<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="ztynqk">
<p class="title">总体用能情况</p>
<ul class="typeBox">
<li :class="res == '日' ? 'active' : ''" @click="res = '日'">日</li>
<li :class="res == '月' ? 'active' : ''" @click="res = '月'">月</li>
<li :class="res == '年' ? 'active' : ''" @click="res = '年'">年</li>
</ul>
<div class="bottom">
<div class="bottomBox">
<img src="../assets/客户侧总体用能情况分析/图标.png" alt="" />
<div>
<p>用电量(MWH)</p>
<p><span>84.00</span><span>-13.20%</span></p>
</div>
</div>
<div class="bottomBox">
<img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" />
<div>
<p>用蒸汽量(m2)</p>
<p><span>45.32</span><span>-23.20%</span></p>
</div>
</div>
<div class="bottomBox">
<img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" />
<div>
<p>用水量(m2)</p>
<p><span>56.00</span><span>-33.20%</span></p>
</div>
</div>
<div class="bottomBox">
<img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" />
<div>
<p>用汽量(m2)</p>
<p><span>37.00</span><span>43.20%</span></p>
</div>
</div>
</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>
</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 id="map"></div>
<div class="footer">
<div class="yhzyfbqk">
<!-- <p class="title">用户资源分布情况</p> -->
<div id="yhzyfbqk"></div>
</div>
</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">
352<span style="color: #d9e363">户</span>
</p>
</div>
<div class="two">
<span>用户总电量:</span>
<p style="color: #44bfd6">
5525<span style="color: #44bfd6">万千瓦时</span>
</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import * as echarts from "echarts";
import { fontSizeRem } from "../assets/function";
export default {
data() {
return {
res: "日",
type: "电",
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: fontSizeRem(14),
fontFamily: "AlibabaPuHuiTi",
fontWeight: 400,
color: "rgba(255,255,255,0.8)",
},
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: [
{
type: "category",
boundaryGap: false,
data: ["00:00", "04:00", "08:00", "12:00", "14:00"],
axisLabel: {
show: true,
textStyle: {
fontSize: fontSizeRem(14),
fontFamily: "AlibabaPuHuiTi",
fontWeight: 400,
color: "rgba(255,255,255,0.8)",
},
},
},
],
yAxis: [
{
type: "value",
name: "单位:KW",
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: "昨日",
type: "line",
// stack: "Total",
smooth: true,
lineStyle: {
width: 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],
},
{
name: "今日",
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],
},
],
},
option1: {
legend: {
left: "right",
data: [{ icon: "roundRect", name: "用电量" }],
textStyle: {
fontSize: fontSizeRem(14),
fontFamily: "AlibabaPuHuiTi",
fontWeight: 400,
color: "rgba(255,255,255,0.8)",
},
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: [
{
type: "category",
boundaryGap: true,
data: ["00:00", "04:00", "08:00", "12:00", "14:00"],
axisLabel: {
show: true,
textStyle: {
fontSize: fontSizeRem(14),
fontFamily: "AlibabaPuHuiTi",
fontWeight: 400,
color: "rgba(255,255,255,0.8)",
},
},
},
],
yAxis: [
{
type: "value",
name: "单位:MWH",
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: "用电量",
type: "bar",
stack: "myBar",
showSymbol: false,
itemStyle: {
color: "#29F1FA",
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#033BFF",
},
{
offset: 1,
color: "#01B1FF",
},
// {
// offset: 1,
// color: "#01B1FF",
// },
],
false
),
},
},
data: [220, 402, 231, 134, 190, 230, 120],
},
],
},
};
},
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 = ["#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: 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: "center",
itemWidth: 12,
itemHeight: 12,
align: "left",
textStyle: {
color: "#fff",
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("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: fontSizeRem(14),
lineHeight: 20,
textStyle: {
fontSize: fontSizeRem(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: fontSizeRem(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: fontSizeRem(14),
},
},
title: {
x: "center",
top: "20",
textStyle: {
color: "#fff",
fontSize: fontSizeRem(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);
},
initMap() {
//后端返回的数据
var data = [
{
name: "济南市",
value: 1,
coord: [117.000923, 36.675807],
},
{
name: "青岛市",
value: 2,
coord: [120.382639, 36.067082],
},
{
name: "淄博市",
value: 3,
coord: [118.059134, 36.804685],
},
{
name: "枣庄市",
value: 4,
coord: [117.557964, 34.856424],
},
{
name: "东营市",
value: 5,
coord: [118.674767, 37.434751],
},
{
name: "烟台市",
value: 6,
coord: [121.447935, 37.463822],
},
{
name: "潍坊市",
value: 7,
coord: [119.161756, 36.706774],
},
{
name: "济宁市",
value: 8,
coord: [116.587245, 35.415393],
},
{
name: "泰安市",
value: 9,
coord: [117.089415, 36.188078],
},
{
name: "威海市",
value: 10,
coord: [122.120419, 37.513068],
},
{
name: "日照市",
value: 11,
coord: [119.526888, 35.416377],
},
{
name: "临沂市",
value: 12,
coord: [118.356448, 35.104672],
},
{
name: "德州市",
value: 13,
coord: [116.357465, 37.434093],
},
{
name: "聊城市",
value: 14,
coord: [115.986869, 36.455829],
},
{
name: "滨州市",
value: 15,
coord: [118.016974, 37.383542],
},
{
name: "菏泽市",
value: 16,
coord: [115.469381, 35.246531],
},
];
var chartDom = document.getElementById("map");
var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
window.addEventListener("resize", function () {
myChart.resize();
});
//获取山东地图数据。
$.get(
"https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
function (geojson) {
echarts.registerMap("山东", geojson);
let option = {
series: [
{
tooltip: {
trigger: "item",
// show: false,
},
name: "山东",
type: "map",
map: "山东",
boxDepth: 60, //地图倾斜度
regionHeight: 6, //地图厚度
aspectScale: 0.9, //地图长宽比
emphasis: {
itemStyle: {
areaColor: "#70EAF4", // 高亮时候地图显示的颜色
borderWidth: 2, // 高亮时的边框宽度
},
label: {
fontSize: 12, // 选中地图文字字号和字体颜色
color: "#fff",
},
},
label: {
show: true, //是否显示市
formatter: function (params) {
var name = params.name;
var value = params.value;
var text = ` {fline|${value}}\n{tline|${name}} `;
return text;
},
textStyle: {
color: "#000", //文字颜色
fontSize: 16, //文字大小
fontFamily: "微软雅黑",
// backgroundColor: {
// image: "../assets/客户侧总体用能情况分析/光标.png",
// },
// padding: [15, 20],
},
rich: {
fline: {
padding: [0, 35],
color: "#FDCC00",
fontSize: 14,
fontWeight: 600,
},
tline: {
padding: [0, 27],
color: "#fff",
fontSize: 12,
},
},
},
itemStyle: {
opacity: 0.8, // 透明度
borderWidth: 2, //分界线宽度
borderColor: "#0699E4", //分界线颜色
areaColor: {
x: 0.5,
y: 0.7,
r: 0.5,
colorStops: [
{
offset: 0,
color: "rgba(20,110,230,0.4)",
},
{
offset: 1,
color: "rgba(6,33,121,0.4)",
},
],
global: false, // 缺省为 false
},
},
groundplane: {
show: true,
},
data: data,
z: 999,
shading: "realistic",
// 真实感材质相关配置 shading: 'realistic'时有效
realisticMaterial: {
detailTexture: "rgb(0, 102, 204)", // 纹理贴图
textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
roughness: 0.8, // 调整光照模型的粗糙度
metalness: 0.0, // 调整金属感，0.0 为非金属
roughnessAdjust: 0,
},
viewControl: {
distance: 90, // 地图视角 控制初始大小
rotateSensitivity: 0, // 旋转
zoomSensitivity: 1.5, // 缩放
},
zoom: 1.25,
},
],
animation: true,
};
myChart.setOption(option);
myChart.on("click", chartClick);
//点击地图区域事件
function chartClick(param) {
console.log(param);
myChart.setOption(option, false);
window.addEventListener("resize", function () {
myChart.resize();
});
// var selectedPro = param.name;
// if (!cityProper[selectedPro]) {
// option.series.splice(1);
// option.legend = null;
// option.visualMap = null;
// myChart.setOption(option, true);
// return;
// }
//获取点击区域数据
// $.get(cityProper[selectedPro], function (geojson) {
// echarts.registerMap(selectedPro, geojson);
// //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
// option.series[0] = {
// name: "",
// type: "map",
// map: selectedPro,
// boxDepth: 80, //地图倾斜度
// regionHeight: 5, //地图厚度
// itemStyle: {
// normal: {
// label: {
// show: true,
// },
// },
// emphasis: {
// label: {
// show: true,
// },
// },
// },
// groundplane: {
// show: false,
// },
// data: data,
// shading: "realistic",
// // 真实感材质相关配置 shading: 'realistic'时有效
// realisticMaterial: {
// detailTexture: "#fff", // 纹理贴图
// textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
// roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
// metalness: 0, // 0材质是非金属 ，1金属
// roughnessAdjust: 0,
// },
// viewControl: {
// distance: 30, // 地图视角 控制初始大小
// rotateSensitivity: 1, // 旋转
// zoomSensitivity: 1, // 缩放
// },
// };
// myChart.setOption(option);
// });
}
}
);
},
//用户资源分布情况
initfbqk() {
// mock 数据
const dataArr = {
xdata: ['济南', '烟台', '威海', '青岛', '潍坊', '临沂', '济宁', '德州', '聊城', '泰安', '菏泽', '枣庄', '淄博', '莱芜', '东营', '日照', '滨州'],
disinfeced: [32, 34, 20, 14, 36, 27, 30, 28, 32, 27, 32, 33, 24, 26, 27, 28, 19, 30],
}
const grid = { top: '20%', left: '5%', right: '3%', bottom: '10%' }
// xAxis
const xAxis = {
axisTick: { show: true },
axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
axisLabel: { textStyle: { fontSize: 12, color: '#fff' }, },
data: dataArr.xdata
}
// yAxis
const yAxis = {
type: "value",
name: "单位:kWh",
splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
axisLine: { show: false, lineStyle: { color: "#fff" } },
axisLabel: { textStyle: { fontSize: 12, color: '#fff' } }
}
// series
const series = [
{
z: 2,
name: '底部',
type: 'pictorialBar',
data: [1, 1, 1, 1, 1, 1, 1, 1],
symbol: 'diamond',
symbolOffset: [0, '50%'],
symbolSize: [6, 4],
itemStyle: {
color: {
type: 'linear',
x: 0, x2: 1, y: 0, y2: 0,
colorStops: [{ offset: 0, color: 'rgba(27, 126, 242, 1)' }, { offset: 0.5, color: 'rgba(27, 126, 242, 1)' }, { offset: 0.5, color: 'rgba(27, 126, 242, .7)' }, { offset: 1, color: 'rgba(27, 126, 242, 1)' }]
}
},
}, {
z: 3,
name: '上部1',
type: 'pictorialBar',
symbolPosition: 'end',
data: dataArr.disinfeced,
symbol: 'diamond',
symbolOffset: [0, '-50%'],
symbolSize: [6, 4],
itemStyle: {
borderColor: '#28F1FA',
borderWidth: 2,
color: '#28F1FA'
},
}, {
z: 1,
stack: '总量',
type: 'bar',
name: '电费',
barWidth: 18,
// barGap: '-100%',
data: dataArr.disinfeced,
itemStyle: {
color: {
type: 'linear',
x: 0, x2: 1, y: 0, y2: 0,
colorStops: [{ offset: 0, color: 'rgba(27, 126, 242, .7)' }, { offset: 0.5, color: 'rgba(27, 126, 242, .5)' }, { offset: 0.5, color: 'rgba(27, 126, 242, .5)' }, { offset: 1, color: 'rgba(27, 126, 242, .7)' }]
}
},
}]
let option = { xAxis, yAxis, series, grid }
this.defineEcharts("yhzyfbqk", option);
},
},
mounted() {
this.defineEcharts("ssfhzs", this.option);
this.defineEcharts("ynl", this.option1);
this.initYhhyzb();
this.initYnflzb();
this.initMap();
this.initfbqk();
},
};
</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;
// height: 89.53vh;
display: flex;
position: relative;
justify-content: space-between;
.left {
width: 436px;
height: 100%;
.ztynqk {
height: 294px;
// height: 27.2vh;
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: 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;
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;
}
}
.bottom {
margin-top: 100px;
display: flex;
flex-wrap: wrap;
.bottomBox {
display: flex;
align-items: center;
width: 180px;
margin: 10px;
img {
width: 72px;
height: 72px;
}
div {
p:nth-of-type(1) {
width: 120px;
margin-bottom: 10px;
margin-top: 5px;
font-size: 14px;
font-family: " AlibabaPuHuiTi";
font-weight: 400;
}
span:nth-of-type(1) {
font-size: 20px;
font-family: "AlibabaPuHuiTi";
font-weight: 700;
}
span:nth-of-type(2) {
font-size: 14px;
font-family: "AlibabaPuHuiTi";
font-weight: 400;
margin-left: 6px;
}
}
}
}
}
.ssfhzs {
height: 315px;
// height: 29.1vh;
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;
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;
// height: 30vh;
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%);
.yhzyfbqk {
width: 100%;
height: 100%;
position: relative;
.title {
position: absolute;
}
#yhzyfbqk {
width: 100%;
height: 100%;
}
}
}
#map {
width: 994px;
position: absolute;
height: 627px;
background: url(../assets/客户侧总体用能情况分析/背景.png);
background-size: cover;
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>