更新代码

2025-04-14 19:48:42 +08:00
parent 49cfd7e64f
commit 8b786df36a
73 changed files with 1988 additions and 4488 deletions
--- a/src/views/backOfficeSystem/IntelligentControl/warningControl/components/gjtj.vue
+++ b/src/views/backOfficeSystem/IntelligentControl/warningControl/components/gjtj.vue
@ -0,0 +1,165 @@
+<template>
+  <div id="circlecz" class="circlecz" style="width: 100%; height: 100%"></div>
+</template>
+
+<script setup>
+import * as echarts from "echarts";
+import { ref, onMounted, watch, defineProps } from "vue";
+
+onMounted(() => {
+  lineChartFn();
+});
+function lineChartFn() {
+  var chartDom = document.getElementById("circlecz");
+  var myChart = echarts.init(chartDom);
+  var option;
+  option = {
+    legend: {
+      type: "plain",
+      show: true,
+      right: 0,
+      textStyle: { color: "#ddd" },
+      data: [
+        { name: "总数" },
+        { name: "已处置" }
+      ]
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow"
+      }
+    },
+    grid: {
+      top: "25%",
+      right: "10%",
+      left: "10%",
+      bottom: "22%"
+    },
+    xAxis: [
+      {
+        type: "category",
+        data: ['巴宜区','工布江达县','波密县','朗县','墨脱县','察隅县','米林县'],
+        axisLine: {
+          lineStyle: {
+            color: "rgba(255,255,255,0.12)"
+          }
+        },
+        axisLabel: {
+          margin: 10,
+          color: "#e2e9ff",
+          textStyle: {
+            fontSize: 14
+          }
+        }
+      }
+    ],
+    yAxis: [
+      {
+        // name: '单位：万元',
+        axisLabel: {
+          formatter: "{value}",
+          color: "#e2e9ff"
+        },
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: "rgba(255,255,255,1)"
+          }
+        },
+        splitLine: {
+          lineStyle: {
+            color: "rgba(255,255,255,0.12)"
+          }
+        }
+      }
+    ],
+    series: [
+      {
+        name: "总数",
+        type: "bar",
+        data: [10,20,30,40,50,60,70],
+        barWidth: "10px",
+        itemStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(0,0,0,1,[
+              {
+                  offset: 0,
+                  color: "rgba(0,244,255,1)" // 0% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: "rgba(0,77,167,1)" // 100% 处的颜色
+                }
+              ],
+              false
+            ),
+          }
+        },
+        markPoint: {
+          symbol: 'path://M62 62h900v900h-900v-900z', // 使用 SVG path 绘制扁圆形状
+          symbolSize: [10, 4], // 设置扁圆的宽和高
+          itemStyle: {
+            color: '#087df9' // 圆盘颜色
+          },
+          data: [10,20,30,40,50,60,70].map((obj, index) => ({
+            xAxis: index, // 对应柱子的横坐标
+            yAxis: obj + 0 // 柱子的值加上一些偏移量
+          }))
+        },
+      },
+      {
+        name: "已处置",
+        type: "bar",
+        data: [10,20,30,40,50,60,70],
+        barWidth: "10px",
+        itemStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(0,0,0,1,
+              [
+                {
+                  offset: 0,
+                  color: "rgba(24, 232, 229, 1)" // 0% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: "rgba(3, 110, 83, 1)" // 100% 处的颜色
+                }
+              ],
+              false
+            ),
+          }
+        },
+        markPoint: {
+          symbol: 'path://M62 62h900v900h-900v-900z', // 使用 SVG path 绘制扁圆形状
+          symbolSize: [10, 4], // 设置扁圆的宽和高
+          itemStyle: {
+            color: '#00FFFF' // 圆盘颜色
+          },
+          data: [10,20,30,40,50,60,70].map((obj, index) => ({
+            xAxis: index, // 对应柱子的横坐标
+            yAxis: obj + 0 // 柱子的值加上一些偏移量
+          }))
+        },
+      },
+    ]
+  };
+
+  option && myChart.setOption(option);
+  window.onresize = function () {
+    myChart.resize();
+  };
+  document.getElementById("circlecz").setAttribute("_echarts_instance_", "");
+}
+onMounted(() => {
+  lineChartFn();
+});
+</script>
+
+<style lang="scss" scoped>
+.circlecz {
+  height: 100%;
+  background: rgba(0,29,75,0.6);
+  border-radius: 0 0 4px 4px;
+}
+</style>