diff --git a/src/views/energyMonitoring/index.vue b/src/views/energyMonitoring/index.vue index 1dac221..1c7cac1 100644 --- a/src/views/energyMonitoring/index.vue +++ b/src/views/energyMonitoring/index.vue @@ -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(); });