From 8f0263e1e8135ebf77d205e358dacb3d13e0eaec Mon Sep 17 00:00:00 2001 From: hui <770260999@qq.com> Date: Sun, 4 Feb 2024 10:01:01 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../statisticalAnalysis/assets/charts.js | 299 +++++++----------- .../components/monthlyEquipment/index.vue | 12 +- .../statisticalAnalysis/index.vue | 1 - ruoyi-ui/vue.config.js | 4 +- 4 files changed, 110 insertions(+), 206 deletions(-) diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/assets/charts.js index 734bd6ad..f5eb612d 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/assets/charts.js @@ -1,94 +1,35 @@ import * as echarts from "echarts"; -var data1 = [ - 50, 32, 41, 61, 70, 39, 40, 55, 63, 55, 36, 45, 62, 74, 46, 73, 92, 60, 45, - 33, 45, 66, 55, 32, 46, 36, 67, 49, 60, 55, 33, 35, 66, -]; -var data2 = [ - 5, 12, 4, 6, 7, 9, 10, 15, 3, 5, 6, 15, 12, 4, 6, 7, 9, 10, 15, 3, 5, 6, 5, - 12, 4, 6, 7, 9, 10, 15, 3, 5, 6, -]; let options = { tooltip: { - trigger: "axis", - backgroundColor: "rgba(17,95,182,0.5)", + trigger: 'axis', + backgroundColor: 'rgba(17,95,182,0.5)', textStyle: { - color: "#fff", + color: "#fff" }, formatter: function (params) { - return ( - params[1].marker + - "" + - params[1].name + - "\n" + - "
" + - "" + - " " + - params[1].seriesName + - ": " + - params[1].value + - "\n" + - " " + - "
" + - "" + - "" + - " " + - params[3].seriesName + - ": " + - params[3].value - ); - }, + return params[0].name + params[0].seriesName + ': ' + params[0].value + } }, grid: { - left: "2%", - right: "2%", - top: "15%", - bottom: "12%", + left: '2%', + right: '2%', + top: '15%', + bottom: '12%' }, xAxis: { - data: [ - "1日", - "2日", - "3日", - "4日", - "5日", - "6日", - "7日", - "8日", - "9日", - "10日", - "11日", - "12日", - "13日", - "14日", - "15日", - "16日", - "17日", - "18日", - "19日", - "20日", - "21日", - "22日", - "23日", - "24日", - "25日", - "26日", - "27日", - "28日", - "29日", - "30日", - ], + data: [], show: true, axisTick: { - show: false, + show: false }, axisLine: { show: true, lineStyle: { - type: "solid", - color: "#2D4377", - opacity: 1, - }, + type: 'solid', + color: '#2D4377', + opacity: 1 + } }, // lineStyle: { // show: true, @@ -97,152 +38,126 @@ let options = { axisLabel: { interval: 0, textStyle: { - color: "rgba(255,255,255,0.8)", - fontSize: 14, + color: 'rgba(255,255,255,0.8)', + fontSize: 14 }, - margin: 12, // 刻度标签与轴线之间的距离。 - }, + margin: 12 // 刻度标签与轴线之间的距离。 + } + }, - yAxis: [ - { - min: 0, - max: 100, - type: "value", - minInterval: 20, - maxInterval: 20, - name: "(单位：万)", - nameTextStyle: { - align: "left", - color: "rgba(255,255,255,0.8)", - padding: [0, 0, 0, -20], - fontSize: 14, - }, - splitLine: { - show: true, - lineStyle: { - type: "dashed", - color: "#2D4377", - opacity: 0.5, - }, - }, - axisTick: { - show: false, - }, - axisLine: { - show: true, - lineStyle: { - color: "#2D4377", - }, - }, - axisLabel: { - textStyle: { - color: "rgba(255,255,255,0.8)", - fontSize: 14, - }, - }, - data: ["0", "3", "6", "9", "12", "15", "18"], + yAxis: [{ + min: 0, + max: 100, + type: 'value', + minInterval: 20, + maxInterval: 20, + name: "", + nameTextStyle: { + align: 'left', + color: 'rgba(255,255,255,0.8)', + padding: [0, 0, 0, -20], + fontSize: 14 + }, + splitLine: { + show: true, + lineStyle: { + type: 'dashed', + color: '#2D4377', + opacity: 0.5 + } }, - ], + axisTick: { + show: false + }, + axisLine: { + show: true, + lineStyle: { + color: '#2D4377', + } + }, + axisLabel: { + textStyle: { + color: 'rgba(255,255,255,0.8)', + fontSize: 14 + } + }, + data: [ + '0', '3', '6', '9', '12', '15', '18' + ], + }], legend: { - top: "5%", - right: "5%", - icon: "rect", + top: '5%', + right: '5%', + icon: 'rect', itemWidth: 25, itemHeight: 10, textStyle: { - color: "#fff", - fontSize: 14, + color: '#fff', + fontSize: 14 }, lineStyle: { show: false, color: "#00E4BB", }, - data: [ - { - name: "高清网络球型摄像机", - itemStyle: { - color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { - offset: 0, - color: "#00E4BB", // 0% 处的颜色 - }, - { - offset: 1, - color: "#003B4E", // 100% 处的颜色 - }, - ], - false - ), - }, - }, - { - name: "增涨率", - itemStyle: { - color: "#755400", - }, + data: [{ + name: '高清网络球型摄像机', + itemStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, + color: '#00E4BB' // 0% 处的颜色 + }, { + offset: 1, + color: '#003B4E' // 100% 处的颜色 + }], false) }, - ], - itemGap: 12, // 设置间距 + }, + { + name: '增涨率', + itemStyle: { + color: "#755400" + } + }], + itemGap: 12 // 设置间距 }, series: [ + // 下半截柱状图 { - name: "增收金额", - type: "bar", + name: '', + type: 'bar', barWidth: 12, - barGap: "-100%", - itemStyle: { - // lenged文本 + barGap: '-100%', + itemStyle: { // lenged文本 opacity: 1, barBorderRadius: [13, 13, 13, 13], color: function (params) { - var a = params.name.slice(0, 2); - return new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { - offset: 0, - color: "#00E4BB", // 0% 处的颜色 - }, - { - offset: 1, - color: "#003B4E", // 100% 处的颜色 - }, - ], - false - ); - }, + var a = params.name.slice(0, 2) + return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, + color: '#00E4BB' // 0% 处的颜色 + }, { + offset: 1, + color: '#003B4E' // 100% 处的颜色 + }], false) + } }, - data: data1, + data: [] }, - { - name: "", - type: "bar", + name: '', + type: 'bar', barWidth: 12, - barGap: "-100%", + barGap: '-100%', z: 0, itemStyle: { - color: "#0BA7DA", - opacity: 0.1, + color: '#0BA7DA', + opacity: .1, }, - data: [ - 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, - 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, - 100, 100, - ], - }, - ], -}; + data: [] + } + ] +} // option && myChart3.setOption(option); // if (option && typeof option === "object") { @@ -264,4 +179,4 @@ let options = { // }, 2600); // } -export default options; +export default options; \ No newline at end of file diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/monthlyEquipment/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/monthlyEquipment/index.vue index 023bcc26..bbd0a620 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/monthlyEquipment/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/monthlyEquipment/index.vue @@ -154,17 +154,7 @@ export default { - + \ No newline at end of file diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue index 2a777825..61b69d6e 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue @@ -604,7 +604,6 @@ export default { display: inline-flex; width: 100%; height: 100%; - --keep-ratio: scaleX(1) !important; } } diff --git a/ruoyi-ui/vue.config.js b/ruoyi-ui/vue.config.js index 7b307e3c..435592ca 100644 --- a/ruoyi-ui/vue.config.js +++ b/ruoyi-ui/vue.config.js @@ -49,9 +49,9 @@ module.exports = { // target: `http://10.0.81.202:8087`, //现场后台 // target: `http://10.0.81.204:8087`, //现场后台 刘文阁 // target: `http://10.168.69.255:8087`, //正晨后台 连现场物联 刘文阁 - target: `http://10.168.78.135:8087`, //王钦 + // target: `http://10.168.78.135:8087`, //王钦 // target: `http://10.168.66.196:8087`, //正晨后台 连现场物联 刘文阁2 - // target: `http://10.168.68.42:8087`, //王思祥 + target: `http://10.168.68.42:8087`, //王思祥 changeOrigin: true, pathRewrite: { ["^" + process.env.VUE_APP_BASE_API]: "",