From 9b9a27b6a729cf7d65672b57cd4cb4cf49f2a2fc Mon Sep 17 00:00:00 2001 From: yyl <279235553@qq.com> Date: Wed, 17 Jan 2024 08:31:37 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E6=9C=80=E6=96=B0=E4=BB=A3?= =?UTF-8?q?=E7=A0=81=EF=BC=8C=E7=BB=9F=E8=AE=A1=E5=88=86=E6=9E=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ruoyi-ui/package.json | 3 +- ruoyi-ui/src/common/menuData.js | 9 +- .../statisticalAnalysis/assets/charts.js | 193 ++++++++ .../statisticalAnalysis/index.vue | 438 ++++++++++++++++++ 4 files changed, 640 insertions(+), 3 deletions(-) create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/assets/charts.js create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue diff --git a/ruoyi-ui/package.json b/ruoyi-ui/package.json index db476b50..4a4c3840 100644 --- a/ruoyi-ui/package.json +++ b/ruoyi-ui/package.json @@ -103,7 +103,8 @@ "vue-video-player": "^5.0.2", "vuedraggable": "2.24.3", "vuescroll": "^4.18.1", - "vuex": "3.6.0" + "vuex": "3.6.0", + "zrender": "^5.4.4" }, "devDependencies": { "@vue/cli-plugin-babel": "4.4.6", diff --git a/ruoyi-ui/src/common/menuData.js b/ruoyi-ui/src/common/menuData.js index cf33c1e5..d1af6aca 100644 --- a/ruoyi-ui/src/common/menuData.js +++ b/ruoyi-ui/src/common/menuData.js @@ -97,14 +97,19 @@ export default [ name: "maintain", position: "left", path: "/maintain", - component: "developing.vue", children: [ { title: "收费运营", name: "chargeableOperations", path: "/maintain/board", component: "maintenanceOperations/chargeableOperations/index.vue", - }] + }, + { + title: "统计分析", + name: "statisticalAnalysis", + path: "/maintain/statisticalAnalysis", + component: "maintenanceOperations/statisticalAnalysis/index.vue", + }] }, { title: "公众服务", 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 new file mode 100644 index 00000000..b26fcf69 --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/assets/charts.js @@ -0,0 +1,193 @@ +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] +var options = { + tooltip: { + trigger: 'axis', + backgroundColor: 'rgba(17,95,182,0.5)', + textStyle: { + 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; + } + }, + grid: { + 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日'], + show: true, + axisTick: { + show: false + }, + axisLine: { + show: true, + lineStyle: { + type: 'solid', + color: '#2D4377', + opacity: 1 + } + }, + // lineStyle: { + // show: true, + // type: 'solid' + // }, + axisLabel: { + interval: 0, + textStyle: { + color: 'rgba(255,255,255,0.8)', + fontSize: 14 + }, + 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' + ], + }], + legend: { + top: '5%', + right: '5%', + icon: 'rect', + itemWidth: 25, + itemHeight: 10, + textStyle: { + 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" + } + }], + itemGap: 12 // 设置间距 + }, + series: [ + + // 下半截柱状图 + { + name: '增收金额', + type: 'bar', + barWidth: 12, + 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) + } + }, + + data: data1 + }, + + + + { + name: '', + type: 'bar', + barWidth: 12, + barGap: '-100%', + z: 0, + itemStyle: { + 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] + } + ] +} + +// option && myChart3.setOption(option); +// if (option && typeof option === "object") { +// myChart3.setOption(option, true); +// refreshChart(myChart3,option); +// var index3 = 0; //播放所在下标 +// var mTime = setInterval(function () { +// myChart3.dispatchAction({ +// type: 'showTip', +// seriesIndex: 0, +// dataIndex: index3 +// }); +// index3++; +// if (index3 >= 6) { +// //console.log('data4', fxdata.length) +// index3 = 0; +// //console.log(fxdata) +// } +// }, 2600); +// } + +export default options; \ 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 new file mode 100644 index 00000000..53fe3d88 --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue @@ -0,0 +1,438 @@ + + + + + + \ No newline at end of file