From 448092340483f991e76a6db180ab0934d6507ff1 Mon Sep 17 00:00:00 2001 From: donghao Date: Fri, 15 Aug 2025 17:23:47 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84=E6=95=B0=E6=8D=AE?= =?UTF-8?q?=E5=B1=95=E7=A4=BA=E9=A6=96=E9=A1=B5=E7=9A=84=E5=B7=A6=E4=BE=A7?= =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E4=BA=A4=E4=BA=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Charts/appearanceDailyAlertChart.vue | 24 ++++ .../Charts/appearanceDailyDetectionChart.vue | 129 ++++++++++++++++++ .../Charts/appearanceDailyDistanceChart.vue | 0 .../Charts/appearanceHourlyDistanceChart.vue | 0 src/components/Charts/poleMonitorChart.vue | 120 +++++++++------- src/components/Charts/totalChart.vue | 16 +-- src/components/Charts/vehicleMonitorChart.vue | 48 +++---- src/views/dashboard/AppearanceMonitor.vue | 4 +- src/views/dashboard/DataOverview.vue | 1 + 9 files changed, 250 insertions(+), 92 deletions(-) create mode 100644 src/components/Charts/appearanceDailyAlertChart.vue create mode 100644 src/components/Charts/appearanceDailyDetectionChart.vue delete mode 100644 src/components/Charts/appearanceDailyDistanceChart.vue delete mode 100644 src/components/Charts/appearanceHourlyDistanceChart.vue diff --git a/src/components/Charts/appearanceDailyAlertChart.vue b/src/components/Charts/appearanceDailyAlertChart.vue new file mode 100644 index 0000000..86a35a5 --- /dev/null +++ b/src/components/Charts/appearanceDailyAlertChart.vue @@ -0,0 +1,24 @@ + + + diff --git a/src/components/Charts/appearanceDailyDetectionChart.vue b/src/components/Charts/appearanceDailyDetectionChart.vue new file mode 100644 index 0000000..e30fe85 --- /dev/null +++ b/src/components/Charts/appearanceDailyDetectionChart.vue @@ -0,0 +1,129 @@ + + + diff --git a/src/components/Charts/appearanceDailyDistanceChart.vue b/src/components/Charts/appearanceDailyDistanceChart.vue deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/Charts/appearanceHourlyDistanceChart.vue b/src/components/Charts/appearanceHourlyDistanceChart.vue deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/Charts/poleMonitorChart.vue b/src/components/Charts/poleMonitorChart.vue index 8460607..65cff56 100644 --- a/src/components/Charts/poleMonitorChart.vue +++ b/src/components/Charts/poleMonitorChart.vue @@ -38,6 +38,29 @@ const chartRefs = ref[]>([]); // ]; // 数据 +const colors = [ + [ + { + offset: 0, + color: "rgba(14, 189, 232, 1)", // 0% 处的颜色 + }, + { + offset: 1, + color: "#195EE9", // 100% 处的颜色 + }, + ], + [ + { + offset: 0, + color: "#FFD682", // 0% 处的颜色 + }, + { + offset: 1, + color: "#FEB217", // 100% 处的颜色 + }, + ], +]; + const chartData = [ { value: 65, name: "撑杆折断", color: "#488AFE" }, { value: 35, name: "撑杆弯曲", color: "#F7D36D" }, @@ -77,59 +100,56 @@ function Pie() { const initMainChart = () => { const chartDom = document.getElementById("poleMonitorChart"); const mainChart = echarts.init(chartDom); - + const centerPoint = ["50%", "41%"]; const option = { - backgroundColor: "#031845", + backgroundColor: "transparent", tooltip: { trigger: "item", - formatter: "{b} : {d}%
{c}", + formatter: " {b} : {d}%
{c}", }, legend: { orient: "horizontal", - icon: "circle", + // icon: "circle", bottom: 20, x: "center", textStyle: { color: "#fff", }, - data: ["呜哈哈", "穷哈哈", "吾叉叉", "穷叉叉"], + data: ["撑杆折断", "撑杆弯曲"], }, series: [ { type: "pie", - radius: ["35%", "50%"], - center: ["50%", "50%"], - color: [ - "#0E7CE2", - "#FF8352", - "#E271DE", - "#F8456B", - "#00FFFF", - "#4AEAB0", - ], + radius: ["45%", "68%"], + center: centerPoint, + color: colors, itemStyle: { normal: { borderColor: "#031845", borderWidth: 10, + //渲染环形渐变色 + color: function (params) { + return { + //type: 'linear', + x: 0, + y: 1, + x2: 1, + y2: 0, + colorStops: colors[params.dataIndex], // 100% 处的颜色 + //globalCoord: false // 缺省为 false + }; + }, }, }, data: [ { - value: 335, - name: "呜哈哈", + value: 735, + name: "撑杆折断", }, { value: 310, - name: "穷哈哈", - }, - { - value: 234, - name: "吾叉叉", - }, - { - value: 235, - name: "穷叉叉", + name: "撑杆弯曲", }, ], labelLine: { @@ -145,38 +165,33 @@ const initMainChart = () => { }, { type: "pie", - radius: ["12%", "14%"], - center: ["50%", "50%"], - color: ["#ffffff", "red"], - startAngle: 105, + radius: ["0%", "15%"], + center: centerPoint, + color: ["#ffffff", "#ffffff"], + startAngle: 360, + silent: true, //取消高亮 data: [ { - value: 30, - name: "", + value: 270, + name: "1", itemStyle: { normal: { color: "transparent", + borderWidth: 2, + borderColor: "#ffffff", }, }, }, + { - value: 5, - name: "", + value: 90, + name: "2", itemStyle: { normal: { color: "transparent", }, }, }, - { - value: 65, - name: "ddd", - itemStyle: { - normal: { - color: "#ffffff", - }, - }, - }, ], labelLine: { normal: { @@ -191,9 +206,10 @@ const initMainChart = () => { }, { type: "pie", - radius: [0, "16%"], - center: ["50%", "50%"], + radius: [0, "14%"], + center: ["51%", "39%"], startAngle: 90, + silent: true, //取消高亮 data: [ { value: 25, @@ -201,7 +217,7 @@ const initMainChart = () => { itemStyle: { normal: { color: "transparent", - borderWidth: 4, + borderWidth: 2, borderColor: "#ffffff", }, }, @@ -217,7 +233,7 @@ const initMainChart = () => { }, }, ], - selectedOffset: 10, + // selectedOffset: 10, labelLine: { normal: { @@ -232,8 +248,8 @@ const initMainChart = () => { }, { type: "pie", - radius: ["53%", "54%"], - center: ["50%", "50%"], + radius: ["70%", "71%"], + center: centerPoint, color: [ "blue", "transparent", @@ -284,7 +300,8 @@ const initMainChart = () => { type: "pie", zlevel: 0, silent: true, - radius: ["25%", "26%"], + radius: ["31%", "33%"], + center: centerPoint, z: 10, label: { normal: { @@ -302,7 +319,8 @@ const initMainChart = () => { type: "pie", zlevel: 0, silent: true, - radius: ["34%", "36%"], + radius: ["43%", "45%"], + center: centerPoint, z: 10, startAngle: 90, label: { diff --git a/src/components/Charts/totalChart.vue b/src/components/Charts/totalChart.vue index 7bf3b42..0a0f11e 100644 --- a/src/components/Charts/totalChart.vue +++ b/src/components/Charts/totalChart.vue @@ -198,14 +198,14 @@ const updateChart = () => { data: item, yAxisIndex: 0, // 使用左y轴 }, - { - type: "bar", - name: props.legendArr[index], - barWidth: 25, - itemStyle: { color: "transparent" }, - data: item, - yAxisIndex: 1, // 使用左y轴 - }, + // { + // type: "bar", + // name: props.legendArr[index], + // barWidth: 25, + // itemStyle: { color: "transparent" }, + // data: item, + // yAxisIndex: 1, // 使用左y轴 + // }, ]) .flat(); diff --git a/src/components/Charts/vehicleMonitorChart.vue b/src/components/Charts/vehicleMonitorChart.vue index 74c4724..f78f964 100644 --- a/src/components/Charts/vehicleMonitorChart.vue +++ b/src/components/Charts/vehicleMonitorChart.vue @@ -36,56 +36,36 @@ function initChart() { let bgColor = ""; let title = "总量"; let color = [ - "#c065e7", - "#765deb", "#3862d8", - "#6a89E2", "#219CF9", "#6efbbf", "#40c057", "#ffd351", "#ff8e43", - "#f56b6d", ]; let echartData = [ { - name: "A类", + name: "小门搭扣丢失", value: "3720", }, { - name: "B类", + name: "门折页座脱落", value: "2920", }, { - name: "C类", + name: "小窗裂纹", value: "2200", }, { - name: "D类", + name: "搭扣未搭", value: "1420", }, { - name: "E类", + name: "搭扣未搭", value: "3200", }, { - name: "F类", - value: "2420", - }, - { - name: "G类", - value: "2200", - }, - { - name: "H类", - value: "1420", - }, - { - name: "I类", - value: "3200", - }, - { - name: "J类", + name: "下侧门板缺失", value: "2420", }, ]; @@ -97,7 +77,7 @@ function initChart() { return a + b.value * 1; }, 0); const option = { - backgroundColor: bgColor, + backgroundColor: "transparent", color: color, tooltip: { trigger: "item", @@ -132,8 +112,8 @@ function initChart() { }, labelLine: { normal: { - length: 20, - length2: 30, + length: 18, + length2: 32, lineStyle: { // color: '#e6e6e6' }, @@ -142,7 +122,7 @@ function initChart() { label: { show: true, position: "outside", - formatter: "{name|{b}：{d}%}\n{icon|}", + formatter: "{name|{b}：}\n{rate|{d}%}\n{icon|}", rich: { icon: { backgroundColor: "inherit", @@ -153,7 +133,13 @@ function initChart() { }, name: { fontSize: "10", - padding: [-12, 15, -20, 15], + padding: [-12, 5, -20, 2], + color: "#fff", + }, + rate: { + fontSize: "10", + align: 'left', + padding: [-12, 5, -50, 2], color: "#fff", }, }, diff --git a/src/views/dashboard/AppearanceMonitor.vue b/src/views/dashboard/AppearanceMonitor.vue index 90782f0..1e6d420 100644 --- a/src/views/dashboard/AppearanceMonitor.vue +++ b/src/views/dashboard/AppearanceMonitor.vue @@ -2,7 +2,7 @@ import { onBeforeRouteLeave } from "vue-router"; import { BaseTable } from "@/components/CustomTable"; import SwiperMonitor from "./components/SwiperMonitor.vue"; -import PoleDailyDetectionChart from "@/components/Charts/poleDailyDetectionChart.vue"; +import AppearanceDailyDetectionChart from "@/components/Charts/appearanceDailyDetectionChart.vue"; import PoleDailyAlertChart from "@/components/Charts/poleDailyAlertChart.vue"; import AppearanceAlarmModal from "./components/AppearanceAlarmModal.vue"; import DeleteModal from "./components/DeleteModal.vue"; @@ -335,7 +335,7 @@ onMounted(() => {
  • 日检出量
    - +
  • diff --git a/src/views/dashboard/DataOverview.vue b/src/views/dashboard/DataOverview.vue index e4ebabe..401c5c5 100644 --- a/src/views/dashboard/DataOverview.vue +++ b/src/views/dashboard/DataOverview.vue @@ -356,6 +356,7 @@ onMounted(() => { {{ v.name }}： {{ v.bindVal?.total || 0 }} +