luoshiwen
/
long_IslandOcean
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

代码提交

This commit is contained in:
lixiaobang 2023-12-12 14:47:50 +08:00
parent af48436e21
commit 54c7bb4dbf
1 changed files with 22 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/views/energyMonitoring/index.vue
View File

@ -134,16 +134,17 @@ function getDailyElectricityConsumption() {
},
buildPath: function (ctx, shape) {
const xAxisPoint = shape.xAxisPoint;
const c0 = [shape.x, shape.y]; // 左侧面 右上点
const c1 = [shape.x - offsetX, shape.y - offsetY + 5]; // 左侧面 左上点
const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY + 5]; // 左侧面 左下点
const c3 = [xAxisPoint[0], xAxisPoint[1] + 5]; // 左侧面 右下点
const c0 = [shape.x - 10, shape.y];
const c1 = [shape.x + 10, shape.y];
const c2 = [xAxisPoint[0] + 10, xAxisPoint[1]];
const c3 = [xAxisPoint[0] - 10, xAxisPoint[1]];
ctx
.moveTo(c0[0], c0[1])
.lineTo(c1[0], c1[1])
.lineTo(c2[0], c2[1])
.lineTo(c3[0], c3[1])
.closePath();
ctx.stroke();
},
});
// 绘制右侧面
@ -154,16 +155,17 @@ function getDailyElectricityConsumption() {
},
buildPath: function (ctx, shape) {
const xAxisPoint = shape.xAxisPoint;
const c1 = [shape.x, shape.y]; //右侧面左上点
const c2 = [xAxisPoint[0], xAxisPoint[1] + 5]; //右侧面 左下点
const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY + 5]; //右侧面 右下点
const c4 = [shape.x + offsetX, shape.y - offsetY + 5]; //右侧面 右上点
const c1 = [shape.x + 9, shape.y];
const c2 = [xAxisPoint[0] + 9, xAxisPoint[1]];
const c3 = [xAxisPoint[0] + 9 + 8, xAxisPoint[1] - 10];
const c4 = [shape.x + 7 + 8, shape.y - 5];
ctx
.moveTo(c1[0], c1[1])
.lineTo(c2[0], c2[1])
.lineTo(c3[0], c3[1])
.lineTo(c4[0], c4[1])
.closePath();
ctx.stroke();
},
});
// 绘制顶面
@ -173,16 +175,17 @@ function getDailyElectricityConsumption() {
y: 0,
},
buildPath: function (ctx, shape) {
const c1 = [shape.x, shape.y + 5]; //顶部菱形下点
const c2 = [shape.x + offsetX, shape.y - offsetY + 5]; //顶部菱形右点
const c3 = [shape.x, shape.y - offsetX + 5]; //顶部菱形上点
const c4 = [shape.x - offsetX, shape.y - offsetY + 5]; //顶部菱形左点
const c1 = [shape.x - 10, shape.y];
const c2 = [shape.x + 10, shape.y];
const c3 = [shape.x + 15, shape.y - 5];
const c4 = [shape.x - 5, shape.y - 5];
ctx
.moveTo(c1[0], c1[1])
.lineTo(c2[0], c2[1])
.lineTo(c3[0], c3[1])
.lineTo(c4[0], c4[1])
.closePath();
ctx.stroke();
},
});
// 注册三个面图形
@ -206,9 +209,9 @@ function getDailyElectricityConsumption() {
// let colorArr = [["#12D5AF"], ["#0BC19D", "rgba(13,8,16,0)"], ["#68EFD4", "rgba(14,185,151,0)"]]
// 蓝色渐变
let colorArr = [
["#71ddff"],
["rgba(12, 149, 198, 1)", "rgba(13,8,16,0)"],
["rgba(34, 188, 255, 1)", "rgba(14,156,185,0)"],
["rgba(0, 170, 193, 1)"],
["rgba(0, 224, 255, 1)", "rgba(13,8,16,0)"],
["rgba(0, 224, 255, 1)", "rgba(14,156,185,0)"],
];
let myChart = echarts.init(
document.getElementById("dailyElectricityConsumption")
@ -271,7 +274,8 @@ function getDailyElectricityConsumption() {
splitLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,0.16)",
type: "dashed",
color: "rgba(1, 39, 37, 0.30)",
},
},
// y轴刻度线
@ -373,7 +377,7 @@ function getDailyElectricityConsumption() {
type: "bar",
label: {
normal: {
show: true,
show: false,
position: "top",
formatter: (e) => {
return e.value;
@ -398,7 +402,7 @@ onMounted(() => {
//实时负荷
getRealTimeLoad();
//当日累计用电量
getDailyElectricityConsumption()
getDailyElectricityConsumption();
});
</script>