diff --git a/ruoyi-ui/src/common/menuData.js b/ruoyi-ui/src/common/menuData.js index 7c08946f..ebeccf37 100644 --- a/ruoyi-ui/src/common/menuData.js +++ b/ruoyi-ui/src/common/menuData.js @@ -115,7 +115,14 @@ export default [ name: "statisticalAnalysis", path: "/maintain/statisticalAnalysis", component: "maintenanceOperations/statisticalAnalysis/index.vue", - }] + }, + { + title: "设备查询", + name: "maintainQuery", + path: "/maintain/maintainQuery", + component: "maintenanceOperations/maintainQuery/index.vue", + } + ] }, { title: "公众服务", diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/assets/charts.js index ab52e40c..bcc12a76 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/assets/charts.js @@ -1,391 +1,176 @@ -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; //角度，用来做简单的动画效果的 - - 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, +import * as echarts from "echarts"; +var options = { + tooltip: { + showContent: true, + trigger: 'axis', + backgroundColor: 'rgba(8,36,68,.7)', + color: '#fff', + textStyle: { + color: '#fff', }, - }) - - data3.push({ - value: res[i].value, - name: res[i].name, - itemStyle: { - opacity: 0.1, + }, + legend: { + top: '5%', + right: '10', + icon: 'circle', + itemWidth: 10, + itemHeight: 10, + textStyle: { + color: '#fff', + fontSize: 12, }, - }) - if ( res[i].name != "" ) - legendData.push(res[i].name); - } - - var options = { - color: ['#5CC5FF', 'transparent', '#54EFD5', 'transparent', '#FD9666', 'transparent', '#5C8CFE', 'transparent', '#51D5AD', 'transparent'], - title: [ + }, + grid: { + left: '30%', + right: '20%', + top: '10%', + bottom: '10%', + // width: 250, + }, + xAxis: [ { - text:'999', - top: '25%', - textAlign: 'center', - left: '50%', - textStyle: { - color: '#ffffff', - fontSize: 30, - fontFamily: 'SourceHanSansCN', - }, + splitLine: { + show: false, + }, + type: 'value', + show: false, }, + ], + yAxis: [ { - text: '总数', - top: '38%', - textAlign: 'center', - left: '50%', - textStyle: { - color: 'rgba(242, 252, 253, 0.84)', - fontSize: 16, - fontFamily: 'SourceHanSansCN', - }, - }, - ], - 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, + splitLine: { + show: false, }, - number: { - fontSize: 14, - color: "#37E7FF", - marginLeft:32, - fontWeight: 'bold' + axisLine: { + //y轴 + show: false, }, - 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; - } - } - var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2); - const arr = name + ' ' + tarValue; - return `{text|${name}} {number|${percert}%}`;; - }, - }, - series: [ - /** 饼图上刻度 */ - { - type: 'gauge', - center: ['50%', '35%'], - radius: '40%', // 错位调整此处 - startAngle: 0, - endAngle: 360, - splitNumber: 52, - axisLine: { show: false }, - splitLine: { - // length: 39, - length: '2', - lineStyle: { - width: 5, - color: '#5CC5FF' - } - }, - axisTick: { show: false }, - axisLabel: { show: false } - }, - /** 绘制外部圆弧-2-开始圆点 */ - { - 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((350 + -angle) * Math.PI / 180), - cy: y0 + r * Math.sin((350 + -angle) * Math.PI / 180), - r: 4 + type: 'category', + axisTick: { + show: false, }, - style: { - fill: '#5BC4FF', - stroke: '#5BC4FF' + inverse: true, + data: [ + '大学城收费站', + '大学城收费站', + '大学城收费站', + '大学城收费站', + '大学城收费站', + ], + axisLabel: { + color: '#fff', + fontSize: 14, + margin:20, }, - 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.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) => { - 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] - }, - { - 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 + type: 'category', + inverse: true, + axisTick: 'none', + axisLine: 'none', + show: true, + axisLabel: { + textStyle: { + color: '#A7D6F4', + fontSize: '14', }, - silent: true - } }, - 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] - }, - { - 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] - }, - { - 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] - }, - { - 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: value, + data: [900, 380, 360, 340, 320], }, + ], + series: [ { - type: 'pie', - radius: ['45%', '39%'], - center: ['50%', '35%'], - z: 10, - label: { - show: false, - position: 'center', - formatter: (params) => { - return params.name + "\r\n" + params.value + name: '收费站限行（次）', + type: 'bar', + barGap: '120%', + barWidth: 10, // 柱子宽度 + showBackground: true, + MaxSize: 0, + backgroundStyle: { + color: '#0BA7DA32', }, - rich: { - total: { - fontSize: 16, - color: '#04F5FE', - }, - efficiency: { - fontSize: 12, - color: '#00FD6D', - }, + label: { + show: false, + // color: '#A7D6F4', + // fontSize: 14, + // distance: 20, // 距离 + // formatter: '{c} ', // 这里是数据展示的时候显示的数据 + // align: "center", + // position: [290, 0] + }, // 柱子上方的数值 + itemStyle: { + barBorderRadius: [0, 4, 4, 0], // 圆角（左上、右上、右下、左下） + color: new echarts.graphic.LinearGradient( + 1, + 0, + 0, + 0, + [ + { + offset: 0, + color: '#48d0ca', + }, + { + offset: 0.5, + color: '#61D8FF', + }, + { + offset: 1, + color: '#61D8FF00', + }, + ], + false + ), // 渐变 }, - color: '#FFFFFF', - fontSize: 12, - lineHeight: 16, - }, - data: data1, - labelLine: { - show: false, - }, - itemStyle: { - normal: { - borderWidth: 6, - shadowBlur: 10, - borderRadius: 50, // 圆角 - } - } - }, - { - type: 'pie', - radius: ['25%', '39%'], - center: ['50%', '35%'], - label: { - show: false, - }, - data: data2, - labelLine: { - show: false, - }, - itemStyle: { - normal: { - borderWidth: 6, - shadowBlur: 10, - borderRadius: 0, // 圆角 - } - } + data: [900, 380, 360, 340, 320], + }, + { + name: '收费站封闭（次）', + type: 'bar', + barWidth: 10, // 柱子宽度 + showBackground: true, + MaxSize: 0, + backgroundStyle: { + color: '#0BA7DA32', + }, + label: { + show: false, + // color: '#A7D6F4', + // fontSize: 14, + // distance: 20, // 距离 + // formatter: '{c} ', // 这里是数据展示的时候显示的数据 + // align: "center", + position: ['100%', 0] + }, // 柱子上方的数值 + itemStyle: { + barBorderRadius: [0, 4, 4, 0], // 圆角（左上、右上、右下、左下） + color: new echarts.graphic.LinearGradient( + 1, + 0, + 0, + 0, + [ + { + offset: 0, + color: '#FF6969', + }, + { + offset: 0.5, + color: '#FF696955', + }, + { + offset: 1, + color: '#FFB90410', + }, + ], + false + ), // 渐变 + }, + data: [900, 380, 360, 340, 320, 300, 280, 260, 400, 380, 360, 340, 320, 300, 280, 260], }, - ], + ], +}; - }; - export default options \ No newline at end of file +export default options; \ No newline at end of file diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/index.vue index 023484e6..30486d27 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/index.vue @@ -58,7 +58,7 @@ } } .charts { - height:376px; + height:326px; width: 100%; } diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/assets/charts.js index c4411f48..c51a29cd 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/assets/charts.js @@ -1,180 +1,317 @@ +import * as echarts from "echarts"; -/* 数据 */ -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 - }, - 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", +let xData = [ + "大学城-长清", + "长清-孝里", + "孝里-平阴北", + "平阴北-平阴", + "平阴-平阴南", + "平阴南-东平", + "东平-梁山东", + "梁山东-梁山", + "梁山-嘉祥西", + "梁山东-梁山", + ]; + let data1 = [200, 530, 920, 400, 600, 700, 300, 800, 900, 120]; + let data2= [120, 340, 750, 600, 400, 700, 900, 200, 540, 320]; + let data3 = [200, 530, 920, 400, 600, 700, 300, 800, 900, 120]; + let options = { + tooltip: { + show:false, + 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}人", }, - grid: { - top: '20%',//上边距 - right: '0',//右边距 - left: '0',//左边距 - bottom: "10%",//下边距 + grid: { + left: "2%", + right: "4%", + top: "10%", + bottom: "5%", containLabel: true, - }, - xAxis: { - type: 'category', - data: nameList, + }, + xAxis: { + data: xData, + show: true, axisTick: { - show: false //隐藏X轴刻度 + show: false, + lineStyle: { + color: "#fff", + }, }, axisLine: { - lineStyle: { - color: "rgba(49, 217, 255, 0.8)" - } + lineStyle: { + color: "#1C82C5", + }, }, axisLabel: { - show: true, - color: '#B6E6FF', - fontSize:8, - fontFamily: 'Source Han Sans CN-Regular', + interval: 0, + align: "center", + rotate: "1", + margin: "20", + textStyle: { + fontSize: 12, + color: "#50A2C1", + }, }, - }, - yAxis: [{ - type: 'value', - name: "", - max: 1000, - min:0, - splitNumber:5, - nameTextStyle: { - color: '#B6E6FF', - fontSize: 13, - fontFamily: 'Source Han Sans CN-Regular', - align: "left", - verticalAlign: "center", - }, - axisLabel: { - fontSize: 13, - color: '#B6E6FF', - fontFamily: 'HarmonyOS Sans-Regular', - // formatter:function(value,index){ - // return yList[index] - // } - }, - axisLine: { - show: false, + }, + yAxis: [ + { + min: 0, + axisLine: { + lineStyle: { + color: "#1C82C5", + }, + }, + splitLine: { + show: true, + lineStyle: { + color: "rgba(28, 130, 197, .3)", + type: "solid", + }, + }, + axisLabel: { + color: "#DEEBFF", + textStyle: { + fontSize: 12, + }, + }, + axisTick: { + show: false, + }, }, - axisTick: { - show: false + ], + legend: { + // orient: 'vertical', + icon: "circle", + itemHeight: 6, + itemWidth: 6, + top: "5%", + right: "10%", + textStyle: { + color: "#fff", }, - splitLine: { - lineStyle: { - color: 'rgba(49, 217, 255, 0.5)', - } + + data:[ + { + name:"交通特征", + itemStyle:{ + color:'#51BFA4', + }, + }, + { + name:"饱和度", + itemStyle:{ + color:'#08BAF4', + }, + }, + { + name:"拥挤度", + itemStyle:{ + color:'#E2BA74', + }, + } + ], + }, + series: [ + { + name: "饱和度", + type: "bar", + barWidth: "10px", + selectedMode:false, + select:{ + itemStyle:{ + + opacity: 1, + color: function (params) { + var a = params; + + return new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "#1AC5FD", // 0% 处的颜色 + }, + { + offset: 1, + color: "#003B4E", // 100% 处的颜色 + }, + ], + false + ); + }, + }, + }, + itemStyle: { + barBorderRadius: [10, 10, 10, 10], // 圆角（左上、右上、右下、左下） + // lenged文本 + opacity: 1, + color: function (params) { + var a = params.name; + console.log("==========a=============",a); + return new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "#00A3FF", // 0% 处的颜色 + }, + { + offset: 1, + color: "#00A3FF00", // 100% 处的颜色 + }, + ], + false + ); + }, + }, + data: data2, }, - }], - series: [ + // 下半截柱状图linear-gradient(180deg, #61D8FF 0%, #003B4E 100%); linear-gradient(180deg, #06D7B1 0%, #003B4E 100%) { - 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: "#32BB8A99" }, - { offset: 1, color: "#32BB8A00" }, - ], - global: false, + name: "交通特征", + type: "bar", + barWidth: "10px", + barGap: "120%", + selectedMode:false, + select:{ + itemStyle:{ + opacity: 1, + color: function (params) { + var a = params; + + return new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "#00E4BB53", // 0% 处的颜色 + }, + { + offset: 1, + color: "#00E4BB53", // 100% 处的颜色 + }, + ], + 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: '#E2BA74', - }, - 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: "##E2BA7490" }, - { offset: 1, color: "##E2BA7400" }, - ], - global: false, + }, + }, + itemStyle: { + // lenged文本 + barBorderRadius: [10, 10, 10, 10], // 圆角（左上、右上、右下、左下） + opacity: 1, + color: function (params) { + var a = params.name; + console.log("==========a=============",a); + return new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "#01D2EE", // 0% 处的颜色 + }, + { + offset: 1, + color: "#01D2EE00", // 100% 处的颜色 + }, + ], + false + ); + }, + }, + data: data1, + }, + // 进度条的小圆圈 +{ + name: "拥挤度", + type: "bar", + barWidth: "10px", + selectedMode:false, + select:{ + itemStyle:{ + opacity: 1, + color: function (params) { + var a = params; + + return new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "#1AC5FD", // 0% 处的颜色 + }, + { + offset: 1, + color: "#003B4E", // 100% 处的颜色 }, - }, - data: [600, 700, 900, 400, 500, 800, 600,600, 700, 900, 400, 500, 800, 600], // 折线图的数据 - }, - ] -} + ], + false + ); + }, + }, + }, + itemStyle: { + barBorderRadius: [10, 10, 10, 10], // 圆角（左上、右上、右下、左下） + // lenged文本 + opacity:1, + color: function (params) { + var a = params.name; + console.log("==========a=============",a); + return new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "#32BB8A", // 0% 处的颜色 + }, + { + offset: 1, + color: "#32BB8A00", // 100% 处的颜色 + }, + ], + false + ); + }, + }, + data: data2, +}, + { + name: '路段里程数', + stack: '我不叠加',//添加stack属性，相同的stack值的数据类型将会叠加不并列，值为自定义值 + type: 'line',//换为line 实现折线与柱状图 + data: data3, + color:"#E2BA74" + } + ], + }; + -export default options; + export default options; \ No newline at end of file diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/assets/charts2.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/assets/charts2.js new file mode 100644 index 00000000..d1a86dfd --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/assets/charts2.js @@ -0,0 +1,157 @@ +let zData = ["侧翻", "撞障碍物", "自燃", "追尾", "撞护栏", "货物洒落"]; +let lc = [450, 500, 250, 340,450, 500]; +let lc2 = [400, 550, 200, 140,400, 550]; +let options = { + + tooltip: { + show: true, + trigger: "axis", + backgroundColor: "rgba(17,95,182,0.5)", //设置背景颜色 + textStyle: { + color: "#fff", + }, + formatter: "{b}：{c}人", + }, + grid: { + right: "4%", + top: "12%", + left: "2%", + bottom: "0%", + containLabel: true, + }, + xAxis: { + type: "category", + boundaryGap: true, + data: zData, + axisLabel: { + interval: 0, + textStyle: { + color: "rgba(255, 255, 255, 0.80)", + fontSize: 16 + }, + }, + axisTick: { + //坐标轴刻度相关设置。 + show: false, + }, + axisLine: { + //坐标轴轴线相关设置 + lineStyle: { + color: "#fff", + }, + }, + splitLine: { + //坐标轴在 grid 区域中的分隔线。 + show: false, + }, + }, + yAxis: [ + { + type: "value", + splitNumber: 6, + axisLabel: { + show: true, + textStyle: { + color: "rgba(255, 255, 255, 0.90)", + fontSize: 16 + }, + }, + axisLine: { + show: false, + }, + axisTick: { + show: false, + }, + splitLine: { + show: true, + lineStyle: { + color: "rgba(255, 255, 255, 0.40)", + }, + }, + }, + ], + series: [ + { + name: "从业人员", + type: "pictorialBar", + stack: "数量", + label: { + normal: { + show: false, + position: "top", + textStyle: { + color: "#FFFFFF", + fontSize: 16, + }, + }, + }, + itemStyle: { + normal: { + color: { + type: "linear", + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 0, + color: "#0085FF", // 0% 处的颜色 + }, + { + offset: 1, + color: "#0085FF00", // 100% 处的颜色 + }, + ], + globalCoord: false, // 缺省为 false + } + }, + }, + symbol: "path://M48 0 L49 17 C52 72 68 125 96 173 H0 C25 125 41 73 46 19 L48 0Z", + data: lc, + }, + { + name: "去年同期数量", + type: "pictorialBar", + stack: "else", + barGap: "10%", + boundaryGap:"100%", + label: { + normal: { + show: false, + position: "top", + textStyle: { + color: "#FFFFFF", + fontSize: 16, + }, + }, + }, + itemStyle: { + normal: { + color: { + type: "linear", + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 0, + color: "#01D2EE", // 0% 处的颜色 + }, + { + offset: 1, + color: "rgba(0, 194, 255,0)", // 100% 处的颜色 + }, + ], + globalCoord: false, // 缺省为 false + } + }, + }, + symbol: "path://M48 0 L49 17 C52 72 68 125 96 173 H0 C25 125 41 73 46 19 L48 0Z", + data: lc2, + }, + ], +}; + +export default options; \ No newline at end of file diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/assets/charts3.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/assets/charts3.js new file mode 100644 index 00000000..a0a13223 --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/assets/charts3.js @@ -0,0 +1,144 @@ +const sxnja = [ + 400,400,400 + ]; + const sxnja2 = [ + 700,700,700 + ]; + + const minNumber = 90; + const minArray = []; + sxnja.map((value) => { + minArray.push(parseFloat((value - minNumber).toFixed(2))) + }) + console.log(minArray) + let xaxisData = [ + '客车', + '货车', + '专项车', + ]; + + var options = { + title: { + text: '单位/%', + top: '4%', + left: '3%', + textStyle: { + fontSize: '10px', + fontWeight: 300, + color: '#B5C5D4', + opacity: 0.8 + } + }, + tooltip: { + valueFormatter: function (value) { + return (value + minNumber).toFixed(2) + ' %'; + } + }, + legend: { + // orient: 'vertical', + icon: "circle", + itemHeight: 6, + itemWidth: 6, + top: "5%", + right: "0%", + textStyle: { + fontSize:10, + color: "#fff", + }, + }, + grid: { + left: '1%', + right: '0%', + top: '16%', + bottom: '0%', + containLabel: true + }, + xAxis: { + type: 'category', + data: xaxisData, + axisLine: { + show: true, + lineStyle: { + width: 1, + color: '#545454' + } + }, + axisTick: { + show: false + }, + axisLabel: { + color: '#B5C5D4', + fontSize: '10px', + interval: 0 + } + }, + yAxis: [ + { + // type: 'value', + // min: function (value) { + // return value.min*0.9; + // }, + type: 'value', + min: 0, + max:900, + splitNumber: 9, + // max: yAxisMax, + axisLine: { + show: false, + lineStyle: { + width: 1, + color: '#545454' + } + }, + splitLine: { + show: true, + lineStyle: { + color: '#B2C2D3', + opacity: 0.3, + type: 'dotted' + } + }, + axisTick: { + show: false + }, + axisLabel: { + color: '#B5C5D4', + fontSize: '12px', + formatter: (value) => { + return value + minNumber + } + } + } + ], + series: [ + { + name: '事件数量（起）', + data: minArray, + type: 'pictorialBar', + symbol: 'roundRect', + symbolRepeat: true, + symbolSize: [12, 5], + // symbolOffset: symbolOffset, + // barWidth:'40%', + itemStyle: { + color: '#20E7FF' + } + }, + { + barGap: "10%", + name: '平均处置时长（分钟）', + data: sxnja2 , + type: 'pictorialBar', + symbol: 'roundRect', + symbolRepeat: true, + symbolSize: [12, 5], + // symbolOffset: symbolOffset, + // barWidth:'40%', + itemStyle: { + color: '#20FFC9' + } + } + ] + }; + + export default options; \ No newline at end of file diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/index.vue index be895be9..5d21afca 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/index.vue @@ -1,7 +1,8 @@ @@ -26,6 +35,9 @@ import WgtTitle from "../../../../../perception/widgets/title"; import * as echarts from "echarts"; import chartsStatistics from "./assets/charts"; + import charts2 from "./assets/charts2"; + import charts3 from "./assets/charts3"; + export default { name: 'postTrendsMonth', components: { @@ -46,8 +58,14 @@ mounted() { setTimeout(() => { this.$nextTick(() => { - var myChart = echarts.init(document.getElementById('postTrendsMonth')); + var myChart = echarts.init(document.getElementById('chart1')); myChart.setOption(chartsStatistics); + + var myChart1 = echarts.init(document.getElementById('chart2')); + myChart1.setOption(charts2); + + var myChart2 = echarts.init(document.getElementById('chart3')); + myChart2.setOption(charts3); }); }); }, @@ -57,9 +75,32 @@ + \ No newline at end of file diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js index 5ee28cec..c9091b95 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js @@ -59,8 +59,11 @@ var options = { tooltip: { confine: true, textStyle: { - fontSize: 10 // 字体大小 + fontSize: 10, // 字体大小 + color:'#fff', }, + color:'#fff', + backgroundColor:"#064258", }, title:{ //圆环中间内容 text: '99% ',