1574 lines
56 KiB
Vue
1574 lines
56 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="ndqyyh">
|
||
<p class="title">年度签约用户</p>
|
||
<div class="bg_title">
|
||
<p class="tit_first">2451<span class="tit_danwei">户</span></p>
|
||
<div class="tit_second">
|
||
<div>
|
||
<p>同比</p>
|
||
<p class="tb_percent">12.23% <img src="../assets/zhsdy/325数值上升 (4).png" alt=""></p>
|
||
</div>
|
||
<div>
|
||
<p>环比</p>
|
||
<p class="tb_percent">27.16% <img src="../assets/zhsdy/325数值上升(1).png" alt=""> </p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="qyyh"></div>
|
||
</div>
|
||
<div class="ndsdl">
|
||
<p class="title">年度售电量</p>
|
||
<div class="bg_title">
|
||
<p class="tit_first">7,5624<span class="tit_danwei">MWH</span></p>
|
||
<div class="tit_second">
|
||
<div>
|
||
<p>同比</p>
|
||
<p class="tb_percent">12.23% <img src="../assets/zhsdy/325数值上升 (4).png" alt=""></p>
|
||
</div>
|
||
<div>
|
||
<p>环比</p>
|
||
<p class="tb_percent">27.16% <img src="../assets/zhsdy/325数值上升(1).png" alt=""> </p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="ndsdl"></div>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="yhhyzb">
|
||
<p class="title">年度售电金额</p>
|
||
<div id="yhhyzb">
|
||
<div class="infos" v-for="(item, index) in lists" :key="index">
|
||
<div class="first">
|
||
<p>
|
||
<img src="../assets/zhsdy/组 3189.png" alt="">
|
||
<span class="titles">{{ item.title }}</span>
|
||
</p>
|
||
<p class="money">{{ item.money }}<span class="danwei">万元</span></p>
|
||
</div>
|
||
<div class="second">
|
||
<div>
|
||
<div>
|
||
<p>同比</p>
|
||
<p class="tb_percent">12.23% <img src="../assets/zhsdy/325数值上升 (4).png" alt=""></p>
|
||
</div>
|
||
<div>
|
||
<p>环比</p>
|
||
<p class="tb_percent">27.16% <img src="../assets/zhsdy/325数值上升(1).png" alt=""> </p>
|
||
</div>
|
||
</div>
|
||
<div class="bigBox">
|
||
<div class="smallBox" :style="{ width: `${item.percent}px` }"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="ynflzb">
|
||
<p class="title">年度售电金额</p>
|
||
<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="ndqylfb">
|
||
<p class="title">年度签约量分布</p>
|
||
<div id="ndqylfb"></div>
|
||
</div>
|
||
<div class="ggzcxx">
|
||
<p class="title">公告政策信息</p>
|
||
<div id="ggzcxx">
|
||
<ul>
|
||
<li v-for="(item, index) in infos">
|
||
<img src="../assets/zhsdy/组 3147.png" alt="" class="img">
|
||
<span class="times">{{ item.time }}</span>
|
||
<span class="info">{{ item.info }}</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
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: "电",
|
||
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: 'shadow'
|
||
},
|
||
backgroundColor: 'rgba(9, 24, 48, 0.5)',
|
||
borderColor: 'rgba(75, 253, 238, 0.4)',
|
||
textStyle: {
|
||
color: '#CFE3FC',
|
||
},
|
||
borderWidth: 1,
|
||
},
|
||
grid: {
|
||
top: '15%',
|
||
right: '5%',
|
||
left: "8%",
|
||
bottom: '12%'
|
||
},
|
||
xAxis: [{
|
||
name: "",
|
||
type: 'category',
|
||
data: ["济南", "烟台", "威海", "德州", "滨州", "泰安", "临沂", "烟台", "青岛", "青岛", "青岛", "青岛", "青岛",],
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#FFFFFF'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
margin: 10,
|
||
color: '#e2e9ff',
|
||
textStyle: {
|
||
fontSize: 12
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
}
|
||
}],
|
||
yAxis: [{
|
||
name: "单位：MWh",
|
||
axisLabel: {
|
||
formatter: '{value}',
|
||
color: '#e2e9ff',
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#FFFFFF'
|
||
}
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255,255,255,0.12)'
|
||
}
|
||
}
|
||
}],
|
||
series: [{
|
||
type: 'bar',
|
||
data: [760, 520, 850, 400, 756, 200, 400, 700, 550, 440, 220, 160, 300, 400],
|
||
barWidth: '30%',
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: 'rgba(0,244,255,1)' // 0% 处的颜色
|
||
}, {
|
||
offset: 1,
|
||
color: 'rgba(0,77,167,1)' // 100% 处的颜色
|
||
}], false),
|
||
shadowColor: 'rgba(0,160,221,1)',
|
||
shadowBlur: 4,
|
||
}
|
||
},
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
lineHeight: 10,
|
||
formatter: '{c}',
|
||
position: 'top',
|
||
textStyle: {
|
||
color: '#00D6F9',
|
||
fontSize: 12
|
||
}
|
||
|
||
}
|
||
}
|
||
}]
|
||
},
|
||
infos: [
|
||
{
|
||
time: "2021-10-02 11:13:52",
|
||
info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
|
||
},
|
||
{
|
||
time: "2021-10-02 11:13:52",
|
||
info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
|
||
}, {
|
||
time: "2021-10-02 11:13:52",
|
||
info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
|
||
}, {
|
||
time: "2021-10-02 11:13:52",
|
||
info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
|
||
}, {
|
||
time: "2021-10-02 11:13:52",
|
||
info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
|
||
}, {
|
||
time: "2021-10-02 11:13:52",
|
||
info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
|
||
},
|
||
],
|
||
lists: [
|
||
{
|
||
title: "年度销售指标完成率",
|
||
money: "7,965",
|
||
tb: "12.23",
|
||
hb: "27.16",
|
||
percent: "80",
|
||
},
|
||
{
|
||
title: "年度收益金额",
|
||
money: "5,665",
|
||
tb: "12.23",
|
||
hb: "27.16",
|
||
percent: "40",
|
||
}
|
||
]
|
||
};
|
||
},
|
||
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();
|
||
});
|
||
},
|
||
qyyh() {
|
||
let option = {
|
||
// backgroundColor: '#081736',
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
lineStyle: {
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(0, 255, 233,0)'
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: 'rgba(255, 255, 255,1)'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(0, 255, 233,0)'
|
||
}
|
||
],
|
||
global: false
|
||
}
|
||
}
|
||
}
|
||
},
|
||
|
||
grid: {
|
||
top: '12%',
|
||
left: '10%',
|
||
right: '10%',
|
||
bottom: '25%'
|
||
// containLabel: true
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#009dff'
|
||
}
|
||
},
|
||
|
||
axisLabel: {
|
||
color: '#fff',
|
||
width: 100
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#00BFF3',
|
||
opacity: 0.23
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
boundaryGap: false,
|
||
data: [
|
||
"01",
|
||
"02",
|
||
"03",
|
||
"04",
|
||
"05",
|
||
"06",
|
||
"07",
|
||
"08",
|
||
"09",
|
||
"10",
|
||
"11",
|
||
"12",
|
||
] //this.$moment(data.times).format("HH-mm") ,
|
||
}
|
||
],
|
||
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
min: 0,
|
||
// max: 140,
|
||
splitNumber: 4,
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#00BFF3',
|
||
opacity: 0.23
|
||
}
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#009dff'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
margin: 20,
|
||
textStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
}
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '',
|
||
type: 'line',
|
||
smooth: true,
|
||
showAllSymbol: true,
|
||
// symbol: 'circle',
|
||
symbolSize: 2,
|
||
lineStyle: {
|
||
normal: {
|
||
color: '#2CABE3'
|
||
}
|
||
},
|
||
itemStyle: {
|
||
color: '#2CABE3',
|
||
borderColor: '#2CABE3',
|
||
borderWidth: 2
|
||
},
|
||
data: [
|
||
4, 7, 5, 4, 3, 5, 8, 7, 5, 4, 3, 5, 8, 4, 7, 5, 4, 3, 5, 8, 7, 5, 4, 3,
|
||
5, 8
|
||
] //data.values
|
||
},
|
||
{
|
||
name: '',
|
||
type: 'line',
|
||
smooth: true,
|
||
showAllSymbol: true,
|
||
// symbol: 'circle',
|
||
symbolSize: 2,
|
||
lineStyle: {
|
||
normal: {
|
||
color: '#7def86'
|
||
}
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#7def86',
|
||
borderColor: 'rgba(0, 255, 240, 1)',
|
||
lineStyle: {
|
||
color: 'rgba(0, 255, 240, 1)'
|
||
}
|
||
}
|
||
},
|
||
data: [
|
||
3, 5, 4, 2, 1, 7, 6, 5, 4, 2, 1, 7, 6, 3, 5, 4, 2, 1, 7, 6, 5, 4, 2, 1,
|
||
7, 6
|
||
] //data.values
|
||
}
|
||
]
|
||
};
|
||
this.defineEcharts("qyyh", option)
|
||
},
|
||
// 年度售电量
|
||
ndsdl() {
|
||
// 假数据
|
||
let left1 = {
|
||
code: 200,
|
||
msg: "人数趋势图获取成功",
|
||
data: {
|
||
count: [
|
||
153456,
|
||
143456,
|
||
163456,
|
||
183456,
|
||
163456,
|
||
153456,
|
||
163456,
|
||
133456,
|
||
163456,
|
||
143456,
|
||
103456,
|
||
113456,
|
||
153456,
|
||
133456,
|
||
143456
|
||
],
|
||
time: [
|
||
"01",
|
||
"02",
|
||
"03",
|
||
"04",
|
||
"05",
|
||
"06",
|
||
"07",
|
||
"08",
|
||
"09",
|
||
"10",
|
||
"11",
|
||
"12"
|
||
]
|
||
}
|
||
};
|
||
//计算最大值
|
||
function maxNumCount(num) {
|
||
let maxNum = "";
|
||
//将数字转化为数组
|
||
let max = num.toString().split("");
|
||
for (var i = 0; i < max.length; i++) {
|
||
if (i > 1) {
|
||
maxNum += "0";
|
||
}
|
||
}
|
||
//组装补0
|
||
if (maxNum.length > 1) {
|
||
if (max[1] == "9") {
|
||
maxNum = parseInt(max[0]) + 1 + "0" + maxNum;
|
||
} else {
|
||
maxNum = max[0] + (parseInt(max[1]) + 1) + maxNum;
|
||
}
|
||
} else {
|
||
maxNum = "100";
|
||
}
|
||
return maxNum;
|
||
}
|
||
//计算最小值
|
||
function minNumCount(num) {
|
||
if (num < 10000) {
|
||
return "0";
|
||
}
|
||
let minNum = "";
|
||
//将数字转化为数组
|
||
let min = num.toString().split("");
|
||
for (var i = 0; i < min.length; i++) {
|
||
//组装补0
|
||
if (i > 1) {
|
||
minNum += "0";
|
||
}
|
||
}
|
||
if (min[1] == "0") {
|
||
minNum = parseInt(min[0]) - 1 + "9" + minNum;
|
||
} else {
|
||
minNum = min[0] + parseInt(min[1]) + minNum;
|
||
}
|
||
|
||
return minNum;
|
||
}
|
||
|
||
let maxNum = Math.max(...left1.data.count);
|
||
let minNum = Math.min(...left1.data.count);
|
||
maxNum = maxNumCount(maxNum);
|
||
minNum = minNumCount(minNum);
|
||
let yName = "人数（万）";
|
||
if (maxNum > 9999999) {
|
||
yName = "人数（千万）";
|
||
}
|
||
var option;
|
||
|
||
option = {
|
||
grid: {
|
||
width: "84%",
|
||
height: "75%",
|
||
top: "20%", //生成的图片和顶部的间距
|
||
left: "5%",
|
||
bottom: "0%",
|
||
right: "16%",
|
||
containLabel: true //为ture才会生效
|
||
},
|
||
tooltip: {
|
||
trigger: "axis"
|
||
// axisPointer: {
|
||
// type: "shadow",
|
||
// },
|
||
},
|
||
xAxis: {
|
||
// name: "日期",
|
||
nameTextStyle: {
|
||
color: "#03CECF",
|
||
fontSize: 14
|
||
},
|
||
type: "category",
|
||
boundaryGap: false,
|
||
data: left1.data.time,
|
||
axisLabel: {
|
||
color: "#03CECF",
|
||
fontSize: 14,
|
||
margin: 10
|
||
// interval: 0, //使x轴上的文字显示完全,
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "rgb(37,52,82)"
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
name: yName,
|
||
nameTextStyle: {
|
||
color: "#03CECF",
|
||
fontSize: 14
|
||
},
|
||
min: minNum,
|
||
max: maxNum,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "rgb(37,52,82)"
|
||
},
|
||
show: true
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "rgba(37,52,82)"
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: "#03CECF",
|
||
fontSize: 14,
|
||
interval: 20,
|
||
formatter: function (value, index) {
|
||
if (yName.indexOf("千万") && maxNum > 10000000) {
|
||
value = (value / 10000000).toFixed(2);
|
||
} else if (maxNum > 10000 && maxNum < 10000000) {
|
||
value = value / 10000;
|
||
}
|
||
return value;
|
||
}
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
series: [
|
||
{
|
||
data: left1.data.count,
|
||
type: "line",
|
||
showSymbol: true,
|
||
itemStyle: {
|
||
emphasis: {
|
||
color: "rgb(7,162,148)",
|
||
borderColor: "rgba(7,162,148,0.6)",
|
||
borderWidth: 20
|
||
},
|
||
normal: {
|
||
color: "rgb(62,195,221)",
|
||
borderColor: "rgb(6,65,95)",
|
||
lineStyle: {
|
||
color: "rgb(101,184,196)"
|
||
}
|
||
}
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: "#68e3e5"
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(24, 68, 121,0)"
|
||
}
|
||
],
|
||
false
|
||
)
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
}
|
||
},
|
||
mounted() {
|
||
this.defineEcharts("ndqylfb", this.option);
|
||
// this.defineEcharts("ynl", this.option1);
|
||
this.qyyh();
|
||
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%;
|
||
|
||
.ndqyyh {
|
||
// height: 27.22vh;
|
||
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: 18px;
|
||
font-family: "Source Han Sans";
|
||
font-weight: 700;
|
||
color: rgba(255, 255, 255, 0.87);
|
||
line-height: 36px;
|
||
}
|
||
|
||
|
||
.bg_title {
|
||
width: 394px;
|
||
height: 62px;
|
||
background: url(../assets/zhsdy/组\ 3187.png);
|
||
background-size: cover;
|
||
position: absolute;
|
||
top: 40px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
|
||
.tit_first {
|
||
width: 116px;
|
||
height: 44px;
|
||
font-size: 32px;
|
||
font-weight: 700;
|
||
color: #14ADFD;
|
||
line-height: 44px;
|
||
display: flex;
|
||
|
||
.tit_danwei {
|
||
width: 14px;
|
||
height: 44px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
line-height: 44px;
|
||
}
|
||
}
|
||
|
||
.tit_second {
|
||
width: 132px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
div {
|
||
p:nth-child(1) {
|
||
width: 28px;
|
||
height: 24px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
line-height: 24px;
|
||
}
|
||
|
||
p.tb_percent {
|
||
width: 57px;
|
||
height: 30px;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: #F2B810;
|
||
line-height: 30px;
|
||
display: flex;
|
||
|
||
img {
|
||
width: 12px;
|
||
height: 12px;
|
||
margin-top: 4x;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#qyyh {
|
||
width: 100%;
|
||
height: 180px;
|
||
margin-top: 100px;
|
||
}
|
||
}
|
||
|
||
.ndsdl {
|
||
height: 315px;
|
||
background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
|
||
background-size: cover;
|
||
margin-top: 6px;
|
||
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;
|
||
}
|
||
|
||
.bg_title {
|
||
width: 394px;
|
||
height: 62px;
|
||
background: url(../assets/zhsdy/组\ 3187.png);
|
||
background-size: cover;
|
||
position: absolute;
|
||
top: 40px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
|
||
.tit_first {
|
||
width: 116px;
|
||
height: 44px;
|
||
font-size: 32px;
|
||
font-weight: 700;
|
||
color: #14ADFD;
|
||
line-height: 44px;
|
||
display: flex;
|
||
|
||
.tit_danwei {
|
||
width: 14px;
|
||
height: 44px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
line-height: 44px;
|
||
}
|
||
}
|
||
|
||
.tit_second {
|
||
width: 132px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
div {
|
||
p:nth-child(1) {
|
||
width: 28px;
|
||
height: 24px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
line-height: 24px;
|
||
}
|
||
|
||
p.tb_percent {
|
||
width: 57px;
|
||
height: 30px;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: #F2B810;
|
||
line-height: 30px;
|
||
display: flex;
|
||
|
||
img {
|
||
width: 12px;
|
||
height: 12px;
|
||
margin-top: 4x;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#ndsdl {
|
||
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%;
|
||
padding-top: 50px;
|
||
|
||
.infos {
|
||
width: 420px;
|
||
height: 104px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
background: url(../assets/zhsdy/组\ 3168.png);
|
||
background-size: cover;
|
||
|
||
.first {
|
||
width: 180px;
|
||
|
||
p:nth-child(1) {
|
||
width: 180px;
|
||
height: 44px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
img {
|
||
width: 15px;
|
||
height: 15px;
|
||
border: none;
|
||
display: block;
|
||
margin-top: 10px;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
span.titles {
|
||
width: 140px;
|
||
height: 44px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
line-height: 44px;
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
p.money {
|
||
width: 145px;
|
||
height: 44px;
|
||
font-size: 40px;
|
||
font-weight: 700;
|
||
color: #52C2FF;
|
||
line-height: 44px;
|
||
|
||
.danwei {
|
||
color: #fff;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.second {
|
||
width: 172px;
|
||
height: 100%;
|
||
display: flex;
|
||
div {
|
||
p:nth-child(1) {
|
||
width: 28px;
|
||
height: 24px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
line-height: 24px;
|
||
}
|
||
|
||
p.tb_percent {
|
||
width: 57px;
|
||
height: 30px;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: #F2B810;
|
||
line-height: 30px;
|
||
display: flex;
|
||
|
||
img {
|
||
width: 12px;
|
||
height: 12px;
|
||
margin-top: 4x;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bigBox {
|
||
width: 172px;
|
||
height: 10px;
|
||
background-color: #273546;
|
||
border-radius: 67px 67px 67px 67px;
|
||
|
||
.smallBox {
|
||
width: 100px;
|
||
height: 10px;
|
||
border-radius: 67px 67px 67px 67px;
|
||
background: linear-gradient(to right,
|
||
rgba(38, 206, 253, 1) 20%,
|
||
rgba(42, 254, 255, 1) 100%,
|
||
rgba(38, 206, 253, 1) 20%);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.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: 1445px;
|
||
height: 325px;
|
||
bottom: 10px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.ndqylfb {
|
||
width: 776px;
|
||
height: 100%;
|
||
background: url(../assets/zhsdy/用能量-框.png);
|
||
background-size: cover;
|
||
position: relative;
|
||
|
||
.title {
|
||
position: absolute;
|
||
left: 50%;
|
||
width: 144px;
|
||
height: 36px;
|
||
font-size: 18px;
|
||
font-family: "Source Han Sans";
|
||
font-weight: 700;
|
||
color: rgba(255, 255, 255, 0.87);
|
||
transform: translateX(-50%);
|
||
line-height: 36px;
|
||
}
|
||
|
||
#ndqylfb {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.ggzcxx {
|
||
width: 653px;
|
||
height: 325px;
|
||
background: url(../assets/zhsdy/组\ 3120.png);
|
||
background-size: cover;
|
||
position: relative;
|
||
|
||
.title {
|
||
position: absolute;
|
||
left: 50%;
|
||
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;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
#ggzcxx {
|
||
width: 100%;
|
||
margin-top: 60px;
|
||
|
||
ul {
|
||
width: 100%;
|
||
|
||
|
||
li {
|
||
width: 100%;
|
||
height: 40px;
|
||
padding: 0px 36px 0px 18px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.img {
|
||
width: 12px;
|
||
height: 12px;
|
||
display: block;
|
||
}
|
||
|
||
.times {
|
||
width: 145px;
|
||
height: 36px;
|
||
color: #52C2FF;
|
||
font-size: 14px;
|
||
line-height: 36px;
|
||
display: block;
|
||
}
|
||
|
||
.info {
|
||
width: 381px;
|
||
height: 36px;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
font-size: 14px;
|
||
line-height: 36px;
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
li:nth-child(2n+2) {
|
||
background: #0E2C7E;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#map {
|
||
width: 994px;
|
||
position: absolute;
|
||
height: 627px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
|