diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/assets/charts.js index d3f76436..46e7091f 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/assets/charts.js @@ -28,7 +28,7 @@ var options = { ast: { align: "left", fontSize: 12, - width: 35, + width: 50, }, bst: { align: "left", @@ -36,6 +36,12 @@ var options = { marginLeft: 10, color: "#37E7FF", }, + cst: { + align: "left", + fontSize: 12, + marginLeft: 10, + color: "#37E7FF", + }, }, }, formatter: (params) => { @@ -47,9 +53,9 @@ var options = { let obj = echartsData.filter((it) => { return it.name == params; }); - return `{ast|${obj[0].name}} {bst|${Math.round( + return `{ast|${obj[0].name}} {bst|${Math.round( (obj[0].value / count) * 100 - )}%}`; + )}%} {cst|${obj[0].value}件}`; }, data: echartsData?.map((x) => x), }, diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/index.vue index d3e46290..bef82428 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/index.vue @@ -141,10 +141,10 @@ export default { context.lineWidth = 1; // 设置线段宽度 // 绘制圆角矩形 - drawRoundRect(context, 270, 36, 120, 24, 12, gr) - drawRoundRect(context, 270, 63, 120, 24, 12, gr) - drawRoundRect(context, 270, 90, 120, 24, 12, gr) - drawRoundRect(context, 270, 117, 120, 24, 12, gr) + drawRoundRect(context, 242, 36, 180, 24, 12, gr) + drawRoundRect(context, 242, 63, 180, 24, 12, gr) + drawRoundRect(context, 242, 90, 180, 24, 12, gr) + drawRoundRect(context, 242, 117, 180, 24, 12, gr) }); }); }, diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js index 9637be33..2547cc56 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js @@ -115,9 +115,9 @@ var options = { width: 70, color: "#fff", fontSize: 26, - align: 'center' - } - } + align: "center", + }, + }, }, subtextStyle: { fontSize: 18, @@ -130,26 +130,34 @@ var options = { }, color: colorList, legend: { - top: "15%", - right: -5, + top: 10, + right: 0, orient: "vertical", //改变排列方式 icon: "circle", //改变legend小图标形状 itemGap: 20, // 设置legend的间距 itemWidth: 10, // 设置宽度 itemHeight: 10, // 设置高度 textStyle: { - right: -19, - fontSize: 30, + right: 50, + fontSize: 12, color: "#fff", rich: { a: { + align: "left", width: 45, fontSize: 12, }, b: { - fontSize: 14, + align: "left", + fontSize: 12, + color: "#37E7FF", + marginLeft: 0, + }, + c: { + align: "left", + fontSize: 12, color: "#37E7FF", - marginLeft: -0, + marginLeft: 0, }, }, }, 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 6e1b0a1b..0f313649 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 @@ -297,9 +297,10 @@ export default { } var arr = [ '{a|' + name + '}', - '{b|' + ((target / total) * 100).toFixed(2) + '%}', + '{b|' + ((target / total) * 100).toFixed(2) + '%} ', + "{c|" + target + "件}", ] - return arr.join(' ') + return arr.join(' ') }; chart2.title.text = `{zb|${total}}`; 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 1ab98b94..94541e3e 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 @@ -134,7 +134,8 @@ var options = { } var arr = [ "{ast|" + name + "}", - "{bst|" + (target * 100).toFixed(0) + "%}", + "{bst|" + (target * 100).toFixed(0) + "% }", + "{cst|" + target+ "件}", ]; return arr.join(" "); }, @@ -153,6 +154,13 @@ var options = { marginLeft: 20, color: "#37E7FF", }, + cst: { + align: "left", + fontSize: 12, + marginLeft: 30, + width: 60, + color: "#37E7FF", + }, }, }, }, diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue index 76be9cca..92eb61d0 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue @@ -175,12 +175,12 @@ export default { let gr = context.createLinearGradient(230, 0, 360, 0); gr.addColorStop(1, 'rgba(92,197,255,0)'); gr.addColorStop(0, 'rgba(92,197,255,0.3)'); - drawRoundRect(context, 248, 15, 134, 21, 12, gr); - drawRoundRect(context, 248, 42, 134, 21, 12, gr); - drawRoundRect(context, 248, 69, 134, 21, 12, gr); - drawRoundRect(context, 248, 96, 134, 21, 12, gr); - drawRoundRect(context, 248, 123, 134, 21, 12, gr); - drawRoundRect(context, 248, 150, 134, 21, 12, gr); + drawRoundRect(context, 214, 15, 134, 21, 12, gr); + drawRoundRect(context, 214, 42, 134, 21, 12, gr); + drawRoundRect(context, 214, 69, 134, 21, 12, gr); + drawRoundRect(context, 214, 96, 134, 21, 12, gr); + drawRoundRect(context, 214, 123, 134, 21, 12, gr); + drawRoundRect(context, 214, 150, 134, 21, 12, gr); context.lineWidth = 1; // 设置线段宽度 diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/assets/charts.js index bc311a9f..4c9725b9 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/assets/charts.js @@ -24,7 +24,7 @@ var options = { orient: "vertical", top: "10", icon: "circle", - right: 40, + right: 0, itemGap: 16, itemWidth: 8, itemHeight: 8, @@ -33,14 +33,21 @@ var options = { fontSize: 12, rich: { ast: { - align: "left", + marginLeft: 0, fontSize: 12, - width: 30, + width: 40, }, bst: { align: "left", fontSize: 12, - marginLeft: 20, + color: "#37E7FF", + width: 30, + }, + cst: { + align: "right", + fontSize: 12, + width: 40, + // marginLeft: 20, color: "#37E7FF", }, }, @@ -54,9 +61,9 @@ var options = { return it.name == params; }); // console.log(obj); - return `{ast|${obj[0].name}} {bst|${ + return `{ast|${obj[0].name}} {bst|${ Math.round((obj[0].value / count) * 100) || 0 - }%}`; + }%} {cst|${obj[0].value}件}`; }, // data: typeAnalysisData?.map(x => x.name), }, @@ -70,7 +77,7 @@ var options = { radius: "70%", center: ["30%", "50%"], clockwise: false, - roseType: "radius", + // roseType: "area", startAngle1: 180, label: { show: false, @@ -114,7 +121,7 @@ var options = { emphasis: { scale: false }, clockwise: false, center: ["30%", "50%"], - roseType: "radius", + // roseType: "area", label: { show: false, position: "outside",