From 55e03a5470b014fd0e272dd3e07559ea63e741dc Mon Sep 17 00:00:00 2001 From: zhangzhang <1747194829@qq.com> Date: Wed, 28 Feb 2024 09:10:33 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=94=B9=E5=9B=BE=E8=A1=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/postTrendsDay/assets/charts.js | 2 +- .../components/eventQuery/assets/charts3.js | 3 + .../components/eventQuery/index.vue | 20 +- .../components/railway/index.vue | 27 +- .../pages/perception/eventDetection/index.vue | 40 +- .../classification/assets/charts.js | 2 +- .../components/congestion/assets/charts.js | 7 + .../components/flowstate/assets/charts.js | 8 +- .../auditAnalytics/assets/charts.js | 688 ++++++++--------- .../channelAnalytics/assets/charts.js | 698 ++++++++--------- .../eventTypeAnalysis/assets/charts.js | 717 +++++++++--------- .../nucleusThrough/assets/charts3.js | 52 +- .../components/nucleusThrough/index.vue | 81 +- .../components/postTrendsDay/assets/charts.js | 529 +++++++------ .../postTrendsMonth/assets/charts.js | 520 +++++++------ .../components/postTrendsMonth/index.vue | 85 ++- .../pages/service/publicService/index.vue | 315 ++++---- 17 files changed, 1966 insertions(+), 1828 deletions(-) diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsDay/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsDay/assets/charts.js index bf55ef05..322bd9bd 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsDay/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsDay/assets/charts.js @@ -24,7 +24,7 @@ var options = { grid: { top: "15%", //上边距 right: "0", //右边距 - left: "10px", //左边距 + left: "15px", //左边距 bottom: "10%", //下边距 containLabel: true, }, diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts3.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts3.js index 0eaabbe2..59bddcab 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts3.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts3.js @@ -191,6 +191,9 @@ let options = { zlevel: 10, data: [], animationDelay: 500, + tooltip: { + show: false, + }, }, ], }; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue index 8f5bcb92..60366b91 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue @@ -220,8 +220,8 @@ export default { dateTime: "2024", direction: "1", dataList: [], - selectIndex: 3, - selectId: 3, + selectIndex: 1, + selectId: 1, type: "year", chart1List: [], chart2List: [], @@ -400,21 +400,21 @@ export default { data.forEach((it) => { if (it.warningType == 1) { types.push("交通拥堵"); - }else if (it.warningType == 2) { + } else if (it.warningType == 2) { types.push("行人"); - }else if (it.warningType == 3) { + } else if (it.warningType == 3) { types.push("非机动车"); - }else if (it.warningType == 4) { + } else if (it.warningType == 4) { types.push("停车"); - }else if (it.warningType == 5) { + } else if (it.warningType == 5) { types.push("倒车/逆行"); - }else if (it.warningType == 6) { + } else if (it.warningType == 6) { types.push("烟火"); - }else if (it.warningType == 7) { + } else if (it.warningType == 7) { types.push("撒落物"); - }else if (it.warningType == 8) { + } else if (it.warningType == 8) { types.push("异常天气"); - }else if (it.warningType == 9) { + } else if (it.warningType == 9) { types.push("护栏碰撞"); } else { types.push("其他"); diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/index.vue index aac78436..74e7399f 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/index.vue @@ -6,10 +6,16 @@
路段车流量Top10
断面交通量Top10
--> - -
- + +
@@ -27,7 +33,7 @@ export default { }, data() { return { - dataList: [] + dataList: [], }; }, @@ -41,7 +47,7 @@ export default { getSectionPerceivedList().then((res) => { console.log(res); if (res.code == 200) { - this.dataList = res.data + this.dataList = res.data; let data = res.data; let texts = []; @@ -60,7 +66,7 @@ export default { }); }); }, - created() { }, + created() {}, methods: {}, }; @@ -77,9 +83,12 @@ export default { border-radius: 5px 5px 5px 5px; opacity: 1; border: 1px solid; - border-image: linear-gradient(360deg, + border-image: linear-gradient( + 360deg, rgba(55, 231, 255, 0.3), - rgba(55, 231, 255, 0)) 1 1; + rgba(55, 231, 255, 0) + ) + 1 1; display: flex; justify-content: flex-start; align-items: center; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/index.vue index c4379cb6..4cd1a98d 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/index.vue @@ -1,5 +1,5 @@ - + - - - \ No newline at end of file diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/classification/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/classification/assets/charts.js index 0c5d9bd3..fd3edf39 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/classification/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/classification/assets/charts.js @@ -189,7 +189,7 @@ var options = { itemStyle: { normal: { borderRadius: "5", - borderWidth: 2, + borderWidth: 4, borderType: "solid", borderCap: "round", borderJoin: "round", diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/congestion/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/congestion/assets/charts.js index 46e65aa3..213ed6ef 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/congestion/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/congestion/assets/charts.js @@ -55,6 +55,10 @@ nameList.map((item, index) => { }); var options = { + tooltip: { + show: true, + trigger: "axis", + }, grid: { top: "5%", //上边距 right: "20px", //右边距 @@ -157,6 +161,9 @@ var options = { borderRadius: 6, }, }, + tooltip: { + show: false, + }, }, ], }; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/flowstate/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/flowstate/assets/charts.js index a2ed2068..a6743533 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/flowstate/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/flowstate/assets/charts.js @@ -1,5 +1,9 @@ import * as echarts from "echarts"; var options = { + tooltip: { + show: true, + trigger: "axis", + }, axisPointer: { link: [ { @@ -127,7 +131,7 @@ var options = { ], series: [ { - name: "Evaporation", + name: "", type: "line", symbolSize: 0, lineStyle: { @@ -160,7 +164,7 @@ var options = { ], }, { - name: "Rainfall", + name: "", type: "line", symbol: "circle", symbolSize: 0, diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/auditAnalytics/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/auditAnalytics/assets/charts.js index 8d1412fa..5f088a5c 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/auditAnalytics/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/auditAnalytics/assets/charts.js @@ -1,391 +1,399 @@ var res = [ - { value: 50, name: '情报板发布' }, - { value: 1, name: '' }, - { value: 20, name: '微博发布' }, - { value: 1, name: '' }, - { value: 30, name: '服务网站' }, - { value: 1, name: '' }, - ]; - // var res = this.evaluatedCountList; - var data1 = [], data2 = [], data3 = [], legendData = []; - var curIndex = 0; - var index = 0; - let angle = 0; //角度，用来做简单的动画效果的 + { value: 50, name: "情报板发布" }, + { value: 20, name: "微博发布" }, + { value: 30, name: "服务网站" }, +]; +// var res = this.evaluatedCountList; +var data1 = [], + data2 = [], + data3 = [], + legendData = []; +var curIndex = 0; +var index = 0; +let angle = 0; //角度，用来做简单的动画效果的 - for (var i = 0; i < res.length; i++) { +for (var i = 0; i < res.length; i++) { + data1.push({ + value: res[i].value, + name: res[i].name, + }); + data2.push({ + value: res[i].value, + name: res[i].name, + itemStyle: { + opacity: 0.4, + }, + }); - data1.push({ - value: res[i].value, - name: res[i].name, - }) - data2.push({ - value: res[i].value, - name: res[i].name, - itemStyle: { - opacity: 0.4, - }, - }) + data3.push({ + value: res[i].value, + name: res[i].name, + itemStyle: { + opacity: 0.1, + }, + }); + if (res[i].name != "") legendData.push(res[i].name); +} - data3.push({ - value: res[i].value, - name: res[i].name, - itemStyle: { - opacity: 0.1, +var options = { + color: ["#5CC5FF", "#54EFD5", "#FD9666", "#5C8CFE", "#51D5AD"], + title: [ + { + text: "999", + top: "27%", + textAlign: "center", + left: "49%", + textStyle: { + color: "#ffffff", + fontSize: 30, + fontFamily: "PangMenZhengDao", }, - }) - if ( res[i].name != "" ) - legendData.push(res[i].name); - } - - var options = { - color: ['#5CC5FF', 'transparent', '#54EFD5', 'transparent', '#FD9666', 'transparent', '#5C8CFE', 'transparent', '#51D5AD', 'transparent'], - title: [ - { - text:'999', - top: '27%', - textAlign: 'center', - left: '49%', - textStyle: { - color: '#ffffff', - fontSize: 30, - fontFamily: 'PangMenZhengDao', - }, + }, + { + text: "总数", + top: "38%", + textAlign: "center", + left: "49%", + textStyle: { + color: "rgba(242, 252, 253, 0.84)", + fontSize: 14, + fontWeight: 400, }, - { - text: '总数', - top: '38%', - textAlign: 'center', - left: '49%', - textStyle: { - color: 'rgba(242, 252, 253, 0.84)', + }, + ], + grid: { + top: "3%", + left: "6%", + right: "6%", + bottom: "3%", + containLabel: true, + }, + tooltip: { + trigger: "item", + // formatter: '{b} : {c}:{d}' + }, + legend: { + orient: "vertical", + height: "80px", + // left: "10%", + top: "68%", + itemWidth: 10, + itemHeight: 10, + icon: "circle", + textStyle: { + color: "#ffffff", + fontSize: 14, + lineHeight: 22, + rich: { + text: { + width: 80, + marginLeft: 32, + fontSize: 14, + }, + number: { + fontSize: 14, + color: "#37E7FF", + marginLeft: 32, + fontWeight: "bold", + }, + unit: { fontSize: 14, - fontWeight: 400, }, }, - ], - grid: { - top: '3%', - left: '6%', - right: '6%', - bottom: '3%', - containLabel: true }, - tooltip: { - trigger: 'item', - formatter: '{b} : {c}:{d}' - }, - legend: { - orient: '', - left: '10%', - top: '68%', - itemWidth: 10, - itemHeight: 10, - icon:"circle", - textStyle: { - color: "#ffffff", - fontSize: 14, - lineHeight: 22, - rich: { - text: { - marginLeft:32, - fontSize: 14, - }, - number: { - fontSize: 14, - color: "#37E7FF", - marginLeft:32, - fontWeight: 'bold' - }, - unit: { - fontSize: 14, - } + data: legendData, + formatter(name) { + if (name == "") return ""; + const newData = res; + let tarValue = 0; + let total = 0; + for (let i = 0; i < newData.length; i++) { + total += newData[i].value; + if (newData[i].name === name) { + tarValue = newData[i].value; } - }, - data: legendData, - formatter(name) { - if ( name == "" ) return ""; - const newData = res; - let tarValue = 0; - let total = 0; - for (let i = 0; i < newData.length; i++) { - total += newData[i].value; - if (newData[i].name === name) { - tarValue = newData[i].value; - } - } - var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2); - const arr = name + ' ' + tarValue; - return `{text|${name}} {number|${percert}%}`;; - }, + } + var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2); + const arr = name + " " + tarValue; + return `{text|${name}} {number|${percert}%}`; + }, + pageIconColor: "#fff", + pageIconSize: 10, + pageTextStyle: { + color: "#fff", }, - series: [ - /** 饼图上刻度 */ + type: "scroll", + pageButtonPosition: "end", + }, + series: [ + /** 饼图上刻度 */ { - type: 'gauge', - center: ['50%', '35%'], - radius: '40%', // 错位调整此处 + type: "gauge", + center: ["50%", "35%"], + radius: "40%", // 错位调整此处 startAngle: 0, endAngle: 360, splitNumber: 52, axisLine: { show: false }, - splitLine: { + splitLine: { // length: 39, - length: '2', + length: "2", lineStyle: { width: 5, - color: '#5CC5FF' - } + color: "#5CC5FF", + }, }, axisTick: { show: false }, - axisLabel: { show: false } + axisLabel: { show: false }, }, - /** 绘制外部圆弧-2-开始圆点 */ + /** 绘制外部圆弧-2-开始圆点 */ { - type: 'custom', - coordinateSystem: 'none', + type: "custom", + coordinateSystem: "none", renderItem: (params, api) => { let x0 = api.getWidth() / 2; let y0 = api.getHeight() / 2 - 59; - let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50; + let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5; return { - type: 'circle', + type: "circle", shape: { /** 角度175° 外弧2开始角度 */ - cx: x0 + r * Math.cos((350 + -angle) * Math.PI / 180), - cy: y0 + r * Math.sin((350 + -angle) * Math.PI / 180), - r: 4 + cx: x0 + r * Math.cos(((350 + -angle) * Math.PI) / 180), + cy: y0 + r * Math.sin(((350 + -angle) * Math.PI) / 180), + r: 4, }, style: { - fill: '#5BC4FF', - stroke: '#5BC4FF' + fill: "#5BC4FF", + stroke: "#5BC4FF", }, - silent: true - } + silent: true, + }; }, - data: [0] + data: [0], }, - { - type: 'custom', - coordinateSystem: 'none', - renderItem: (params, api) => { - return { - type: 'arc', - shape: { - cx: api.getWidth() / 2, - cy: api.getHeight() / 2 - 59, - r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50, - startAngle: (350 + -angle) * Math.PI / 180, - endAngle: (120 + -angle) * Math.PI / 180 - }, - style: { - fill: 'transparent', - stroke: '#5BC4FF66', - lineWidth: 2.6 - }, - silent: true - } - }, - data: [0] + { + type: "custom", + coordinateSystem: "none", + renderItem: (params, api) => { + return { + type: "arc", + shape: { + cx: api.getWidth() / 2, + cy: api.getHeight() / 2 - 59, + r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5, + startAngle: ((350 + -angle) * Math.PI) / 180, + endAngle: ((120 + -angle) * Math.PI) / 180, + }, + style: { + fill: "transparent", + stroke: "#5BC4FF66", + lineWidth: 2.6, + }, + silent: true, + }; }, - { - type: 'custom', - coordinateSystem: 'none', - renderItem: (params, api) => { - let x0 = api.getWidth() / 2; - let y0 = api.getHeight() / 2 - 59; - let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50; - return { - type: 'circle', - shape: { - /** 角度175° 外弧2开始角度 */ - cx: x0 + r * Math.cos((150 + -angle) * Math.PI / 180), - cy: y0 + r * Math.sin((150 + -angle) * Math.PI / 180), - r: 4 - }, - style: { - fill: '#5BC4FF', - stroke: '#5BC4FF' - }, - silent: true - } - }, - data: [0] + data: [0], + }, + { + type: "custom", + coordinateSystem: "none", + renderItem: (params, api) => { + let x0 = api.getWidth() / 2; + let y0 = api.getHeight() / 2 - 59; + let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5; + return { + type: "circle", + shape: { + /** 角度175° 外弧2开始角度 */ + cx: x0 + r * Math.cos(((150 + -angle) * Math.PI) / 180), + cy: y0 + r * Math.sin(((150 + -angle) * Math.PI) / 180), + r: 4, + }, + style: { + fill: "#5BC4FF", + stroke: "#5BC4FF", + }, + silent: true, + }; }, - { - type: 'custom', - coordinateSystem: 'none', - renderItem: (params, api) => { - return { - type: 'arc', - shape: { - cx: api.getWidth() / 2, - cy: api.getHeight() / 2 - 59, - r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50, - startAngle: (150 + -angle) * Math.PI / 180, - endAngle: (-30 + -angle) * Math.PI / 180 - }, - style: { - fill: 'transparent', - stroke: '#5BC4FF66', - lineWidth: 2.6 - }, - silent: true - } + data: [0], + }, + { + type: "custom", + coordinateSystem: "none", + renderItem: (params, api) => { + return { + type: "arc", + shape: { + cx: api.getWidth() / 2, + cy: api.getHeight() / 2 - 59, + r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5, + startAngle: ((150 + -angle) * Math.PI) / 180, + endAngle: ((-30 + -angle) * Math.PI) / 180, }, - data: [0] - }, - { - type: 'custom', - coordinateSystem: 'none', - renderItem: (params, api) => { - let x0 = api.getWidth() / 2; - let y0 = api.getHeight() / 2 - 59; - let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56; - return { - type: 'circle', - shape: { - /** 角度175° 外弧2开始角度 */ - cx: x0 + r * Math.cos((590 + -angle) * Math.PI / 180), - cy: y0 + r * Math.sin((590 + -angle) * Math.PI / 180), - r: 4 - }, - style: { - fill: '#5BC4FF', - stroke: '#5BC4FF' - }, - silent: true - } - }, - data: [0] + style: { + fill: "transparent", + stroke: "#5BC4FF66", + lineWidth: 2.6, + }, + silent: true, + }; }, - { - type: 'custom', - coordinateSystem: 'none', - renderItem: (params, api) => { - return { - type: 'arc', - shape: { - cx: api.getWidth() / 2, - cy: api.getHeight() / 2 - 59, - r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56, - startAngle: (590 + -angle) * Math.PI / 180, - endAngle: (350 + -angle) * Math.PI / 180 - }, - style: { - fill: 'transparent', - stroke: '#5BC4FF66', - lineWidth: 2.6 - }, - silent: true - } - }, - data: [0] + data: [0], + }, + { + type: "custom", + coordinateSystem: "none", + renderItem: (params, api) => { + let x0 = api.getWidth() / 2; + let y0 = api.getHeight() / 2 - 59; + let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56; + return { + type: "circle", + shape: { + /** 角度175° 外弧2开始角度 */ + cx: x0 + r * Math.cos(((590 + -angle) * Math.PI) / 180), + cy: y0 + r * Math.sin(((590 + -angle) * Math.PI) / 180), + r: 4, + }, + style: { + fill: "#5BC4FF", + stroke: "#5BC4FF", + }, + silent: true, + }; }, - { - type: 'custom', - coordinateSystem: 'none', - renderItem: (params, api) => { - let x0 = api.getWidth() / 2; - let y0 = api.getHeight() / 2 - 59; - let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56; - return { - type: 'circle', - shape: { - /** 角度175° 外弧2开始角度 */ - cx: x0 + r * Math.cos((90 + -angle) * Math.PI / 180), - cy: y0 + r * Math.sin((90 + -angle) * Math.PI / 180), - r: 4 - }, - style: { - fill: '#5BC4FF', - stroke: '#5BC4FF' - }, - silent: true - } - }, - data: [0] + data: [0], + }, + { + type: "custom", + coordinateSystem: "none", + renderItem: (params, api) => { + return { + type: "arc", + shape: { + cx: api.getWidth() / 2, + cy: api.getHeight() / 2 - 59, + r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56, + startAngle: ((590 + -angle) * Math.PI) / 180, + endAngle: ((350 + -angle) * Math.PI) / 180, + }, + style: { + fill: "transparent", + stroke: "#5BC4FF66", + lineWidth: 2.6, + }, + silent: true, + }; }, - { - type: 'custom', - coordinateSystem: 'none', - renderItem: (params, api) => { - return { - type: 'arc', - shape: { - cx: api.getWidth() / 2, - cy: api.getHeight() / 2 - 59, - r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56, - startAngle: (90 + -angle) * Math.PI / 180, - endAngle: (160 + -angle) * Math.PI / 180 - }, - style: { - fill: 'transparent', - stroke: '#5BC4FF66', - lineWidth: 2.6 - }, - silent: true - } - }, - data: [0] + data: [0], + }, + { + type: "custom", + coordinateSystem: "none", + renderItem: (params, api) => { + let x0 = api.getWidth() / 2; + let y0 = api.getHeight() / 2 - 59; + let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56; + return { + type: "circle", + shape: { + /** 角度175° 外弧2开始角度 */ + cx: x0 + r * Math.cos(((90 + -angle) * Math.PI) / 180), + cy: y0 + r * Math.sin(((90 + -angle) * Math.PI) / 180), + r: 4, + }, + style: { + fill: "#5BC4FF", + stroke: "#5BC4FF", + }, + silent: true, + }; }, - { - type: 'pie', - radius: ['45%', '39%'], - center: ['50%', '35%'], - z: 10, - label: { - show: false, - position: 'center', - formatter: (params) => { - return params.name + "\r\n" + params.value + data: [0], + }, + { + type: "custom", + coordinateSystem: "none", + renderItem: (params, api) => { + return { + type: "arc", + shape: { + cx: api.getWidth() / 2, + cy: api.getHeight() / 2 - 59, + r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56, + startAngle: ((90 + -angle) * Math.PI) / 180, + endAngle: ((160 + -angle) * Math.PI) / 180, }, - rich: { - total: { - fontSize: 16, - color: '#04F5FE', - }, - efficiency: { - fontSize: 12, - color: '#00FD6D', - }, + style: { + fill: "transparent", + stroke: "#5BC4FF66", + lineWidth: 2.6, }, - color: '#FFFFFF', - fontSize: 12, - lineHeight: 16, + silent: true, + }; + }, + data: [0], + }, + { + type: "pie", + radius: ["45%", "39%"], + center: ["50%", "35%"], + z: 10, + label: { + show: false, + position: "center", + formatter: (params) => { + return params.name + "\r\n" + params.value; }, - data: data1, - labelLine: { - show: false, + rich: { + total: { + fontSize: 16, + color: "#04F5FE", + }, + efficiency: { + fontSize: 12, + color: "#00FD6D", + }, }, - itemStyle: { - normal: { - borderWidth: 6, - shadowBlur: 10, - borderRadius: 50, // 圆角 - } - } + color: "#FFFFFF", + fontSize: 12, + lineHeight: 16, }, - { - type: 'pie', - radius: ['25%', '39%'], - center: ['50%', '35%'], - label: { - show: false, + data: data1, + labelLine: { + show: false, + }, + itemStyle: { + normal: { + borderRadius: "5", + borderWidth: 4, + borderType: "solid", + borderColor: "#0C2D3A", }, - data: data2, - labelLine: { - show: false, + }, + }, + { + type: "pie", + radius: ["25%", "39%"], + center: ["50%", "35%"], + label: { + show: false, + }, + data: data2, + labelLine: { + show: false, + }, + itemStyle: { + normal: { + borderRadius: "5", + borderWidth: 4, + borderType: "solid", + borderColor: "#0C2D3A", }, - itemStyle: { - normal: { - borderWidth: 6, - shadowBlur: 10, - borderRadius: 0, // 圆角 - } - } }, - ], - - }; + }, + ], +}; - export default options \ No newline at end of file +export default options; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/channelAnalytics/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/channelAnalytics/assets/charts.js index d57f651c..435b6e5b 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/channelAnalytics/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/channelAnalytics/assets/charts.js @@ -1,392 +1,406 @@ var res = [ - { value: 20, name: '情报板发布' }, - { value: 1, name: '' }, - { value: 20, name: '微博发布' }, - { value: 1, name: '' }, - { value: 20, name: '服务网站' }, - { value: 1, name: '' }, - { value: 20, name: '短信发布' }, - { value: 1, name: '' }, - { value: 20, name: '微信发布' }, - { value: 1, name: '' }, - ]; - // var res = this.evaluatedCountList; - var data1 = [], data2 = [], data3 = [], legendData = []; - var curIndex = 0; - var index = 0; + { value: 20, name: "情报板发布" }, + { value: 20, name: "微博发布" }, + { value: 20, name: "服务网站" }, + { value: 20, name: "短信发布" }, + { value: 20, name: "微信发布" }, +]; +// var res = this.evaluatedCountList; +var data1 = [], + data2 = [], + data3 = [], + legendData = []; +var curIndex = 0; +var index = 0; - for (var i = 0; i < res.length; i++) { - data1.push({ - value: res[i].value, - name: res[i].name, - }) - data2.push({ - value: res[i].value, - name: res[i].name, - itemStyle: { - opacity: 0.4, - }, - }) +for (var i = 0; i < res.length; i++) { + data1.push({ + value: res[i].value, + name: res[i].name, + }); + data2.push({ + value: res[i].value, + name: res[i].name, + itemStyle: { + opacity: 0.4, + }, + }); - data3.push({ - value: res[i].value, - name: res[i].name, - itemStyle: { - opacity: 0.1, + data3.push({ + value: res[i].value, + name: res[i].name, + itemStyle: { + opacity: 0.1, + }, + }); + if (res[i].name != "") legendData.push(res[i].name); +} +let angle = 0; //角度，用来做简单的动画效果的 +var options = { + color: ["#68F4DD", "#FFDD69", "#3CC3F0", "#5C8CFE", "#51D5AD"], + title: [ + { + text: "999", + top: "27%", + textAlign: "center", + left: "49%", + textStyle: { + color: "#ffffff", + fontSize: 30, + fontFamily: "PangMenZhengDao", }, - }) - if ( res[i].name != "" ) - legendData.push(res[i].name); - } - let angle = 0; //角度，用来做简单的动画效果的 - var options = { - color: ['#68F4DD', 'transparent', '#FFDD69', 'transparent', '#3CC3F0', 'transparent', '#5C8CFE', 'transparent', '#51D5AD', 'transparent'], - title: [ - { - text:'999', - top: '27%', - textAlign: 'center', - left: '49%', - textStyle: { - color: '#ffffff', - fontSize: 30, - fontFamily: 'PangMenZhengDao', - }, + }, + { + text: "总数", + top: "38%", + textAlign: "center", + left: "49%", + textStyle: { + color: "rgba(242, 252, 253, 0.84)", + fontSize: 14, + fontWeight: 400, }, - { - text: '总数', - top: '38%', - textAlign: 'center', - left: '49%', - textStyle: { - color: 'rgba(242, 252, 253, 0.84)', + }, + ], + grid: { + top: "3%", + left: "6%", + right: "6%", + bottom: "3%", + containLabel: true, + }, + tooltip: { + trigger: "item", + // formatter: "{b} : {c}:{d}", + }, + legend: { + orient: "vertical", + // width: "350px", + height: "80px", + // left: "10%", + top: "68%", + itemWidth: 10, + itemHeight: 10, + icon: "circle", + textStyle: { + color: "#ffffff", + fontSize: 12, + lineHeight: 22, + rich: { + text: { + width: 80, + marginLeft: 32, + fontSize: 14, + }, + number: { + fontSize: 14, + color: "#37E7FF", + marginLeft: 32, + fontWeight: "bold", + }, + unit: { fontSize: 14, - fontWeight: 400, }, }, - ], - grid: { - top: '3%', - left: '6%', - right: '6%', - bottom: '3%', - containLabel: true - }, - tooltip: { - trigger: 'item', - formatter: '{b} : {c}:{d}' }, - legend: { - orient: '', - left: '10%', - top: '68%', - itemWidth: 10, - itemHeight: 10, - icon:"circle", - textStyle: { - color: "#ffffff", - fontSize: 14, - lineHeight: 22, - rich: { - text: { - marginLeft:32, - fontSize: 14, - }, - number: { - fontSize: 14, - color: "#37E7FF", - marginLeft:32, - fontWeight: 'bold' - }, - unit: { - fontSize: 14, - } - } - }, - data: legendData, - formatter(name) { - const newData = res; - let tarValue = 0; - let total = 0; - for (let i = 0; i < newData.length; i++) { - total += newData[i].value; - if (newData[i].name === name) { - tarValue = newData[i].value; - } + data: legendData, + formatter(name) { + const newData = res; + let tarValue = 0; + let total = 0; + for (let i = 0; i < newData.length; i++) { + total += newData[i].value; + if (newData[i].name === name) { + tarValue = newData[i].value; } - var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2); - const arr = name + ' ' + tarValue; - return `{text|${name}} {number|${percert}%}`;; - }, + } + var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2); + const arr = name + " " + tarValue; + return `{text|${name}} {number|${percert}%}`; + }, + pageIconColor: "#fff", + pageIconSize: 10, + pageTextStyle: { + color: "#fff", }, - series: [ - /** 饼图上刻度 */ + type: "scroll", + pageButtonPosition: "end", + }, + series: [ + /** 饼图上刻度 */ { - type: 'gauge', - center: ['50%', '35%'], - radius: '46%', // 错位调整此处 + type: "gauge", + center: ["50%", "35%"], + radius: "46%", // 错位调整此处 startAngle: 0, endAngle: 360, splitNumber: 52, axisLine: { show: false }, - splitLine: { + splitLine: { // length: 39, - length: '2', + length: "2", lineStyle: { width: 5, - color: '#5CC5FF' - } + color: "#5CC5FF", + }, }, axisTick: { show: false }, - axisLabel: { show: false } + axisLabel: { show: false }, }, - /** 绘制外部圆弧-2-开始圆点 */ + /** 绘制外部圆弧-2-开始圆点 */ { - type: 'custom', - coordinateSystem: 'none', + type: "custom", + coordinateSystem: "none", renderItem: (params, api) => { let x0 = api.getWidth() / 2; let y0 = api.getHeight() / 2 - 59; - let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50; + let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5; return { - type: 'circle', + type: "circle", shape: { /** 角度175° 外弧2开始角度 */ - cx: x0 + r * Math.cos((350 + -angle) * Math.PI / 180), - cy: y0 + r * Math.sin((350 + -angle) * Math.PI / 180), - r: 4 + cx: x0 + r * Math.cos(((350 + -angle) * Math.PI) / 180), + cy: y0 + r * Math.sin(((350 + -angle) * Math.PI) / 180), + r: 4, }, style: { - fill: '#5BC4FF', - stroke: '#5BC4FF' + fill: "#5BC4FF", + stroke: "#5BC4FF", }, - silent: true - } + silent: true, + }; }, - data: [0] + data: [0], }, - { - type: 'custom', - coordinateSystem: 'none', - renderItem: (params, api) => { - return { - type: 'arc', - shape: { - cx: api.getWidth() / 2, - cy: api.getHeight() / 2 - 59, - r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50, - startAngle: (350 + -angle) * Math.PI / 180, - endAngle: (120 + -angle) * Math.PI / 180 - }, - style: { - fill: 'transparent', - stroke: '#5BC4FF66', - lineWidth: 2.6 - }, - silent: true - } - }, - data: [0] + { + type: "custom", + coordinateSystem: "none", + renderItem: (params, api) => { + return { + type: "arc", + shape: { + cx: api.getWidth() / 2, + cy: api.getHeight() / 2 - 59, + r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5, + startAngle: ((350 + -angle) * Math.PI) / 180, + endAngle: ((120 + -angle) * Math.PI) / 180, + }, + style: { + fill: "transparent", + stroke: "#5BC4FF66", + lineWidth: 2.6, + }, + silent: true, + }; }, - { - type: 'custom', - coordinateSystem: 'none', - renderItem: (params, api) => { - let x0 = api.getWidth() / 2; - let y0 = api.getHeight() / 2 - 59; - let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50; - return { - type: 'circle', - shape: { - /** 角度175° 外弧2开始角度 */ - cx: x0 + r * Math.cos((150 + -angle) * Math.PI / 180), - cy: y0 + r * Math.sin((150 + -angle) * Math.PI / 180), - r: 4 - }, - style: { - fill: '#5BC4FF', - stroke: '#5BC4FF' - }, - silent: true - } - }, - data: [0] + data: [0], + }, + { + type: "custom", + coordinateSystem: "none", + renderItem: (params, api) => { + let x0 = api.getWidth() / 2; + let y0 = api.getHeight() / 2 - 59; + let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5; + return { + type: "circle", + shape: { + /** 角度175° 外弧2开始角度 */ + cx: x0 + r * Math.cos(((150 + -angle) * Math.PI) / 180), + cy: y0 + r * Math.sin(((150 + -angle) * Math.PI) / 180), + r: 4, + }, + style: { + fill: "#5BC4FF", + stroke: "#5BC4FF", + }, + silent: true, + }; }, - { - type: 'custom', - coordinateSystem: 'none', - renderItem: (params, api) => { - return { - type: 'arc', - shape: { - cx: api.getWidth() / 2, - cy: api.getHeight() / 2 - 59, - r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50, - startAngle: (150 + -angle) * Math.PI / 180, - endAngle: (-30 + -angle) * Math.PI / 180 - }, - style: { - fill: 'transparent', - stroke: '#5BC4FF66', - lineWidth: 2.6 - }, - silent: true - } + data: [0], + }, + { + type: "custom", + coordinateSystem: "none", + renderItem: (params, api) => { + return { + type: "arc", + shape: { + cx: api.getWidth() / 2, + cy: api.getHeight() / 2 - 59, + r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5, + startAngle: ((150 + -angle) * Math.PI) / 180, + endAngle: ((-30 + -angle) * Math.PI) / 180, }, - data: [0] - }, - { - type: 'custom', - coordinateSystem: 'none', - renderItem: (params, api) => { - let x0 = api.getWidth() / 2; - let y0 = api.getHeight() / 2 - 59; - let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56; - return { - type: 'circle', - shape: { - /** 角度175° 外弧2开始角度 */ - cx: x0 + r * Math.cos((590 + -angle) * Math.PI / 180), - cy: y0 + r * Math.sin((590 + -angle) * Math.PI / 180), - r: 4 - }, - style: { - fill: '#5BC4FF', - stroke: '#5BC4FF' - }, - silent: true - } - }, - data: [0] + style: { + fill: "transparent", + stroke: "#5BC4FF66", + lineWidth: 2.6, + }, + silent: true, + }; }, - { - type: 'custom', - coordinateSystem: 'none', - renderItem: (params, api) => { - return { - type: 'arc', - shape: { - cx: api.getWidth() / 2, - cy: api.getHeight() / 2 - 59, - r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56, - startAngle: (590 + -angle) * Math.PI / 180, - endAngle: (350 + -angle) * Math.PI / 180 - }, - style: { - fill: 'transparent', - stroke: '#5BC4FF66', - lineWidth: 2.6 - }, - silent: true - } - }, - data: [0] + data: [0], + }, + { + type: "custom", + coordinateSystem: "none", + renderItem: (params, api) => { + let x0 = api.getWidth() / 2; + let y0 = api.getHeight() / 2 - 59; + let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56; + return { + type: "circle", + shape: { + /** 角度175° 外弧2开始角度 */ + cx: x0 + r * Math.cos(((590 + -angle) * Math.PI) / 180), + cy: y0 + r * Math.sin(((590 + -angle) * Math.PI) / 180), + r: 4, + }, + style: { + fill: "#5BC4FF", + stroke: "#5BC4FF", + }, + silent: true, + }; }, - { - type: 'custom', - coordinateSystem: 'none', - renderItem: (params, api) => { - let x0 = api.getWidth() / 2; - let y0 = api.getHeight() / 2 - 59; - let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56; - return { - type: 'circle', - shape: { - /** 角度175° 外弧2开始角度 */ - cx: x0 + r * Math.cos((90 + -angle) * Math.PI / 180), - cy: y0 + r * Math.sin((90 + -angle) * Math.PI / 180), - r: 4 - }, - style: { - fill: '#5BC4FF', - stroke: '#5BC4FF' - }, - silent: true - } - }, - data: [0] + data: [0], + }, + { + type: "custom", + coordinateSystem: "none", + renderItem: (params, api) => { + return { + type: "arc", + shape: { + cx: api.getWidth() / 2, + cy: api.getHeight() / 2 - 59, + r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56, + startAngle: ((590 + -angle) * Math.PI) / 180, + endAngle: ((350 + -angle) * Math.PI) / 180, + }, + style: { + fill: "transparent", + stroke: "#5BC4FF66", + lineWidth: 2.6, + }, + silent: true, + }; }, - { - type: 'custom', - coordinateSystem: 'none', - renderItem: (params, api) => { - return { - type: 'arc', - shape: { - cx: api.getWidth() / 2, - cy: api.getHeight() / 2 - 59, - r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56, - startAngle: (90 + -angle) * Math.PI / 180, - endAngle: (160 + -angle) * Math.PI / 180 - }, - style: { - fill: 'transparent', - stroke: '#5BC4FF66', - lineWidth: 2.6 - }, - silent: true - } - }, - data: [0] + data: [0], + }, + { + type: "custom", + coordinateSystem: "none", + renderItem: (params, api) => { + let x0 = api.getWidth() / 2; + let y0 = api.getHeight() / 2 - 59; + let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56; + return { + type: "circle", + shape: { + /** 角度175° 外弧2开始角度 */ + cx: x0 + r * Math.cos(((90 + -angle) * Math.PI) / 180), + cy: y0 + r * Math.sin(((90 + -angle) * Math.PI) / 180), + r: 4, + }, + style: { + fill: "#5BC4FF", + stroke: "#5BC4FF", + }, + silent: true, + }; }, - { - type: 'pie', - radius: ['45%', '40%'], - center: ['50%', '35%'], - z: 10, - label: { - show: false, - position: 'center', - formatter: (params) => { - return params.name + "\r\n" + params.value + data: [0], + }, + { + type: "custom", + coordinateSystem: "none", + renderItem: (params, api) => { + return { + type: "arc", + shape: { + cx: api.getWidth() / 2, + cy: api.getHeight() / 2 - 59, + r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56, + startAngle: ((90 + -angle) * Math.PI) / 180, + endAngle: ((160 + -angle) * Math.PI) / 180, }, - rich: { - total: { - fontSize: 16, - color: '#04F5FE', - }, - efficiency: { - fontSize: 12, - color: '#00FD6D', - }, + style: { + fill: "transparent", + stroke: "#5BC4FF66", + lineWidth: 2.6, }, - color: '#FFFFFF', - fontSize: 12, - lineHeight: 16, + silent: true, + }; + }, + data: [0], + }, + { + type: "pie", + radius: ["45%", "40%"], + center: ["50%", "35%"], + + z: 10, + label: { + show: false, + position: "center", + formatter: (params) => { + return params.name + "\r\n" + params.value; }, - data: data1, - labelLine: { - show: false, + rich: { + total: { + fontSize: 16, + color: "#04F5FE", + }, + efficiency: { + fontSize: 12, + color: "#00FD6D", + }, }, - itemStyle: { - normal: { - borderWidth: 6, - shadowBlur: 10, - borderRadius: 50, // 圆角 - } - } + color: "#FFFFFF", + fontSize: 12, + lineHeight: 16, }, - { - type: 'pie', - radius: ['29%', '40%'], - center: ['50%', '35%'], - label: { - show: false, + data: data1, + labelLine: { + show: false, + }, + itemStyle: { + // normal: { + // borderWidth: 4, + // shadowBlur: 10, + // borderRadius: 50, // 圆角 + // }, + normal: { + borderRadius: "5", + borderWidth: 4, + borderType: "solid", + borderColor: "#0C2D3A", }, - data: data2, - labelLine: { - show: false, + }, + }, + { + type: "pie", + radius: ["29%", "40%"], + center: ["50%", "35%"], + label: { + show: false, + }, + data: data2, + labelLine: { + show: false, + }, + itemStyle: { + normal: { + borderRadius: "5", + borderWidth: 8, + borderType: "solid", + borderColor: "#0C2D3A", }, - itemStyle: { - normal: { - borderWidth: 6, - shadowBlur: 10, - borderRadius: 0, // 圆角 - } - } }, - ], - - }; + }, + ], +}; - export default options \ No newline at end of file +export default options; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/eventTypeAnalysis/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/eventTypeAnalysis/assets/charts.js index 4c0891f5..6b71da75 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/eventTypeAnalysis/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/eventTypeAnalysis/assets/charts.js @@ -1,25 +1,16 @@ var res = [ - { value: 20, name: '交通事故' }, - { value: 1, name: '' }, - { value: 20, name: '车辆故障' }, - { value: 1, name: '' }, - { value: 15, name: '路障清除' }, - { value: 1, name: '' }, - { value: 10, name: '交通管制' }, - { value: 1, name: '' }, - { value: 5, name: '道路拥堵' }, - { value: 1, name: '' }, - { value: 5, name: '异常天气' }, - { value: 1, name: '' }, - { value: 5, name: '其他事件' }, - { value: 1, name: '' }, - { value: 10, name: '施工建设' }, - { value: 1, name: '' }, - { value: 10, name: '服务区异常' }, - { value: 1, name: '' }, - ]; - let angle = 0; //角度，用来做简单的动画效果的 - + { value: 20, name: "交通事故" }, + { value: 20, name: "车辆故障" }, + { value: 15, name: "路障清除" }, + { value: 10, name: "交通管制" }, + { value: 5, name: "道路拥堵" }, + { value: 5, name: "异常天气" }, + { value: 5, name: "其他事件" }, + { value: 10, name: "施工建设" }, + { value: 10, name: "服务区异常" }, +]; +let angle = 0; //角度，用来做简单的动画效果的 + //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度) function getCirlPoint(x0, y0, r, angle) { let x1 = x0 + r * Math.cos((angle * Math.PI) / 180); @@ -30,383 +21,405 @@ function getCirlPoint(x0, y0, r, angle) { }; } - // var res = this.evaluatedCountList; - var data1 = [], data2 = [], data3 = [], legendData = []; - var curIndex = 0; - var index = 0; +// var res = this.evaluatedCountList; +var data1 = [], + data2 = [], + data3 = [], + legendData = []; +var curIndex = 0; +var index = 0; - for (var i = 0; i < res.length; i++) { - data1.push({ - value: res[i].value, - name: res[i].name, - }) - data2.push({ - value: res[i].value, - name: res[i].name, - itemStyle: { - opacity: 0.4, - }, - }) +for (var i = 0; i < res.length; i++) { + data1.push({ + value: res[i].value, + name: res[i].name, + }); + data2.push({ + value: res[i].value, + name: res[i].name, + itemStyle: { + opacity: 0.4, + }, + }); - data3.push({ - value: res[i].value, - name: res[i].name, - itemStyle: { - opacity: 0.1, - }, - }) - if ( res[i].name != "" ) - legendData.push(res[i].name); - } + data3.push({ + value: res[i].value, + name: res[i].name, + itemStyle: { + opacity: 0.1, + }, + }); + if (res[i].name != "") legendData.push(res[i].name); +} - var options = { - color: ['#2867FF', 'transparent', '#58C3FF', 'transparent', '#FF6A3B', 'transparent','#FDA474', 'transparent','#FEE58F','transparent', '#8DFEBF','transparent', '#66F4DC', 'transparent','#33E27D', 'transparent','#5D8CFE','transparent',], - title: [ - { - text:'999', - top: '27%', - textAlign: 'center', - left: '49%', - textStyle: { - color: '#ffffff', - fontSize: 30, - fontFamily: 'PangMenZhengDao', - }, - }, - { - text: '总数', - top: '38%', - textAlign: 'center', - left: '49%', - textStyle: { - color: 'rgba(242, 252, 253, 0.84)', - fontSize: 14, - fontWeight: 400, - }, +var options = { + color: [ + "#2867FF", + "#58C3FF", + "#FF6A3B", + "#FDA474", + "#FEE58F", + "#8DFEBF", + "#66F4DC", + "#33E27D", + "#5D8CFE", + ], + title: [ + { + text: "999", + top: "27%", + textAlign: "center", + left: "49%", + textStyle: { + color: "#ffffff", + fontSize: 30, + fontFamily: "PangMenZhengDao", }, - ], - grid: { - top: '38%', - left: '6%', - right: '6%', - bottom: '3%', - containLabel: true - }, - tooltip: { - trigger: 'item', - formatter: '{b} : {c}:{d}' }, - legend: { - orient: '', - left: '0%', - top: '68%', - itemWidth: 10, - itemHeight: 10, - icon:"circle", + { + text: "总数", + top: "38%", + textAlign: "center", + left: "49%", textStyle: { - color: "#ffffff", + color: "rgba(242, 252, 253, 0.84)", fontSize: 14, - lineHeight: 22, - rich: { - text: { - marginLeft:32, - fontSize: 14, - }, - number: { - fontSize: 14, - color: "#37E7FF", - marginLeft:32, - fontWeight: 'bold' - }, - unit: { - fontSize: 14, - } - } + fontWeight: 400, }, - data: legendData, - formatter(name) { - const newData = res; - let tarValue = 0; - let total = 0; - for (let i = 0; i < newData.length; i++) { - total += newData[i].value; - if (newData[i].name === name) { - tarValue = newData[i].value; - } - } - var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2); - const arr = name + ' ' + tarValue; - return `{text|${name}} {number|${percert}%}`;; + }, + ], + grid: { + top: "38%", + left: "6%", + right: "6%", + bottom: "3%", + containLabel: true, + }, + tooltip: { + trigger: "item", + // formatter: "{b} : {c}:{d}", + }, + legend: { + orient: "vertical", + height: "80px", + // left: "0%", + top: "68%", + itemWidth: 10, + itemHeight: 10, + icon: "circle", + textStyle: { + color: "#ffffff", + fontSize: 14, + lineHeight: 22, + rich: { + text: { + width: 80, + marginLeft: 32, + fontSize: 14, + }, + number: { + fontSize: 14, + color: "#37E7FF", + marginLeft: 32, + fontWeight: "bold", + }, + unit: { + fontSize: 14, + }, }, }, - series: [ - /** 饼图上刻度 */ + data: legendData, + formatter(name) { + const newData = res; + let tarValue = 0; + let total = 0; + for (let i = 0; i < newData.length; i++) { + total += newData[i].value; + if (newData[i].name === name) { + tarValue = newData[i].value; + } + } + var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2); + const arr = name + " " + tarValue; + return `{text|${name}} {number|${percert}%}`; + }, + pageIconColor: "#fff", + pageIconSize: 10, + pageTextStyle: { + color: "#fff", + }, + type: "scroll", + pageButtonPosition: "end", + }, + series: [ + /** 饼图上刻度 */ { - type: 'gauge', - center: ['50%', '35%'], - radius: '46%', // 错位调整此处 + type: "gauge", + center: ["50%", "35%"], + radius: "46%", // 错位调整此处 startAngle: 0, endAngle: 360, splitNumber: 52, axisLine: { show: false }, - splitLine: { + splitLine: { // length: 39, - length: '2', + length: "2", lineStyle: { width: 5, - color: '#5CC5FF' - } + color: "#5CC5FF", + }, }, axisTick: { show: false }, - axisLabel: { show: false } + axisLabel: { show: false }, }, - /** 绘制外部圆弧-2-开始圆点 */ + /** 绘制外部圆弧-2-开始圆点 */ { - type: 'custom', - coordinateSystem: 'none', + type: "custom", + coordinateSystem: "none", renderItem: (params, api) => { let x0 = api.getWidth() / 2; let y0 = api.getHeight() / 2 - 59; - let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50; + let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5; return { - type: 'circle', + type: "circle", shape: { /** 角度175° 外弧2开始角度 */ - cx: x0 + r * Math.cos((350 + -angle) * Math.PI / 180), - cy: y0 + r * Math.sin((350 + -angle) * Math.PI / 180), - r: 4 + cx: x0 + r * Math.cos(((350 + -angle) * Math.PI) / 180), + cy: y0 + r * Math.sin(((350 + -angle) * Math.PI) / 180), + r: 4, }, style: { - fill: '#5BC4FF', - stroke: '#5BC4FF' + fill: "#5BC4FF", + stroke: "#5BC4FF", }, - silent: true - } + silent: true, + }; }, - data: [0] + data: [0], }, - { - type: 'custom', - coordinateSystem: 'none', - renderItem: (params, api) => { - return { - type: 'arc', - shape: { - cx: api.getWidth() / 2, - cy: api.getHeight() / 2 - 59, - r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50, - startAngle: (350 + -angle) * Math.PI / 180, - endAngle: (120 + -angle) * Math.PI / 180 - }, - style: { - fill: 'transparent', - stroke: '#5BC4FF66', - lineWidth: 2.6 - }, - silent: true - } - }, - data: [0] + { + type: "custom", + coordinateSystem: "none", + renderItem: (params, api) => { + return { + type: "arc", + shape: { + cx: api.getWidth() / 2, + cy: api.getHeight() / 2 - 59, + r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5, + startAngle: ((350 + -angle) * Math.PI) / 180, + endAngle: ((120 + -angle) * Math.PI) / 180, + }, + style: { + fill: "transparent", + stroke: "#5BC4FF66", + lineWidth: 2.6, + }, + silent: true, + }; }, - { - type: 'custom', - coordinateSystem: 'none', - renderItem: (params, api) => { - let x0 = api.getWidth() / 2; - let y0 = api.getHeight() / 2 - 59; - let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50; - return { - type: 'circle', - shape: { - /** 角度175° 外弧2开始角度 */ - cx: x0 + r * Math.cos((150 + -angle) * Math.PI / 180), - cy: y0 + r * Math.sin((150 + -angle) * Math.PI / 180), - r: 4 - }, - style: { - fill: '#5BC4FF', - stroke: '#5BC4FF' - }, - silent: true - } - }, - data: [0] + data: [0], + }, + { + type: "custom", + coordinateSystem: "none", + renderItem: (params, api) => { + let x0 = api.getWidth() / 2; + let y0 = api.getHeight() / 2 - 59; + let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5; + return { + type: "circle", + shape: { + /** 角度175° 外弧2开始角度 */ + cx: x0 + r * Math.cos(((150 + -angle) * Math.PI) / 180), + cy: y0 + r * Math.sin(((150 + -angle) * Math.PI) / 180), + r: 4, + }, + style: { + fill: "#5BC4FF", + stroke: "#5BC4FF", + }, + silent: true, + }; }, - { - type: 'custom', - coordinateSystem: 'none', - renderItem: (params, api) => { - return { - type: 'arc', - shape: { - cx: api.getWidth() / 2, - cy: api.getHeight() / 2 - 59, - r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50, - startAngle: (150 + -angle) * Math.PI / 180, - endAngle: (-30 + -angle) * Math.PI / 180 - }, - style: { - fill: 'transparent', - stroke: '#5BC4FF66', - lineWidth: 2.6 - }, - silent: true - } + data: [0], + }, + { + type: "custom", + coordinateSystem: "none", + renderItem: (params, api) => { + return { + type: "arc", + shape: { + cx: api.getWidth() / 2, + cy: api.getHeight() / 2 - 59, + r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5, + startAngle: ((150 + -angle) * Math.PI) / 180, + endAngle: ((-30 + -angle) * Math.PI) / 180, }, - data: [0] - }, - { - type: 'custom', - coordinateSystem: 'none', - renderItem: (params, api) => { - let x0 = api.getWidth() / 2; - let y0 = api.getHeight() / 2 - 59; - let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56; - return { - type: 'circle', - shape: { - /** 角度175° 外弧2开始角度 */ - cx: x0 + r * Math.cos((590 + -angle) * Math.PI / 180), - cy: y0 + r * Math.sin((590 + -angle) * Math.PI / 180), - r: 4 - }, - style: { - fill: '#5BC4FF', - stroke: '#5BC4FF' - }, - silent: true - } - }, - data: [0] + style: { + fill: "transparent", + stroke: "#5BC4FF66", + lineWidth: 2.6, + }, + silent: true, + }; }, - { - type: 'custom', - coordinateSystem: 'none', - renderItem: (params, api) => { - return { - type: 'arc', - shape: { - cx: api.getWidth() / 2, - cy: api.getHeight() / 2 - 59, - r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56, - startAngle: (590 + -angle) * Math.PI / 180, - endAngle: (350 + -angle) * Math.PI / 180 - }, - style: { - fill: 'transparent', - stroke: '#5BC4FF66', - lineWidth: 2.6 - }, - silent: true - } - }, - data: [0] + data: [0], + }, + { + type: "custom", + coordinateSystem: "none", + renderItem: (params, api) => { + let x0 = api.getWidth() / 2; + let y0 = api.getHeight() / 2 - 59; + let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56; + return { + type: "circle", + shape: { + /** 角度175° 外弧2开始角度 */ + cx: x0 + r * Math.cos(((590 + -angle) * Math.PI) / 180), + cy: y0 + r * Math.sin(((590 + -angle) * Math.PI) / 180), + r: 4, + }, + style: { + fill: "#5BC4FF", + stroke: "#5BC4FF", + }, + silent: true, + }; }, - { - type: 'custom', - coordinateSystem: 'none', - renderItem: (params, api) => { - let x0 = api.getWidth() / 2; - let y0 = api.getHeight() / 2 - 59; - let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56; - return { - type: 'circle', - shape: { - /** 角度175° 外弧2开始角度 */ - cx: x0 + r * Math.cos((90 + -angle) * Math.PI / 180), - cy: y0 + r * Math.sin((90 + -angle) * Math.PI / 180), - r: 4 - }, - style: { - fill: '#5BC4FF', - stroke: '#5BC4FF' - }, - silent: true - } - }, - data: [0] + data: [0], + }, + { + type: "custom", + coordinateSystem: "none", + renderItem: (params, api) => { + return { + type: "arc", + shape: { + cx: api.getWidth() / 2, + cy: api.getHeight() / 2 - 59, + r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56, + startAngle: ((590 + -angle) * Math.PI) / 180, + endAngle: ((350 + -angle) * Math.PI) / 180, + }, + style: { + fill: "transparent", + stroke: "#5BC4FF66", + lineWidth: 2.6, + }, + silent: true, + }; }, - { - type: 'custom', - coordinateSystem: 'none', - renderItem: (params, api) => { - return { - type: 'arc', - shape: { - cx: api.getWidth() / 2, - cy: api.getHeight() / 2 - 59, - r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56, - startAngle: (90 + -angle) * Math.PI / 180, - endAngle: (160 + -angle) * Math.PI / 180 - }, - style: { - fill: 'transparent', - stroke: '#5BC4FF66', - lineWidth: 2.6 - }, - silent: true - } - }, - data: [0] + data: [0], + }, + { + type: "custom", + coordinateSystem: "none", + renderItem: (params, api) => { + let x0 = api.getWidth() / 2; + let y0 = api.getHeight() / 2 - 59; + let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56; + return { + type: "circle", + shape: { + /** 角度175° 外弧2开始角度 */ + cx: x0 + r * Math.cos(((90 + -angle) * Math.PI) / 180), + cy: y0 + r * Math.sin(((90 + -angle) * Math.PI) / 180), + r: 4, + }, + style: { + fill: "#5BC4FF", + stroke: "#5BC4FF", + }, + silent: true, + }; }, - { - type: 'pie', - radius: ['45%', '40%'], - center: ['50%', '35%'], - z: 10, - label: { - show: false, - position: 'center', - formatter: (params) => { - return params.name + "\r\n" + params.value + data: [0], + }, + { + type: "custom", + coordinateSystem: "none", + renderItem: (params, api) => { + return { + type: "arc", + shape: { + cx: api.getWidth() / 2, + cy: api.getHeight() / 2 - 59, + r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56, + startAngle: ((90 + -angle) * Math.PI) / 180, + endAngle: ((160 + -angle) * Math.PI) / 180, }, - rich: { - total: { - fontSize: 16, - color: '#04F5FE', - }, - efficiency: { - fontSize: 12, - color: '#00FD6D', - }, + style: { + fill: "transparent", + stroke: "#5BC4FF66", + lineWidth: 2.6, }, - color: '#FFFFFF', - fontSize: 12, - lineHeight: 16, + silent: true, + }; + }, + data: [0], + }, + { + type: "pie", + radius: ["45%", "40%"], + center: ["50%", "35%"], + z: 10, + label: { + show: false, + position: "center", + formatter: (params) => { + return params.name + "\r\n" + params.value; }, - data: data1, - labelLine: { - show: false, + rich: { + total: { + fontSize: 16, + color: "#04F5FE", + }, + efficiency: { + fontSize: 12, + color: "#00FD6D", + }, }, - itemStyle: { - normal: { - borderWidth: 6, - shadowBlur: 10, - borderRadius: 50, // 圆角 - } - } + color: "#FFFFFF", + fontSize: 12, + lineHeight: 16, }, - { - type: 'pie', - radius: ['29%', '39%'], - center: ['50%', '35%'], - label: { - show: false, + data: data1, + labelLine: { + show: false, + }, + itemStyle: { + normal: { + borderRadius: "5", + borderWidth: 4, + borderType: "solid", + borderColor: "#0C2D3A", }, - data: data2, - labelLine: { - show: false, + }, + }, + { + type: "pie", + radius: ["29%", "39%"], + center: ["50%", "35%"], + label: { + show: false, + }, + data: data2, + labelLine: { + show: false, + }, + itemStyle: { + normal: { + borderRadius: "5", + borderWidth: 4, + borderType: "solid", + borderColor: "#0C2D3A", }, - itemStyle: { - normal: { - borderWidth: 6, - shadowBlur: 10, - borderRadius: 0, // 圆角 - } - } }, - ], - - }; + }, + ], +}; - export default options \ No newline at end of file +export default options; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/nucleusThrough/assets/charts3.js b/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/nucleusThrough/assets/charts3.js index a32f9e85..edac1849 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/nucleusThrough/assets/charts3.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/nucleusThrough/assets/charts3.js @@ -19,25 +19,25 @@ let data2 = [120, 340, 750, 600, 400, 700, 900, 200, 540, 320, 370, 500]; let data3 = [200, 530, 920, 400, 600, 700, 300, 800, 900, 120, 570, 800]; let options = { tooltip: { - show: false, + show: true, trigger: "axis", - axisPointer: { - // 坐标轴指示器，坐标轴触发有效 - type: "shadow", // 默认为直线，可选为：'line' | 'shadow' - }, - textStyle: { - color: "#fff", - fontSize: 14, - }, - backgroundColor: "rgba(3, 31, 71, .0)", //设置背景颜色 - borderColor: "rgba(3, 31, 71, .0)", - formatter: "健康监测
{b1}：{c1}人", + // axisPointer: { + // // 坐标轴指示器，坐标轴触发有效 + // type: "shadow", // 默认为直线，可选为：'line' | 'shadow' + // }, + // textStyle: { + // color: "#fff", + // fontSize: 14, + // }, + // backgroundColor: "rgba(3, 31, 71, .0)", //设置背景颜色 + // borderColor: "rgba(3, 31, 71, .0)", + // formatter: "健康监测
{b1}：{c1}人", }, grid: { - left: "2%", - right: "4%", - top: "20%", - bottom: "10%", + left: "0", + right: "0", + top: "80px", + bottom: "25px", containLabel: true, }, xAxis: { @@ -51,7 +51,7 @@ let options = { }, axisLine: { lineStyle: { - color: "#1C82C5", + color: "#2CC9EC", }, }, axisLabel: { @@ -60,17 +60,23 @@ let options = { rotate: "1", margin: "20", textStyle: { - fontSize: 12, - color: "#50A2C1", + fontSize: 10, + color: "#fff", }, }, }, yAxis: [ { - min: 0, + name: "(起)", + nameTextStyle: { + color: "#fff", + fontSize: 10, + align: "right", + verticalAlign: "center", + }, axisLine: { lineStyle: { - color: "#1C82C5", + color: "#1D7B93", }, }, splitLine: { @@ -81,9 +87,9 @@ let options = { }, }, axisLabel: { - color: "#DEEBFF", + color: "#fff", textStyle: { - fontSize: 12, + fontSize: 10, }, }, axisTick: { diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/nucleusThrough/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/nucleusThrough/index.vue index 0c6f1fe6..ebc29771 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/nucleusThrough/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/nucleusThrough/index.vue @@ -1,54 +1,70 @@ - + - - - \ No newline at end of file diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsDay/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsDay/assets/charts.js index 3bff0d09..9991db10 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsDay/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsDay/assets/charts.js @@ -1,271 +1,302 @@ - /* 数据 */ -let nameList = ["00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00"]; // 类别 -let valueList = [800, 520, 650, 950, 420, 600, 450, 720, 303, 503 , 203 ,703 , 903 ]; // 人数 -var yList = [ "1000","800","轻度拥堵","基本畅通","畅通"] +let nameList = [ + "00:00", + "02:00", + "04:00", + "06:00", + "08:00", + "10:00", + "12:00", + "14:00", + "16:00", + "18:00", + "20:00", + "22:00", +]; // 类别 +let valueList = [ + 800, 520, 650, 950, 420, 600, 450, 720, 303, 503, 203, 703, 903, +]; // 人数 +var yList = ["1000", "800", "轻度拥堵", "基本畅通", "畅通"]; /* 数据整合 */ let dataList = []; nameList.map((item, index) => { - if (index === 4) { - dataList.push({ - name: item, - value: valueList[index], - itemStyle: { - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [{ - offset: 0, color: '#FFB904' // 0% 处的颜色 - }, { - offset: 1, color: '#FF6969' // 100% 处的颜色 - }], - global: false // 缺省为 false + if (index === 4) { + dataList.push({ + name: item, + value: valueList[index], + itemStyle: { + color: { + type: "linear", + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 0, + color: "#FFB904", // 0% 处的颜色 + }, + { + offset: 1, + color: "#FF6969", // 100% 处的颜色 }, - borderRadius: 6 - }, - label: { show: false } - }) - } else { - dataList.push({ - name: item, - value: valueList[index], - itemStyle:{ - borderRadius: 6 - } - }) - } -}) + ], + global: false, // 缺省为 false + }, + borderRadius: 6, + }, + label: { show: false }, + }); + } else { + dataList.push({ + name: item, + value: valueList[index], + itemStyle: { + borderRadius: 6, + }, + }); + } +}); var options = { - legend: { - // orient: 'vertical', - icon: "circle", - itemHeight: 8, - itemWidth: 8, - top: "5%", - x: "right", - textStyle: { - color: "#fff", - }, + tooltip: { + show: true, + trigger: "axis", + }, + legend: { + // orient: 'vertical', + icon: "circle", + itemHeight: 8, + itemWidth: 8, + top: "20px", + x: "right", + textStyle: { + color: "#fff", }, - grid: { - top: '15%',//上边距 - right: '0',//右边距 - left: '0',//左边距 - bottom: "10%",//下边距 - containLabel: true, - }, - xAxis: { - type: 'category', - data: nameList, - axisTick: { - show: false //隐藏X轴刻度 - }, - axisLine: { - lineStyle: { - color: "rgba(49, 217, 255, 0.8)" - } - }, - axisLabel: { - show: true, - color: '#B6E6FF', - fontSize:8, - fontFamily: 'Source Han Sans CN-Regular', + }, + grid: { + top: "75px", //上边距 + right: "0", //右边距 + left: "0", //左边距 + bottom: "20px", //下边距 + containLabel: true, + }, + xAxis: { + type: "category", + data: nameList, + axisTick: { + show: false, //隐藏X轴刻度 + }, + axisLine: { + lineStyle: { + color: "rgba(49, 217, 255, 0.8)", }, - }, - yAxis: [{ - type: 'value', - name: "", - max: 1200, - min:0, - splitNumber:5, + }, + axisLabel: { + show: true, + color: "#fff", + fontSize: 10, + }, + }, + yAxis: [ + { + type: "value", + name: "(起)", nameTextStyle: { - color: '#B6E6FF', - fontSize: 13, - fontFamily: 'Source Han Sans CN-Regular', - align: "left", - verticalAlign: "center", + color: "#fff", + fontSize: 10, + align: "right", + verticalAlign: "center", }, axisLabel: { - fontSize: 13, - color: '#B6E6FF', - fontFamily: 'HarmonyOS Sans-Regular', - // formatter:function(value,index){ - // return yList[index] - // } + fontSize: 10, + color: "#fff", + // formatter:function(value,index){ + // return yList[index] + // } }, axisLine: { - show: false, + show: false, }, axisTick: { - show: false + show: false, }, splitLine: { - lineStyle: { - color: 'rgba(49, 217, 255, 0.5)', - } + lineStyle: { + color: "rgba(49, 217, 255, 0.5)", + }, + }, + }, + ], + series: [ + { + name: "情报板发布", + type: "line", + symbol: "circle", + symbolSize: 0, + smooth: true, + areaStyle: { + width: 4, + opacity: 0.25, + color: { + type: "linear", + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { offset: 0.389, color: "#32BB8A90" }, + { offset: 1, color: "#32BB8A00" }, + ], + global: false, + }, + }, + // yAxisIndex: 1, // 与第二个 y 轴关联 + itemStyle: { + color: "#32BB8A", + }, + lineStyle: { + width: 2, }, - }], - series: [ - { - name: '情报板发布', - type: 'line', - symbol: 'circle', - symbolSize: 0, - smooth: true, - areaStyle: { - width: 4, - opacity: 0.25, - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [ - { offset: 0.389, color: "#32BB8A90" }, - { offset: 1, color: "#32BB8A00" }, - ], - global: false, - }, - }, - // yAxisIndex: 1, // 与第二个 y 轴关联 - itemStyle: { - color: '#32BB8A', - }, - lineStyle: { - width:2, - }, - - data: [1000, 800, 520, 600, 900, 700, 700,1000, 800, 520, 600, 900, 700, 700], // 折线图的数据 - }, - { - name: '服务网站', - type: 'line', - symbol: 'circle', - symbolSize: 0, - // yAxisIndex: 1, // 与第二个 y 轴关联 - itemStyle: { - color: '#08BAF4', - }, - lineStyle: { - width: 2, - }, - smooth: true, - areaStyle: { - width: 4, - opacity: 0.25, - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [ - { offset: 0.389, color: "#08BAF490" }, - { offset: 1, color: "#08BAF400" }, - ], - global: false, - }, - }, - data: [600, 700, 900, 400, 500, 800, 600,600, 700, 900, 400, 500, 800, 600], // 折线图的数据 - }, - { - name: '微信发布', - type: 'line', - symbol: 'circle', - symbolSize: 0, - // yAxisIndex: 1, // 与第二个 y 轴关联 - itemStyle: { - color: '#E2BA74', - }, - smooth: true, - areaStyle: { - width: 4, - opacity: 0.25, - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [ - { offset: 0.389, color: "#E2BA7490" }, - { offset: 1, color: "#E2BA7400" }, - ], - global: false, - }, - }, - lineStyle: { - width: 2, - }, - data: [850, 810, 712, 580, 480, 480, 780,850, 810, 712, 580, 480, 480, 780], // 折线图的数据 - },{ - name: '微博发布', - type: 'line', - symbol: 'circle', - symbolSize: 0, - // yAxisIndex: 1, // 与第二个 y 轴关联 - itemStyle: { - color: '#51BFA4', - }, - smooth: true, - areaStyle: { - width: 4, - opacity: 0.25, - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [ - { offset: 0.389, color: "#51BFA490" }, - { offset: 1, color: "#51BFA400" }, - ], - global: false, - }, - }, - lineStyle: { - width: 2, - }, - data: [850, 810, 712, 580, 480, 480, 780,850, 810, 712, 580, 480, 480, 780], // 折线图的数据 - },{ - name: '短信发布', - type: 'line', - symbol: 'circle', - symbolSize: 0, - // yAxisIndex: 1, // 与第二个 y 轴关联 - itemStyle: { - color: '#08BAF4', - }, - smooth: true, - areaStyle: { - width: 4, - opacity: 0.25, - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [ - { offset: 0.389, color: "#08BAF490" }, - { offset: 1, color: "#08BAF400" }, - ], - global: false, - }, - }, - lineStyle: { - width: 2, - }, - data: [850, 410, 712, 680, 50, 280, 480,850, 810, 712, 580, 480, 480, 780], // 折线图的数据 - }, - ] -} + data: [ + 1000, 800, 520, 600, 900, 700, 700, 1000, 800, 520, 600, 900, 700, 700, + ], // 折线图的数据 + }, + { + name: "服务网站", + type: "line", + symbol: "circle", + symbolSize: 0, + + // yAxisIndex: 1, // 与第二个 y 轴关联 + itemStyle: { + color: "#08BAF4", + }, + lineStyle: { + width: 2, + }, + smooth: true, + areaStyle: { + width: 4, + opacity: 0.25, + color: { + type: "linear", + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { offset: 0.389, color: "#08BAF490" }, + { offset: 1, color: "#08BAF400" }, + ], + global: false, + }, + }, + data: [ + 600, 700, 900, 400, 500, 800, 600, 600, 700, 900, 400, 500, 800, 600, + ], // 折线图的数据 + }, + { + name: "微信发布", + type: "line", + symbol: "circle", + symbolSize: 0, + // yAxisIndex: 1, // 与第二个 y 轴关联 + itemStyle: { + color: "#E2BA74", + }, + smooth: true, + areaStyle: { + width: 4, + opacity: 0.25, + color: { + type: "linear", + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { offset: 0.389, color: "#E2BA7490" }, + { offset: 1, color: "#E2BA7400" }, + ], + global: false, + }, + }, + lineStyle: { + width: 2, + }, + data: [ + 850, 810, 712, 580, 480, 480, 780, 850, 810, 712, 580, 480, 480, 780, + ], // 折线图的数据 + }, + { + name: "微博发布", + type: "line", + symbol: "circle", + symbolSize: 0, + // yAxisIndex: 1, // 与第二个 y 轴关联 + itemStyle: { + color: "#51BFA4", + }, + smooth: true, + areaStyle: { + width: 4, + opacity: 0.25, + color: { + type: "linear", + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { offset: 0.389, color: "#51BFA490" }, + { offset: 1, color: "#51BFA400" }, + ], + global: false, + }, + }, + lineStyle: { + width: 2, + }, + data: [ + 850, 810, 712, 580, 480, 480, 780, 850, 810, 712, 580, 480, 480, 780, + ], // 折线图的数据 + }, + { + name: "短信发布", + type: "line", + symbol: "circle", + symbolSize: 0, + // yAxisIndex: 1, // 与第二个 y 轴关联 + itemStyle: { + color: "#08BAF4", + }, + smooth: true, + areaStyle: { + width: 4, + opacity: 0.25, + color: { + type: "linear", + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { offset: 0.389, color: "#08BAF490" }, + { offset: 1, color: "#08BAF400" }, + ], + global: false, + }, + }, + lineStyle: { + width: 2, + }, + data: [ + 850, 410, 712, 680, 50, 280, 480, 850, 810, 712, 580, 480, 480, 780, + ], // 折线图的数据 + }, + ], +}; export default options; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsMonth/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsMonth/assets/charts.js index b5d032e2..c0b1c0e7 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsMonth/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsMonth/assets/charts.js @@ -1,271 +1,293 @@ - /* 数据 */ -let nameList = ["00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00"]; // 类别 -let valueList = [800, 520, 650, 950, 420, 600, 450, 720, 303, 503 , 203 ,703 , 903 ]; // 人数 -var yList = [ "1000","800","轻度拥堵","基本畅通","畅通"] +let nameList = [ + "00:00", + "02:00", + "04:00", + "06:00", + "08:00", + "10:00", + "12:00", + "14:00", + "16:00", + "18:00", + "20:00", + "22:00", +]; // 类别 +let valueList = [ + 800, 520, 650, 950, 420, 600, 450, 720, 303, 503, 203, 703, 903, 903, +]; // 人数 +var yList = ["1000", "800", "轻度拥堵", "基本畅通", "畅通"]; /* 数据整合 */ let dataList = []; nameList.map((item, index) => { - if (index === 4) { - dataList.push({ - name: item, - value: valueList[index], - itemStyle: { - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [{ - offset: 0, color: '#FFB904' // 0% 处的颜色 - }, { - offset: 1, color: '#FF6969' // 100% 处的颜色 - }], - global: false // 缺省为 false + if (index === 4) { + dataList.push({ + name: item, + value: valueList[index], + itemStyle: { + color: { + type: "linear", + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 0, + color: "#FFB904", // 0% 处的颜色 + }, + { + offset: 1, + color: "#FF6969", // 100% 处的颜色 }, - borderRadius: 6 - }, - label: { show: false } - }) - } else { - dataList.push({ - name: item, - value: valueList[index], - itemStyle:{ - borderRadius: 6 - } - }) - } -}) + ], + global: false, // 缺省为 false + }, + borderRadius: 6, + }, + label: { show: false }, + }); + } else { + dataList.push({ + name: item, + value: valueList[index], + itemStyle: { + borderRadius: 6, + }, + }); + } +}); var options = { - legend: { - // orient: 'vertical', - icon: "circle", - itemHeight: 8, - itemWidth: 8, - top: "5%", - x: "right", - textStyle: { - color: "#fff", - }, + tooltip: { + show: true, + trigger: "axis", + }, + legend: { + // orient: 'vertical', + icon: "circle", + itemHeight: 8, + itemWidth: 8, + top: "5%", + x: "right", + textStyle: { + color: "#fff", }, - grid: { - top: '20%',//上边距 - right: '0',//右边距 - left: '0',//左边距 - bottom: "10%",//下边距 - containLabel: true, - }, - xAxis: { - type: 'category', - data: nameList, - axisTick: { - show: false //隐藏X轴刻度 - }, - axisLine: { - lineStyle: { - color: "rgba(49, 217, 255, 0.8)" - } - }, - axisLabel: { - show: true, - color: '#B6E6FF', - fontSize:8, - fontFamily: 'Source Han Sans CN-Regular', + }, + grid: { + top: "80px", //上边距 + right: "0", //右边距 + left: "0", //左边距 + bottom: "10px", //下边距 + containLabel: true, + }, + xAxis: { + type: "category", + data: nameList, + axisTick: { + show: false, //隐藏X轴刻度 + }, + axisLine: { + lineStyle: { + color: "rgba(49, 217, 255, 0.8)", }, - }, - yAxis: [{ - type: 'value', - name: "", - max: 1000, - min:0, - splitNumber:5, + }, + axisLabel: { + show: true, + color: "#fff", + fontSize: 10, + }, + }, + yAxis: [ + { + type: "value", + name: "(起)", nameTextStyle: { - color: '#B6E6FF', - fontSize: 13, - fontFamily: 'Source Han Sans CN-Regular', - align: "left", - verticalAlign: "center", + color: "#fff", + fontSize: 10, + align: "right", + verticalAlign: "center", }, axisLabel: { - fontSize: 13, - color: '#B6E6FF', - fontFamily: 'HarmonyOS Sans-Regular', - // formatter:function(value,index){ - // return yList[index] - // } + fontSize: 10, + color: "#fff", + // fontFamily: "HarmonyOS Sans-Regular", + // formatter:function(value,index){ + // return yList[index] + // } }, axisLine: { - show: false, + show: false, }, axisTick: { - show: false + show: false, }, splitLine: { - lineStyle: { - color: 'rgba(49, 217, 255, 0.5)', - } + lineStyle: { + color: "rgba(49, 217, 255, 0.5)", + }, + }, + }, + ], + series: [ + { + name: "情报板发布", + type: "line", + symbol: "circle", + symbolSize: 0, + smooth: true, + areaStyle: { + width: 4, + opacity: 0.25, + color: { + type: "linear", + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { offset: 0.389, color: "#51BFA490" }, + { offset: 1, color: "#51BFA400" }, + ], + global: false, + }, + }, + // yAxisIndex: 1, // 与第二个 y 轴关联 + itemStyle: { + color: "#51BFA4", + }, + lineStyle: { + width: 2, }, - }], - series: [ - { - name: '情报板发布', - type: 'line', - symbol: 'circle', - symbolSize: 0, - smooth: true, - areaStyle: { - width: 4, - opacity: 0.25, - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [ - { offset: 0.389, color: "#51BFA490" }, - { offset: 1, color: "#51BFA400" }, - ], - global: false, - }, - }, - // yAxisIndex: 1, // 与第二个 y 轴关联 - itemStyle: { - color: '#51BFA4', - }, - lineStyle: { - width:2, - }, - - data: [1000, 800, 520, 600, 900, 700, 700,1000, 800, 520, 600, 900, 700, 700], // 折线图的数据 - }, - { - name: '服务网站', - type: 'line', - symbol: 'circle', - symbolSize: 0, - // yAxisIndex: 1, // 与第二个 y 轴关联 - itemStyle: { - color: '#08BAF4', - }, - lineStyle: { - width: 2, - }, - smooth: true, - areaStyle: { - width: 4, - opacity: 0.25, - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [ - { offset: 0.389, color: "#08BAF490" }, - { offset: 1, color: "#08BAF400" }, - ], - global: false, - }, - }, - data: [600, 700, 900, 400, 500, 800, 600,600, 700, 900, 400, 500, 800, 600], // 折线图的数据 - }, - { - name: '微信发布', - type: 'line', - symbol: 'circle', - symbolSize: 0, - // yAxisIndex: 1, // 与第二个 y 轴关联 - itemStyle: { - color: '#E2BA74', - }, - smooth: true, - areaStyle: { - width: 4, - opacity: 0.25, - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [ - { offset: 0.389, color: "#E2BA7490" }, - { offset: 1, color: "#E2BA7400" }, - ], - global: false, - }, - }, - lineStyle: { - width: 2, - }, - data: [850, 810, 712, 580, 480, 480, 780,850, 810, 712, 580, 480, 480, 780], // 折线图的数据 - },{ - name: '微博发布', - type: 'line', - symbol: 'circle', - symbolSize: 0, - // yAxisIndex: 1, // 与第二个 y 轴关联 - itemStyle: { - color: '#FB6D07', - }, - smooth: true, - areaStyle: { - width: 4, - opacity: 0.25, - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [ - { offset: 0.389, color: "#FB6D0799" }, - { offset: 1, color: "#FB6D0700" }, - ], - global: false, - }, - }, - lineStyle: { - width: 2, - }, - data: [850, 810, 712, 580, 480, 480, 780,850, 810, 712, 580, 480, 480, 780], // 折线图的数据 - },{ - name: '短信发布', - type: 'line', - symbol: 'circle', - symbolSize: 0, - // yAxisIndex: 1, // 与第二个 y 轴关联 - itemStyle: { - color: '#07DEFB', - }, - smooth: true, - areaStyle: { - width: 4, - opacity: 0.25, - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [ - { offset: 0.389, color: "#07DEFB90" }, - { offset: 1, color: "#07DEFB00" }, - ], - global: false, - }, - }, - lineStyle: { - width: 2, - }, - data: [850, 410, 712, 680, 50, 280, 480,850, 810, 712, 580, 480, 480, 780], // 折线图的数据 - }, - ] -} + data: [1000, 800, 520, 600, 900, 700, 700, 1000, 800, 520, 600, 900], // 折线图的数据 + }, + { + name: "服务网站", + type: "line", + symbol: "circle", + symbolSize: 0, + + // yAxisIndex: 1, // 与第二个 y 轴关联 + itemStyle: { + color: "#08BAF4", + }, + lineStyle: { + width: 2, + }, + smooth: true, + areaStyle: { + width: 4, + opacity: 0.25, + color: { + type: "linear", + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { offset: 0.389, color: "#08BAF490" }, + { offset: 1, color: "#08BAF400" }, + ], + global: false, + }, + }, + data: [600, 700, 900, 400, 500, 800, 600, 600, 700, 900, 400, 500], // 折线图的数据 + }, + { + name: "微信发布", + type: "line", + symbol: "circle", + symbolSize: 0, + // yAxisIndex: 1, // 与第二个 y 轴关联 + itemStyle: { + color: "#E2BA74", + }, + smooth: true, + areaStyle: { + width: 4, + opacity: 0.25, + color: { + type: "linear", + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { offset: 0.389, color: "#E2BA7490" }, + { offset: 1, color: "#E2BA7400" }, + ], + global: false, + }, + }, + lineStyle: { + width: 2, + }, + data: [850, 810, 712, 580, 480, 480, 780, 850, 810, 712, 580, 480], // 折线图的数据 + }, + { + name: "微博发布", + type: "line", + symbol: "circle", + symbolSize: 0, + // yAxisIndex: 1, // 与第二个 y 轴关联 + itemStyle: { + color: "#FB6D07", + }, + smooth: true, + areaStyle: { + width: 4, + opacity: 0.25, + color: { + type: "linear", + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { offset: 0.389, color: "#FB6D0799" }, + { offset: 1, color: "#FB6D0700" }, + ], + global: false, + }, + }, + lineStyle: { + width: 2, + }, + data: [850, 810, 712, 580, 480, 480, 780, 850, 810, 712, 580, 480], // 折线图的数据 + }, + { + name: "短信发布", + type: "line", + symbol: "circle", + symbolSize: 0, + // yAxisIndex: 1, // 与第二个 y 轴关联 + itemStyle: { + color: "#07DEFB", + }, + smooth: true, + areaStyle: { + width: 4, + opacity: 0.25, + color: { + type: "linear", + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { offset: 0.389, color: "#07DEFB90" }, + { offset: 1, color: "#07DEFB00" }, + ], + global: false, + }, + }, + lineStyle: { + width: 2, + }, + data: [850, 410, 712, 680, 50, 280, 480, 850, 810, 712, 580, 480], // 折线图的数据 + }, + ], +}; export default options; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsMonth/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsMonth/index.vue index 5afcef2d..57d54279 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsMonth/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsMonth/index.vue @@ -1,54 +1,71 @@ - + - - - \ No newline at end of file +} + diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/index.vue index ef8fab4e..be27eb70 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/index.vue @@ -1,177 +1,166 @@ - - + + - \ No newline at end of file +} +