Merge branch 'master' of http://git.umayle.com:2023/zhouyonghang/zhuzhansheji
This commit is contained in:
unknown
commit
dbd7475e3f
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
|
|
@ -2,7 +2,9 @@
|
|||
<div class="box">
|
||||
<div class="title">
|
||||
<img src="../assets/客户侧总体用能情况分析/logo.png" alt="" />
|
||||
<p>客户侧总体用能情况分析</p>
|
||||
<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;
|
||||
|
||||
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;
|
||||
.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: 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;
|
||||
|
|
|
|||
|
|
@ -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],
|
||||
color: "#fff",
|
||||
// fontSize: 12,
|
||||
fontSize: "0.0625rem",
|
||||
},
|
||||
},
|
||||
fontSize: "0.06rem", // 选中地图文字字号和字体颜色
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
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);
|
||||
//点击地图区域事件
|
||||
|
|
@ -1761,20 +1789,19 @@ export default {
|
|||
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: 490px;
|
||||
// margin-left: -50px;
|
||||
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: 490px;
|
||||
// margin-left: -50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
img:nth-of-type(1) {
|
||||
width: 231px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue