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