diff --git a/package-lock.json b/package-lock.json index e33dd32..7dced56 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30,7 +30,6 @@ "@vue/cli-service": "~5.0.0", "less": "^4.2.0", "less-loader": "^8.0.0", - "lib-flexible": "^0.3.2", "postcss": "^8.4.31", "postcss-preset-env": "^9.3.0", "vue-template-compiler": "^2.6.14" @@ -8022,12 +8021,6 @@ "node": ">=6" } }, - "node_modules/lib-flexible": { - "version": "0.3.2", - "resolved": "https://registry.npmjs.org/lib-flexible/-/lib-flexible-0.3.2.tgz", - "integrity": "sha512-9yowMWA70tKhKdCJDaltY0mNQG4OWo7pWKScnTp9aiSxS7s20ZYlwBRE3335nweOf5qKXVC7sDxJwMPM8/MFZg==", - "dev": true - }, "node_modules/lilconfig": { "version": "2.1.0", "resolved": "https://registry.npmmirror.com/lilconfig/-/lilconfig-2.1.0.tgz", @@ -19185,12 +19178,6 @@ "integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==", "dev": true }, - "lib-flexible": { - "version": "0.3.2", - "resolved": "https://registry.npmjs.org/lib-flexible/-/lib-flexible-0.3.2.tgz", - "integrity": "sha512-9yowMWA70tKhKdCJDaltY0mNQG4OWo7pWKScnTp9aiSxS7s20ZYlwBRE3335nweOf5qKXVC7sDxJwMPM8/MFZg==", - "dev": true - }, "lilconfig": { "version": "2.1.0", "resolved": "https://registry.npmmirror.com/lilconfig/-/lilconfig-2.1.0.tgz", diff --git a/package.json b/package.json index c7fca37..aab393b 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,6 @@ "@vue/cli-service": "~5.0.0", "less": "^4.2.0", "less-loader": "^8.0.0", - "lib-flexible": "^0.3.2", "postcss": "^8.4.31", "postcss-preset-env": "^9.3.0", "vue-template-compiler": "^2.6.14" diff --git a/src/assets/nyjc/今日.png b/src/assets/nyjc/今日.png new file mode 100644 index 0000000..d8bb5bf Binary files /dev/null and b/src/assets/nyjc/今日.png differ diff --git a/src/assets/nyjc/昨日.png b/src/assets/nyjc/昨日.png new file mode 100644 index 0000000..d0e1c4e Binary files /dev/null and b/src/assets/nyjc/昨日.png differ diff --git a/src/main.js b/src/main.js index 23d8216..39fe026 100644 --- a/src/main.js +++ b/src/main.js @@ -3,8 +3,6 @@ import App from "./App.vue"; import "./registerServiceWorker"; import router from "./router"; import store from "./store"; -// 动态设置根元素html字体大小 -// import "lib-flexible"; Vue.config.productionTip = false; import ElementUI from "element-ui"; import "element-ui/lib/theme-chalk/index.css"; diff --git a/src/views/lll/NYJCD.vue b/src/views/lll/NYJCD.vue index 9d0c5b4..8d02f35 100644 --- a/src/views/lll/NYJCD.vue +++ b/src/views/lll/NYJCD.vue @@ -407,10 +407,13 @@ export default { }, //余热发电 3d yrfd() { - 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, @@ -432,7 +435,7 @@ export default { }, }); // 绘制右侧面 - const CubeRight = this.$echarts.graphic.extendShape({ + const CubeRight = echarts.graphic.extendShape({ shape: { x: 0, y: 0, @@ -452,16 +455,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]) @@ -472,75 +474,76 @@ 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 = [ - ["#04E886"], - ["#0AE841", "rgba(56,231,197,1)"], - ["#02C25F", "rgba(11,194,121,1)"], - ]; - let option = { + const option = { // legend: { - // // data: [ - // // { - // // icon: "rect", - // // name: "余热发电", - // // }, - // // ], - // textStyle: { - // color: "#fff", - // fontSize: "20px", - // }, + // data: [ + // { + // name: "余热发电量", + // icon: require("../../assets/nyjc/今日.png"), + // textStyle: { + // color: "white", + // fontSize: 20, + // }, + // }, + // ], + // }, + // tooltip: { + // trigger: "axis", + // axisPointer: { + // type: "shadow", + // }, + // // formatter: function (params) { + // // const item = params[1] + // // return item.name + ' : ' + item.value + // // } // }, - tooltip: { - trigger: "axis", - axisPointer: { - type: "shadow", - }, - formatter: function (params, ticket, callback) { - 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, @@ -551,17 +554,35 @@ export default { color: "#fff", fontSize: 20, }, + interval: 0, //代表显示所有x轴标签显示 }, - // boundaryGap: ['20%', '20%'], }, series: [ { type: "custom", - name: "余热发电", + name: "余热发电量", + markPoint: { + data: [ + { + type: "max", + name: "Max", + symbolOffset: [-20, 0], + itemStyle: { + color: "transparent", // 标注点颜色 + }, + // label 用于设置标注点上的文本标签样式 + label: { + color: "#0BE73B", // 文本颜色 + fontSize: 25, + }, + }, + ], + }, renderItem: (params, api) => { const location = api.coord([api.value(0), api.value(1)]); return { type: "group", + x: -20, children: [ { type: "CubeLeft", @@ -577,11 +598,11 @@ export default { fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, - color: colorArr[1][0], + color: "#09E63A", }, { offset: 1, - color: colorArr[1][1], + color: "#39E7C7", }, ]), }, @@ -600,11 +621,11 @@ export default { fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, - color: colorArr[2][0], + color: "#00C35A", }, { offset: 1, - color: colorArr[2][1], + color: "#09C379", }, ]), }, @@ -623,11 +644,11 @@ export default { fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, - color: colorArr[0][0], + color: "#05E6A5", }, { offset: 1, - color: colorArr[0][0], + color: "#12DE63", }, ]), }, @@ -635,27 +656,7 @@ export default { ], }; }, - data: seriesData, - }, - { - type: "bar", - label: { - normal: { - show: true, - position: "top", - formatter: (e) => { - return e.value === maxValue ? e.value : ""; - }, - fontSize: 20, - color: "#09E83E", - offset: [0, -15], - }, - }, - itemStyle: { - color: "transparent", - }, - tooltip: {}, - data: seriesData, + data: yaxisData, }, ], }; diff --git a/src/views/lll/NYJCD/PDS.vue b/src/views/lll/NYJCD/PDS.vue index 8b9ced3..0962b51 100644 --- a/src/views/lll/NYJCD/PDS.vue +++ b/src/views/lll/NYJCD/PDS.vue @@ -404,11 +404,9 @@ export default { let xaxisData = ["1月", "2月", "3月", "4月", "5月"]; let yaxisData = [90, 80, 100, 70, 65]; let yaxisData2 = [60, 56, 34, 69, 79]; - //拿到最大值 - const maxValue = Math.max(...yaxisData); - const maxValue2 = Math.max(...yaxisData2); - const offsetX = 15; - const offsetY = 5; + + const offsetX = 20; + const offsetY = 10; // 绘制左侧面 const CubeLeft = echarts.graphic.extendShape({ shape: { @@ -418,6 +416,7 @@ export default { buildPath: function (ctx, shape) { // 会canvas的应该都能看得懂，shape是从custom传入的 const xAxisPoint = shape.xAxisPoint; + // console.log(shape); const c0 = [shape.x, shape.y]; const c1 = [shape.x - offsetX, shape.y - offsetY]; const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY]; @@ -430,7 +429,6 @@ export default { .closePath(); }, }); - // 绘制右侧面 const CubeRight = echarts.graphic.extendShape({ shape: { @@ -451,7 +449,6 @@ export default { .closePath(); }, }); - // 绘制顶面 const CubeTop = echarts.graphic.extendShape({ shape: { @@ -460,7 +457,7 @@ export default { }, buildPath: function (ctx, shape) { const c1 = [shape.x, shape.y]; - const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点 + const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点 const c3 = [shape.x, shape.y - offsetX]; const c4 = [shape.x - offsetX, shape.y - offsetY]; ctx @@ -471,67 +468,122 @@ export default { .closePath(); }, }); - // 注册三个面图形 echarts.graphic.registerShape("CubeLeft", CubeLeft); echarts.graphic.registerShape("CubeRight", CubeRight); echarts.graphic.registerShape("CubeTop", CubeTop); - let option = { + const option = { legend: { data: [ - { icon: "rect", name: "昨日" }, - { icon: "rect", name: "今日" }, + { + name: "昨日", + // icon: require("../../../assets/nyjc/昨日.png"), + textStyle: { + color: "white", + }, + }, + { + name: "今日", + // icon: require("../../../assets/nyjc/今日.png"), + textStyle: { + color: "white", + }, + }, ], - textStyle: { - color: "#fff", - fontSize: "20px", - }, }, + // tooltip: { + // trigger: "axis", + // axisPointer: { + // type: "shadow", + // }, + // // formatter: function (params) { + // // const item = params[1] + // // return item.name + ' : ' + item.value + // // } + // }, grid: { - left: "1%", - right: "0%", - top: "16%", - bottom: "5%", + left: "3%", + right: "4%", + bottom: "3%", containLabel: true, }, xAxis: { type: "category", data: xaxisData, - axisLine: { + axisLabel: { show: true, + textStyle: { + color: "#fff", + fontSize: 20, + }, + interval: 0, //代表显示所有x轴标签显示 }, axisTick: { show: true, }, - axisLabel: { - fontSize: 20, - color: "#FFFFFF", - }, }, yAxis: { type: "value", + splitArea: false, name: "单位:kWh", nameTextStyle: { color: "#fff", fontSize: 20, + padding: 10, + }, + axisLine: { + show: false, + lineStyle: { + width: 2, + color: "#CEDDF2", + }, }, splitLine: { show: true, + lineStyle: { + color: "#2A353F", + type: "dashed", + }, + }, + axisTick: { + show: false, }, axisLabel: { - fontSize: 20, - color: "#FFFFFF", + show: true, + textStyle: { + color: "#fff", + fontSize: 20, + }, + interval: 0, //代表显示所有x轴标签显示 }, }, series: [ { type: "custom", - name: "昨日", + name: "今日", + markPoint: { + data: [ + { + type: "max", + name: "Max", + symbolOffset: [25, 0], + itemStyle: { + color: "transparent", // 标注点颜色 + }, + // label 用于设置标注点上的文本标签样式 + label: { + color: "#24BDF2", // 文本颜色 + fontSize: 25, + }, + }, + ], + }, renderItem: (params, api) => { const location = api.coord([api.value(0), api.value(1)]); return { type: "group", + x: 30, children: [ { type: "CubeLeft", @@ -547,15 +599,11 @@ export default { fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, - color: "#08E83C", - }, - { - offset: 0.35, - color: "#1FE77D", + color: "#4567FF", }, { offset: 1, - color: "#38E7C5", + color: "#0CC7FA", }, ]), }, @@ -574,15 +622,11 @@ export default { fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, - color: "#00C25D", - }, - { - offset: 0.35, - color: "#05C269", + color: "#115DD5", }, { offset: 1, - color: "#0BC27B", + color: "#0574D0", }, ]), }, @@ -598,42 +642,48 @@ export default { xAxisPoint: api.coord([api.value(0), 0]), }, style: { - fill: "#05E861", + fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: "#0D7FFB", + }, + { + offset: 1, + color: "#0440EB", + }, + ]), }, }, ], }; }, - data: yaxisData, - }, - { - type: "bar", - itemStyle: { - color: "transparent", - }, - data: yaxisData, - label: { - normal: { - show: true, - position: "top", - formatter: (e) => { - return e.value === maxValue ? e.value : ""; - }, - fontSize: 20, - color: "#02C262", - offset: [0, -15], - }, - }, + data: yaxisData2, }, { type: "custom", - name: "今日", + name: "昨日", + markPoint: { + data: [ + { + type: "max", + name: "Max", + symbolOffset: [-20, 0], + itemStyle: { + color: "transparent", // 标注点颜色 + }, + // label 用于设置标注点上的文本标签样式 + label: { + color: "#0BE73B", // 文本颜色 + fontSize: 25, + }, + }, + ], + }, renderItem: (params, api) => { const location = api.coord([api.value(0), api.value(1)]); - const xAxisPoint = api.coord([api.value(0), 0]); - const distance = 50; return { type: "group", + x: -20, children: [ { type: "CubeLeft", @@ -641,23 +691,19 @@ export default { api, xValue: api.value(0), yValue: api.value(1), - x: location[0] - distance, + x: location[0], y: location[1], - xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]], + xAxisPoint: api.coord([api.value(0), 0]), }, style: { fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, - color: "#10C6FF", - }, - { - offset: 0.35, - color: "#377DFF", + color: "#09E63A", }, { offset: 1, - color: "#4464FF", + color: "#39E7C7", }, ]), }, @@ -668,23 +714,19 @@ export default { api, xValue: api.value(0), yValue: api.value(1), - x: location[0] - distance, + x: location[0], y: location[1], - xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]], + xAxisPoint: api.coord([api.value(0), 0]), }, style: { fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, - color: "#0673D5", - }, - { - offset: 0.35, - color: "#0B68D5", + color: "#00C35A", }, { offset: 1, - color: "#115DD5", + color: "#09C379", }, ]), }, @@ -695,41 +737,30 @@ export default { api, xValue: api.value(0), yValue: api.value(1), - x: location[0] - distance, + x: location[0], y: location[1], - xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]], + xAxisPoint: api.coord([api.value(0), 0]), }, style: { - fill: "#0964FF", + fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: "#05E6A5", + }, + { + offset: 1, + color: "#12DE63", + }, + ]), }, }, ], }; }, - data: yaxisData2, - }, - { - type: "bar", - itemStyle: { - color: "transparent", - }, - data: yaxisData2, - label: { - normal: { - show: true, - position: "top", - formatter: (e) => { - return e.value === maxValue2 ? e.value : ""; - }, - fontSize: 20, - color: "#3286FF", - offset: [0, -15], - }, - }, + data: yaxisData, }, ], }; - this.defineEcharts("pdsydl", option); }, // addMessageListener() { @@ -760,7 +791,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; justify-content: space-between; position: relative; diff --git a/src/views/lll/NYJCD/SCX1.vue b/src/views/lll/NYJCD/SCX1.vue index f284fb6..7253b80 100644 --- a/src/views/lll/NYJCD/SCX1.vue +++ b/src/views/lll/NYJCD/SCX1.vue @@ -10,7 +10,9 @@

{{ $route.query.type }}实时电荷

- 年