更新

src/views/home/model/qblyType.vue

@@ -3,161 +3,25 @@
     <span class="title">情报来源类型</span>
   </div> 
   <div class="comom-cnt">
-    <div id="qbltBox" class="qbltBox" style="width: 100%; height: 100%"></div>
+    <BarHatEcharts echartsId="qbltBox" :data="list"></BarHatEcharts>
   </div>
 </template>
 
 <script setup>
 import LineEcharts from "../echarts/moreLineEcharts.vue";
+import BarHatEcharts from "@/views/home/echarts/barHatEcharts.vue";
 import * as echarts from "echarts";
-import { ref, onMounted, watch, defineProps } from "vue";
-
+import { ref, onMounted, watch, defineProps, reactive } from "vue";
+const list = reactive({
+  xDate: ['110警情','人力情报','系统采集','民警处置单'],
+  list:[
+    { name: "总数", value: [40,50,60,70] ,color:['rgba(0,244,255,1)','rgba(0,77,167,1)'] ,hatColor:'#087df9'},
+    { name: "已处置", value: [10,40,50,70],color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'],hatColor:'#00FFFF'  },
+  ],
+})
 onMounted(() => {
-  lineChartFn();
 });
 
-function lineChartFn() {
-  var chartDom = document.getElementById("qbltBox");
-  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: "5%",
-      left: "5%",
-      bottom: "22%"
-    },
-    xAxis: [
-      {
-        type: "category",
-        data: ['110警情','人力情报','系统采集','民警处置单'],
-        axisLine: {
-          lineStyle: {
-            color: "rgba(255,255,255,0.12)"
-          }
-        },
-        axisLabel: {
-          margin: 10,
-          color: "#e2e9ff",
-          textStyle: {
-            fontSize: 14
-          }
-        }
-      }
-    ],
-    yAxis: [
-      {
-        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],
-        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: [11, 4], // 设置扁圆的宽和高
-          itemStyle: {
-            color: '#087df9' // 圆盘颜色
-          },
-          data: [10,20,30,40].map((obj, index) => ({
-            xAxis: index, // 对应柱子的横坐标
-            yAxis: obj + 0 // 柱子的值加上一些偏移量
-          }))
-        },
-      },
-      {
-        name: "已处置",
-        type: "bar",
-        data: [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: [11, 4], // 设置扁圆的宽和高
-          itemStyle: {
-            color: '#00FFFF' // 圆盘颜色
-          },
-          data: [40,50,60,70].map((obj, index) => ({
-            xAxis: index, // 对应柱子的横坐标
-            yAxis: obj + 0 // 柱子的值加上一些偏移量
-          }))
-        },
-      },
-    ]
-  };
-
-  option && myChart.setOption(option);
-  window.onresize = function () {
-    myChart.resize();
-  };
-  document.getElementById("qbltBox").setAttribute("_echarts_instance_", "");
-}
-
 </script>