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-04 09:27:08 +08:00
parent 46c36491af fca8359693
commit 2f6d3a9429
1 changed files with 121 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

191
src/views/KHC.vue
View File

@ -83,7 +83,11 @@
</div> </div>
<div class="ynflzb"> <div class="ynflzb">
<p class="title">用能分类占比</p> <p class="title">用能分类占比</p>
<img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" /> <img
src="../assets/客户侧总体用能情况分析/底盘.png"
alt=""
class="pic"
/>
<div id="ynflzb"></div> <div id="ynflzb"></div>
</div> </div>
<div class="qyydlpm"> <div class="qyydlpm">
@ -127,7 +131,6 @@
</template> </template>
<script> <script>
import * as echarts from "echarts"; import * as echarts from "echarts";
import { fontSizeRem } from "../assets/function";
export default { export default {
data() { data() {
return { return {
@ -192,7 +195,7 @@ export default {
{ icon: "roundRect", name: "今日" }, { icon: "roundRect", name: "今日" },
], ],
textStyle: { textStyle: {
fontSize: fontSizeRem(14), fontSize: "0.07rem",
fontFamily: "AlibabaPuHuiTi", fontFamily: "AlibabaPuHuiTi",
fontWeight: 400, fontWeight: 400,
color: "rgba(255,255,255,0.8)", color: "rgba(255,255,255,0.8)",
@ -213,7 +216,7 @@ export default {
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
fontSize: fontSizeRem(14), fontSize: "0.07rem",
fontFamily: "AlibabaPuHuiTi", fontFamily: "AlibabaPuHuiTi",
fontWeight: 400, fontWeight: 400,
color: "rgba(255,255,255,0.8)", color: "rgba(255,255,255,0.8)",
@ -227,13 +230,13 @@ export default {
name: "单位:KW", name: "单位:KW",
nameTextStyle: { nameTextStyle: {
color: "#fff", color: "#fff",
fontSize: fontSizeRem(14), fontSize: "0.07rem",
padding: 10, padding: 10,
}, },
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
fontSize: fontSizeRem(14), fontSize: "0.07rem",
fontFamily: "AlibabaPuHuiTi", fontFamily: "AlibabaPuHuiTi",
fontWeight: 400, fontWeight: 400,
color: "rgba(255,255,255,0.8)", color: "rgba(255,255,255,0.8)",
@ -315,7 +318,7 @@ export default {
left: "right", left: "right",
data: [{ icon: "roundRect", name: "用电量" }], data: [{ icon: "roundRect", name: "用电量" }],
textStyle: { textStyle: {
fontSize: fontSizeRem(14), fontSize: "0.07rem",
fontFamily: "AlibabaPuHuiTi", fontFamily: "AlibabaPuHuiTi",
fontWeight: 400, fontWeight: 400,
color: "rgba(255,255,255,0.8)", color: "rgba(255,255,255,0.8)",
@ -336,7 +339,7 @@ export default {
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
fontSize: fontSizeRem(14), fontSize: "0.07rem",
fontFamily: "AlibabaPuHuiTi", fontFamily: "AlibabaPuHuiTi",
fontWeight: 400, fontWeight: 400,
color: "rgba(255,255,255,0.8)", color: "rgba(255,255,255,0.8)",
@ -350,13 +353,13 @@ export default {
name: "单位:MWH", name: "单位:MWH",
nameTextStyle: { nameTextStyle: {
color: "#fff", color: "#fff",
fontSize: fontSizeRem(14), fontSize: "0.07rem",
padding: 10, padding: 10,
}, },
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
fontSize: fontSizeRem(14), fontSize: "0.07rem",
fontFamily: "AlibabaPuHuiTi", fontFamily: "AlibabaPuHuiTi",
fontWeight: 400, fontWeight: 400,
color: "rgba(255,255,255,0.8)", color: "rgba(255,255,255,0.8)",
@ -465,17 +468,18 @@ export default {
{ {
text: "{name|" + "总量" + "}\n{val|" + formatNumber(total) + "}", text: "{name|" + "总量" + "}\n{val|" + formatNumber(total) + "}",
top: "center", top: "center",
left: 110, // left: 110,
left: "32%",
textStyle: { textStyle: {
rich: { rich: {
name: { name: {
fontSize: fontSizeRem(14), fontSize: "0.07rem",
fontWeight: "normal", fontWeight: "normal",
color: "#fff", color: "#fff",
padding: [10, 0], padding: [10, 0],
}, },
val: { val: {
fontSize: fontSizeRem(32), fontSize: "0.166rem",
fontWeight: "bold", fontWeight: "bold",
color: "#fff", color: "#fff",
}, },
@ -495,14 +499,14 @@ export default {
color: "#fff", color: "#fff",
rich: { rich: {
name: { name: {
fontSize: fontSizeRem(12), fontSize: "0.06rem",
}, },
value: { value: {
fontSize: fontSizeRem(16), fontSize: "0.08rem",
padding: [0, 5, 0, 15], padding: [0, 5, 0, 15],
}, },
unit: { unit: {
fontSize: fontSizeRem(12), fontSize: "0.06rem",
}, },
}, },
}, },
@ -743,10 +747,10 @@ export default {
label: { label: {
show: false, show: false,
opacity: 1, opacity: 1,
fontSize: fontSizeRem(14), fontSize: "0.07rem",
lineHeight: 20, lineHeight: 20,
textStyle: { textStyle: {
fontSize: fontSizeRem(14), fontSize: "0.07rem",
color: "#fff", color: "#fff",
}, },
}, },
@ -794,7 +798,7 @@ export default {
right: "2%", right: "2%",
textStyle: { textStyle: {
color: "#fff", color: "#fff",
fontSize: fontSizeRem(12), fontSize: "0.06rem",
}, },
formatter: function (name) { formatter: function (name) {
let res = data.filter((v) => v.name === name); let res = data.filter((v) => v.name === name);
@ -811,14 +815,17 @@ export default {
params.seriesName !== "mouseoutSeries" && params.seriesName !== "mouseoutSeries" &&
params.seriesName !== "pie2d" params.seriesName !== "pie2d"
) { ) {
return `${params.seriesName return `${
}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color params.seriesName
};"></span>${option.series[params.seriesIndex].pieData.value + "%" }<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: { textStyle: {
fontSize: fontSizeRem(14), fontSize: "0.07rem",
}, },
}, },
title: { title: {
@ -826,7 +833,7 @@ export default {
top: "20", top: "20",
textStyle: { textStyle: {
color: "#fff", color: "#fff",
fontSize: fontSizeRem(22), fontSize: "0.11rem",
}, },
}, },
// backgroundColor: "#0E3567", // backgroundColor: "#0E3567",
@ -866,7 +873,7 @@ export default {
show: false, show: false,
boxHeight: 0.01, boxHeight: 0.01,
//top: '30%', //top: '30%',
bottom: "50%", bottom: "500%",
left: "-7%", left: "-7%",
// environment: "rgba(255,255,255,0)", // environment: "rgba(255,255,255,0)",
viewControl: { viewControl: {
@ -992,7 +999,7 @@ export default {
borderWidth: 2, // 高亮时的边框宽度 borderWidth: 2, // 高亮时的边框宽度
}, },
label: { label: {
fontSize: 12, // 选中地图文字字号和字体颜色 fontSize: "0.06rem", // 选中地图文字字号和字体颜色
color: "#fff", color: "#fff",
}, },
}, },
@ -1006,7 +1013,7 @@ export default {
}, },
textStyle: { textStyle: {
color: "#000", //文字颜色 color: "#000", //文字颜色
fontSize: 16, //文字大小 fontSize: "0.08rem", //文字大小
fontFamily: "微软雅黑", fontFamily: "微软雅黑",
// backgroundColor: { // backgroundColor: {
// image: "../assets/客户侧总体用能情况分析/光标.png", // image: "../assets/客户侧总体用能情况分析/光标.png",
@ -1017,13 +1024,13 @@ export default {
fline: { fline: {
padding: [0, 35], padding: [0, 35],
color: "#FDCC00", color: "#FDCC00",
fontSize: 14, fontSize: "0.07rem",
fontWeight: 600, fontWeight: 600,
}, },
tline: { tline: {
padding: [0, 27], padding: [0, 27],
color: "#fff", color: "#fff",
fontSize: 12, fontSize: "0.06rem",
}, },
}, },
}, },
@ -1141,53 +1148,87 @@ export default {
initfbqk() { initfbqk() {
// mock 数据 // mock 数据
const dataArr = { const dataArr = {
xdata: ['济南', '烟台', '威海', '青岛', '潍坊', '临沂', '济宁', '德州', '聊城', '泰安', '菏泽', '枣庄', '淄博', '莱芜', '东营', '日照', '滨州'], xdata: [
disinfeced: [32, 34, 20, 14, 36, 27, 30, 28, 32, 27, 32, 33, 24, 26, 27, 28, 19], "济南",
} "烟台",
"威海",
"青岛",
"潍坊",
"临沂",
"济宁",
"德州",
"聊城",
"泰安",
"菏泽",
"枣庄",
"淄博",
"莱芜",
"东营",
"日照",
"滨州",
],
disinfeced: [
32, 34, 20, 14, 36, 27, 30, 28, 32, 27, 32, 33, 24, 26, 27, 28, 19,
],
};
const maxValue = Math.max(...dataArr.disinfeced); const maxValue = Math.max(...dataArr.disinfeced);
const grid = { top: '20%', left: '5%', right: '3%', bottom: '10%' } const grid = { top: "20%", left: "5%", right: "3%", bottom: "10%" };
// xAxis // xAxis
const xAxis = { const xAxis = {
axisTick: { show: true }, axisTick: { show: true },
axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } }, axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
axisLabel: { textStyle: { fontSize: 12, color: '#fff' }, }, axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
data: dataArr.xdata data: dataArr.xdata,
} };
// yAxis // yAxis
const yAxis = { const yAxis = {
type: "value", type: "value",
name: "单位:kWh", name: "单位:kWh",
splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } }, nameTextStyle: {
color: "#fff",
fontSize: "0.07rem",
padding: 10,
},
splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
axisLine: { show: false, lineStyle: { color: "#fff" } }, axisLine: { show: false, lineStyle: { color: "#fff" } },
axisLabel: { textStyle: { fontSize: 12, color: '#fff' } } axisLabel: { textStyle: { fontSize: "0.06rem", color: "#fff" } },
} };
// series // series
const series = [ const series = [
{ {
z: 2, z: 2,
name: '底部', name: "底部",
type: 'pictorialBar', type: "pictorialBar",
data: [1, 1, 1, 1, 1, 1, 1, 1], data: [1, 1, 1, 1, 1, 1, 1, 1],
symbol: 'diamond', symbol: "diamond",
symbolOffset: [0, '50%'], symbolOffset: [0, "50%"],
symbolSize: [18, 12], symbolSize: [18, 12],
itemStyle: { itemStyle: {
color: { color: {
type: 'linear', type: "linear",
x: 0, x2: 1, y: 0, y2: 0, x: 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)' }] 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, z: 3,
name: '上部1', name: "上部1",
type: 'pictorialBar', type: "pictorialBar",
symbolPosition: 'end', symbolPosition: "end",
data: dataArr.disinfeced, data: dataArr.disinfeced,
symbol: 'diamond', symbol: "diamond",
symbolOffset: [0, '-50%'], symbolOffset: [0, "-50%"],
symbolSize: [18, 12], symbolSize: ["0.09rem", "0.06rem"],
label: { label: {
normal: { normal: {
show: true, show: true,
@ -1195,34 +1236,43 @@ export default {
formatter: (e) => { formatter: (e) => {
return e.value === maxValue ? e.value : ""; return e.value === maxValue ? e.value : "";
}, },
fontSize: 18, fontSize: "0.09rem",
color: "#fff", color: "#fff",
offset: [0, 0], offset: [0, 0],
}, },
}, },
itemStyle: { itemStyle: {
borderColor: '#28F1FA', borderColor: "#28F1FA",
borderWidth: 2, borderWidth: 2,
color: '#28F1FA' color: "#28F1FA",
}, },
}, { },
{
z: 1, z: 1,
stack: '总量', stack: "总量",
type: 'bar', type: "bar",
name: '电费', name: "电费",
barWidth: 18, barWidth: 18,
// barGap: '-100%', // barGap: '-100%',
data: dataArr.disinfeced, data: dataArr.disinfeced,
itemStyle: { itemStyle: {
color: { color: {
type: 'linear', type: "linear",
x: 0, x2: 1, y: 0, y2: 0, x: 0,
x2: 1,
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)' }] 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 } ];
let option = { xAxis, yAxis, series, grid };
this.defineEcharts("yhzyfbqk", option); this.defineEcharts("yhzyfbqk", option);
}, },
}, },
@ -1593,6 +1643,7 @@ export default {
background: url("../assets/客户侧总体用能情况分析/矩形(3).png"); background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
width: 24px; width: 24px;
height: 16px; height: 16px;
font-size: 14px;
line-height: 16px; line-height: 16px;
background: rgba(34, 23, 23, 0.1); background: rgba(34, 23, 23, 0.1);
border-radius: 0px 0px 0px 0px; border-radius: 0px 0px 0px 0px;