zhouyonghang
/
zhuzhansheji
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'master' of http://git.umayle.com:2023/zhouyonghang/zhuzhansheji

This commit is contained in:
unknown 2023-12-05 15:54:16 +08:00
parent 5928213ab3 e98eabafe2
commit dbd7475e3f
4 changed files with 190 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/客户侧总体用能情况分析/图标.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.3 KiB

BIN
src/assets/客户侧总体用能情况分析/用电量.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

115
src/views/KHC.vue
View File

@ -2,7 +2,9 @@
<div class="box">
<div class="title">
<img src="../assets/客户侧总体用能情况分析/logo.png" alt="" />
<div class="title_tit">
<p>客户侧总体用能情况分析</p>
</div>
<img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
</div>
<div class="containter">
@ -15,8 +17,8 @@
<li :class="res == '年' ? 'active' : ''" @click="res = '年'">年</li>
</ul>
<div class="bottom">
<div class="bottomBox">
<img src="../assets/客户侧总体用能情况分析/图标.png" alt="" />
<div class="bottomBox bottomBox1">
<img src="../assets/客户侧总体用能情况分析/用电量.png" alt="" />
<div>
<p>用电量(MWH)</p>
<p><span>84.00</span><span>-13.20%</span></p>
@ -63,13 +65,16 @@
<div class="ynl">
<p class="title">用能量</p>
<ul class="typeBox">
<li :class="type == '电' ? 'active' : ''" @click="type = '电'">
<li :class="type1 == '电' ? 'active' : ''" @click="type1 = '电'">
电
</li>
<li :class="type == '水' ? 'active' : ''" @click="type = '水'">
<li :class="type1 == '水' ? 'active' : ''" @click="type1 = '水'">
水
</li>
<li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
<li
:class="type1 == '蒸汽' ? 'active' : ''"
@click="type1 = '蒸汽'"
>
蒸汽
</li>
</ul>
@ -136,6 +141,7 @@ export default {
return {
res: "日",
type: "电",
type1: "电",
list: [
{
name: "济南综合新能源服务有线公司",
@ -412,7 +418,7 @@ export default {
} else if (index == 1) {
return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;backgroundColor:#4C4D6A;';
} else if (index == 2) {
return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;backgroundColor:#202450;';
return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;backgroundColor:#44324B;';
}
},
defineEcharts(dom, option) {
@ -921,18 +927,74 @@ export default {
window.addEventListener("resize", function () {
myChart.resize();
});
//获取山东地图数据。
//注入山东地图数据。
let src = require("../assets/shandong.json");
function registerMap() {
echarts.registerMap("山东", src);
//拿到json数据
var mapFeatures = echarts.getMap("山东").geoJson.features;
var geoCoordMap = {};
//拿到需要的字段
mapFeatures.forEach(function (v) {
// 地区名称
var name = v.properties.name;
// 地区经纬度
geoCoordMap[name] = v.properties.center;
});
//在基础数据中加入value字段 并加入到数组中
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
});
}
}
return res;
};
let option = {
// 动效散点图层，使用2D地图坐标系
geo: {
// 2D地图坐标系
show: false, // 不显示地图，用于为动效散点提供2D地图坐标系
map: "山东",
roam: false, // 禁用缩放、拖拽
layoutCenter: ["50%", "50%"], // 地图中心位置
layoutSize: "155%", // 控制地图尺寸（地图的宽度和高度都会改变）
aspectScale: 0.9, // 控制地图长宽比（此值越小地图越窄，越大地图越宽）
zlevel: 1,
},
series: [
//动态散点系列
{
type: "effectScatter",
coordinateSystem: "geo",
zlevel: 3,
rippleEffect: {
//涟漪特效
period: 3, //动画时间，值越小速度越快
brushType: "fill", //波纹绘制方式 stroke, fill
scale: 5, //波纹圆环最大限制，值越大波纹越大
},
symbol: "circle",
symbolSize: 7,
itemStyle: {
normal: {
show: true,
color: "#D8C74A",
},
},
data: [],
},
{
tooltip: {
trigger: "item",
// show: false,
},
name: "山东",
type: "map",
map: "山东",
@ -951,6 +1013,7 @@ export default {
},
label: {
show: true, //是否显示市
zlevel: 4,
formatter: function (params) {
var name = params.name;
var value = params.value;
@ -962,9 +1025,10 @@ export default {
fontSize: "0.08rem", //文字大小
fontFamily: "微软雅黑",
// backgroundColor: {
// image: "../assets/客户侧总体用能情况分析/光标.png",
// image: require("../assets/客户侧总体用能情况分析/光标.png"),
// },
// padding: [15, 20],
// backgroundSize: "10px 10px",
// backgroundPosition: "top left",
},
rich: {
fline: {
@ -1026,6 +1090,8 @@ export default {
animation: true,
};
option.series[0].data = convertData(data); // 设置动效散点数据
myChart.setOption(option);
myChart.on("click", chartClick);
//点击地图区域事件
@ -1243,25 +1309,36 @@ export default {
.title {
width: 100%;
height: 76px;
background: url(../assets/客户侧总体用能情况分析/标题背景.png);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
// margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
.title_tit {
width: 1600px;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
background: url(../assets/tan/分组\ 7.png);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
p {
width: 527px;
height: 47px;
font-size: 44px;
font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
font-weight: 600;
text-align: center;
line-height: 47px;
letter-spacing: 3px;
color: #fff;
margin-left: -60px;
margin-left: 490px;
// margin-left: -50px;
}
}
img:nth-of-type(1) {
@ -1338,7 +1415,11 @@ export default {
margin-top: 100px;
display: flex;
flex-wrap: wrap;
.bottomBox1 {
img {
width: 80px;
}
}
.bottomBox {
display: flex;
align-items: center;

111
src/views/TAN.vue
View File

@ -1390,13 +1390,70 @@ export default {
window.addEventListener("resize", function () {
myChart.resize();
});
//获取山东地图数据。
let src = require("../assets/shandong.json");
//注入山东地图数据。
let src = require("../assets/shandong.json");
function registerMap() {
echarts.registerMap("山东", src);
//拿到json数据
var mapFeatures = echarts.getMap("山东").geoJson.features;
var geoCoordMap = {};
//拿到需要的字段
mapFeatures.forEach(function (v) {
// 地区名称
var name = v.properties.name;
// 地区经纬度
geoCoordMap[name] = v.properties.center;
});
//在基础数据中加入value字段 并加入到数组中
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
});
}
}
return res;
};
let option = {
// 动效散点图层，使用2D地图坐标系
geo: {
// 2D地图坐标系
show: false, // 不显示地图，用于为动效散点提供2D地图坐标系
map: "山东",
roam: false, // 禁用缩放、拖拽
layoutCenter: ["50%", "50%"], // 地图中心位置
layoutSize: "155%", // 控制地图尺寸（地图的宽度和高度都会改变）
aspectScale: 0.9, // 控制地图长宽比（此值越小地图越窄，越大地图越宽）
zlevel: 1,
},
series: [
//动态散点系列
{
type: "effectScatter",
coordinateSystem: "geo",
zlevel: 3,
rippleEffect: {
//涟漪特效
period: 4, //动画时间，值越小速度越快
brushType: "fill", //波纹绘制方式 stroke, fill
scale: 10, //波纹圆环最大限制，值越大波纹越大
},
symbol: "circle",
symbolSize: 7,
itemStyle: {
normal: {
show: true,
color: "#D8C74A",
},
},
data: [],
},
{
tooltip: {
trigger: "item",
@ -1414,42 +1471,13 @@ export default {
borderWidth: 2, // 高亮时的边框宽度
},
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],
fontSize: "0.06rem", // 选中地图文字字号和字体颜色
color: "#fff",
// fontSize: 12,
fontSize: "0.0625rem",
},
},
},
},
label: {
show: true, //是否显示市
zlevel: 4,
formatter: function (params) {
var name = params.name;
var value = params.value;
@ -1458,27 +1486,25 @@ export default {
},
textStyle: {
color: "#000", //文字颜色
// fontSize: 16, //文字大小
fontSize: "0.0833rem", //文字大小
fontSize: "0.08rem", //文字大小
fontFamily: "微软雅黑",
// backgroundColor: {
// image: "../assets/客户侧总体用能情况分析/光标.png",
// image: require("../assets/客户侧总体用能情况分析/光标.png"),
// },
// padding: [15, 20],
// backgroundSize: "10px 10px",
// backgroundPosition: "top left",
},
rich: {
fline: {
padding: [0, 35],
color: "#FDCC00",
// fontSize: 14,
fontSize: "0.0729rem",
fontSize: "0.07rem",
fontWeight: 600,
},
tline: {
padding: [0, 27],
color: "#fff",
// fontSize: 12,
fontSize: "0.0625rem",
fontSize: "0.06rem",
},
},
},
@ -1528,6 +1554,8 @@ export default {
animation: true,
};
option.series[0].data = convertData(data); // 设置动效散点数据
myChart.setOption(option);
myChart.on("click", chartClick);
//点击地图区域事件
@ -1775,7 +1803,6 @@ export default {
}
}
img:nth-of-type(1) {
width: 231px;
height: 59px;