From a6caa1ea6ba3254bf049174f95b40d5a305a7f2a Mon Sep 17 00:00:00 2001 From: lll Date: Thu, 7 Dec 2023 10:56:49 +0800 Subject: [PATCH] 12 --- src/views/lll/NYJCD.vue | 29 +++---- src/views/lll/NYJCM.vue | 175 ++++++++++++++++++++-------------------- src/views/lll/NYJCS.vue | 175 ++++++++++++++++++++-------------------- 3 files changed, 193 insertions(+), 186 deletions(-) diff --git a/src/views/lll/NYJCD.vue b/src/views/lll/NYJCD.vue index 8d02f35..efb82e7 100644 --- a/src/views/lll/NYJCD.vue +++ b/src/views/lll/NYJCD.vue @@ -479,18 +479,20 @@ export default { echarts.graphic.registerShape("CubeTop", CubeTop); const option = { - // legend: { - // data: [ - // { - // name: "余热发电量", - // icon: require("../../assets/nyjc/今日.png"), - // textStyle: { - // color: "white", - // fontSize: 20, - // }, - // }, - // ], - // }, + legend: { + data: [ + { + name: "余热发电量", + textStyle: { + color: "white", + fontSize: 20, + }, + itemStyle: { + color: "#0DFC4A", // 图例图标的颜色 + }, + }, + ], + }, // tooltip: { // trigger: "axis", // axisPointer: { @@ -559,8 +561,8 @@ export default { }, series: [ { - type: "custom", name: "余热发电量", + type: "custom", markPoint: { data: [ { @@ -582,7 +584,6 @@ export default { const location = api.coord([api.value(0), api.value(1)]); return { type: "group", - x: -20, children: [ { type: "CubeLeft", diff --git a/src/views/lll/NYJCM.vue b/src/views/lll/NYJCM.vue index f84f9bc..b5f4192 100644 --- a/src/views/lll/NYJCM.vue +++ b/src/views/lll/NYJCM.vue @@ -495,10 +495,13 @@ export default { }, //月用煤量 3d yysl() { - const offsetX = 24; //bar宽 - const offsetY = 8; //倾斜角度 + let xaxisData = ["1月", "2月", "3月", "4月", "5月"]; + let yaxisData = [90, 80, 100, 70, 65]; + + const offsetX = 20; + const offsetY = 10; // 绘制左侧面 - const CubeLeft = this.$echarts.graphic.extendShape({ + const CubeLeft = echarts.graphic.extendShape({ shape: { x: 0, y: 0, @@ -520,7 +523,7 @@ export default { }, }); // 绘制右侧面 - const CubeRight = this.$echarts.graphic.extendShape({ + const CubeRight = echarts.graphic.extendShape({ shape: { x: 0, y: 0, @@ -540,16 +543,15 @@ export default { }, }); // 绘制顶面 - const CubeTop = this.$echarts.graphic.extendShape({ + const CubeTop = echarts.graphic.extendShape({ shape: { x: 0, y: 0, }, buildPath: function (ctx, shape) { const c1 = [shape.x, shape.y]; - const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点 - // const c3 = [shape.x, shape.y - offsetX]; - const c3 = [shape.x, shape.y - offsetY * 2]; + const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点 + const c3 = [shape.x, shape.y - offsetX]; const c4 = [shape.x - offsetX, shape.y - offsetY]; ctx .moveTo(c1[0], c1[1]) @@ -560,75 +562,78 @@ export default { }, }); // 注册三个面图形 - this.$echarts.graphic.registerShape("CubeLeft", CubeLeft); - this.$echarts.graphic.registerShape("CubeRight", CubeRight); - this.$echarts.graphic.registerShape("CubeTop", CubeTop); - let xAxisData = ["1月", "2月", "3月", "4月", "5月"]; - let seriesData = [100, 200, 300, 400, 300]; - //拿到最大值 - const maxValue = Math.max(...seriesData); + echarts.graphic.registerShape("CubeLeft", CubeLeft); + echarts.graphic.registerShape("CubeRight", CubeRight); + echarts.graphic.registerShape("CubeTop", CubeTop); - let colorArr = [ - ["#0A67FF"], - ["#10C6FF", "rgba(60,113,255,1)"], - ["#0774D6", "rgba(17,94,213,1)"], - ]; - let option = { - // legend: { - // data: [ - // { - // icon: "rect", - // name: "炭排放量", - // }, - // ], - // textStyle: { - // color: "#fff", - // fontSize: "20px", - // }, - // }, - tooltip: { - trigger: "axis", - axisPointer: { - type: "shadow", - }, - formatter: function (params, ticket, callback) { - const item = params[1]; - return item.name + " : " + item.value; - }, + const option = { + legend: { + data: [ + { + name: "月用煤量", + textStyle: { + color: "white", + fontSize: 20, + }, + itemStyle: { + color: "#0E62D5", // 图例图标的颜色 + }, + }, + ], }, + // tooltip: { + // trigger: "axis", + // axisPointer: { + // type: "shadow", + // }, + // // formatter: function (params) { + // // const item = params[1] + // // return item.name + ' : ' + item.value + // // } + // }, grid: { - // 让图表占满容器 - left: "5%", - right: "5%", - bottom: "0%", + left: "3%", + right: "4%", + bottom: "3%", containLabel: true, }, xAxis: { type: "category", - data: xAxisData, - axisLine: { + data: xaxisData, + axisLabel: { show: true, + textStyle: { + color: "#fff", + fontSize: 20, + }, + interval: 0, //代表显示所有x轴标签显示 }, axisTick: { - show: false, - }, - axisLabel: { - fontSize: 20, - color: "#fff", - margin: 15, + show: true, }, }, yAxis: { type: "value", - name: "单位:t", + splitArea: false, + name: "单位:kWh", nameTextStyle: { color: "#fff", fontSize: 20, padding: 10, }, + axisLine: { + show: false, + lineStyle: { + width: 2, + color: "#CEDDF2", + }, + }, splitLine: { show: true, - lineStyle: {}, + lineStyle: { + color: "#2A353F", + type: "dashed", + }, }, axisTick: { show: false, @@ -639,13 +644,30 @@ export default { color: "#fff", fontSize: 20, }, + interval: 0, //代表显示所有x轴标签显示 }, - // boundaryGap: ['20%', '20%'], }, series: [ { + name: "月用煤量", type: "custom", - name: "炭排放量", + markPoint: { + data: [ + { + type: "max", + name: "Max", + symbolOffset: [25, 0], + itemStyle: { + color: "transparent", // 标注点颜色 + }, + // label 用于设置标注点上的文本标签样式 + label: { + color: "#3F71FE", // 文本颜色 + fontSize: 25, + }, + }, + ], + }, renderItem: (params, api) => { const location = api.coord([api.value(0), api.value(1)]); return { @@ -665,11 +687,11 @@ export default { fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, - color: colorArr[1][0], + color: "#4567FF", }, { offset: 1, - color: colorArr[1][1], + color: "#0CC7FA", }, ]), }, @@ -688,11 +710,11 @@ export default { fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, - color: colorArr[2][0], + color: "#115DD5", }, { offset: 1, - color: colorArr[2][1], + color: "#0574D0", }, ]), }, @@ -711,11 +733,11 @@ export default { fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, - color: colorArr[0][0], + color: "#0D7FFB", }, { offset: 1, - color: colorArr[0][0], + color: "#0440EB", }, ]), }, @@ -723,27 +745,7 @@ export default { ], }; }, - data: seriesData, - }, - { - type: "bar", - label: { - normal: { - show: true, - position: "top", - formatter: (e) => { - return e.value === maxValue ? e.value : ""; - }, - fontSize: 20, - color: "#11C3FF", - offset: [0, -15], - }, - }, - itemStyle: { - color: "transparent", - }, - tooltip: {}, - data: seriesData, + data: yaxisData, }, ], }; @@ -765,7 +767,8 @@ export default { height: 100%; box-sizing: border-box; background-color: transparent; - background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png); + background-image: url(../../assets/img/左遮罩.png), + url(../../assets/img/右遮罩.png); display: flex; padding-top: 400px; justify-content: space-between; diff --git a/src/views/lll/NYJCS.vue b/src/views/lll/NYJCS.vue index 0b2da56..2377298 100644 --- a/src/views/lll/NYJCS.vue +++ b/src/views/lll/NYJCS.vue @@ -425,10 +425,13 @@ export default { }, //月用水量 yysl() { - const offsetX = 24; //bar宽 - const offsetY = 8; //倾斜角度 + let xaxisData = ["1月", "2月", "3月", "4月", "5月"]; + let yaxisData = [90, 80, 100, 70, 65]; + + const offsetX = 20; + const offsetY = 10; // 绘制左侧面 - const CubeLeft = this.$echarts.graphic.extendShape({ + const CubeLeft = echarts.graphic.extendShape({ shape: { x: 0, y: 0, @@ -450,7 +453,7 @@ export default { }, }); // 绘制右侧面 - const CubeRight = this.$echarts.graphic.extendShape({ + const CubeRight = echarts.graphic.extendShape({ shape: { x: 0, y: 0, @@ -470,16 +473,15 @@ export default { }, }); // 绘制顶面 - const CubeTop = this.$echarts.graphic.extendShape({ + const CubeTop = echarts.graphic.extendShape({ shape: { x: 0, y: 0, }, buildPath: function (ctx, shape) { const c1 = [shape.x, shape.y]; - const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点 - // const c3 = [shape.x, shape.y - offsetX]; - const c3 = [shape.x, shape.y - offsetY * 2]; + const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点 + const c3 = [shape.x, shape.y - offsetX]; const c4 = [shape.x - offsetX, shape.y - offsetY]; ctx .moveTo(c1[0], c1[1]) @@ -490,75 +492,78 @@ export default { }, }); // 注册三个面图形 - this.$echarts.graphic.registerShape("CubeLeft", CubeLeft); - this.$echarts.graphic.registerShape("CubeRight", CubeRight); - this.$echarts.graphic.registerShape("CubeTop", CubeTop); - let xAxisData = ["1月", "2月", "3月", "4月", "5月"]; - let seriesData = [100, 200, 300, 400, 300]; - //拿到最大值 - const maxValue = Math.max(...seriesData); + echarts.graphic.registerShape("CubeLeft", CubeLeft); + echarts.graphic.registerShape("CubeRight", CubeRight); + echarts.graphic.registerShape("CubeTop", CubeTop); - let colorArr = [ - ["#0A67FF"], - ["#10C6FF", "rgba(60,113,255,1)"], - ["#0774D6", "rgba(17,94,213,1)"], - ]; - let option = { - // legend: { - // data: [ - // { - // icon: "rect", - // name: "炭排放量", - // }, - // ], - // textStyle: { - // color: "#fff", - // fontSize: "20px", - // }, - // }, - tooltip: { - trigger: "axis", - axisPointer: { - type: "shadow", - }, - formatter: function (params, ticket, callback) { - const item = params[1]; - return item.name + " : " + item.value; - }, + const option = { + legend: { + data: [ + { + name: "月用水量", + textStyle: { + color: "white", + fontSize: 20, + }, + itemStyle: { + color: "#0E62D5", // 图例图标的颜色 + }, + }, + ], }, + // tooltip: { + // trigger: "axis", + // axisPointer: { + // type: "shadow", + // }, + // // formatter: function (params) { + // // const item = params[1] + // // return item.name + ' : ' + item.value + // // } + // }, grid: { - // 让图表占满容器 - left: "5%", - right: "5%", - bottom: "0%", + left: "3%", + right: "4%", + bottom: "3%", containLabel: true, }, xAxis: { type: "category", - data: xAxisData, - axisLine: { + data: xaxisData, + axisLabel: { show: true, + textStyle: { + color: "#fff", + fontSize: 20, + }, + interval: 0, //代表显示所有x轴标签显示 }, axisTick: { - show: false, - }, - axisLabel: { - fontSize: 20, - color: "#fff", - margin: 15, + show: true, }, }, yAxis: { type: "value", - name: "单位:t", + splitArea: false, + name: "单位:kWh", nameTextStyle: { color: "#fff", fontSize: 20, padding: 10, }, + axisLine: { + show: false, + lineStyle: { + width: 2, + color: "#CEDDF2", + }, + }, splitLine: { show: true, - lineStyle: {}, + lineStyle: { + color: "#2A353F", + type: "dashed", + }, }, axisTick: { show: false, @@ -569,13 +574,30 @@ export default { color: "#fff", fontSize: 20, }, + interval: 0, //代表显示所有x轴标签显示 }, - // boundaryGap: ['20%', '20%'], }, series: [ { + name: "月用水量", type: "custom", - name: "炭排放量", + markPoint: { + data: [ + { + type: "max", + name: "Max", + symbolOffset: [0, 0], + itemStyle: { + color: "transparent", // 标注点颜色 + }, + // label 用于设置标注点上的文本标签样式 + label: { + color: "#3F71FE", // 文本颜色 + fontSize: 25, + }, + }, + ], + }, renderItem: (params, api) => { const location = api.coord([api.value(0), api.value(1)]); return { @@ -595,11 +617,11 @@ export default { fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, - color: colorArr[1][0], + color: "#4567FF", }, { offset: 1, - color: colorArr[1][1], + color: "#0CC7FA", }, ]), }, @@ -618,11 +640,11 @@ export default { fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, - color: colorArr[2][0], + color: "#115DD5", }, { offset: 1, - color: colorArr[2][1], + color: "#0574D0", }, ]), }, @@ -641,11 +663,11 @@ export default { fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, - color: colorArr[0][0], + color: "#0D7FFB", }, { offset: 1, - color: colorArr[0][0], + color: "#0440EB", }, ]), }, @@ -653,27 +675,7 @@ export default { ], }; }, - data: seriesData, - }, - { - type: "bar", - label: { - normal: { - show: true, - position: "top", - formatter: (e) => { - return e.value === maxValue ? e.value : ""; - }, - fontSize: 20, - color: "#11C3FF", - offset: [0, -15], - }, - }, - itemStyle: { - color: "transparent", - }, - tooltip: {}, - data: seriesData, + data: yaxisData, }, ], }; @@ -695,7 +697,8 @@ export default { height: 100%; box-sizing: border-box; background-color: transparent; - background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png); + background-image: url(../../assets/img/左遮罩.png), + url(../../assets/img/右遮罩.png); display: flex; padding-top: 400px; justify-content: space-between;