更新大屏

src/views/backOfficeSystem/IntelligentControl/warningControl/components/bkjbtj.vue

@@ -1,11 +1,96 @@
 <template>
-  <div class="echartsBox">ggg</div>
+  <div class="echartsBox" ref="chartRef"></div>
 </template>
 
 <script>
-export default {
+import * as echarts from 'echarts';
+import 'echarts-gl';
 
-}
+// export default {
+//   name: 'Bkjbtj',
+//   data() {
+//     return {
+//       chart: null,
+//       chartData: [
+//         { value: 18, name: '红色', itemStyle: { color: '#ff4d4f' } },
+//         { value: 13, name: '橙色', itemStyle: { color: '#ff7a45' } },
+//         { value: 17, name: '黄色', itemStyle: { color: '#ffc53d' } },
+//         { value: 2, name: '蓝色', itemStyle: { color: '#40a9ff' } }
+//       ]
+//     };
+//   },
+//   mounted() {
+//     this.initChart();
+//     window.addEventListener('resize', this.resizeChart);
+//   },
+//   beforeDestroy() {
+//     window.removeEventListener('resize', this.resizeChart);
+//     this.chart && this.chart.dispose();
+//   },
+//   methods: {
+//     initChart() {
+//       this.chart = echarts.init(this.$refs.chartRef);
+//       const option = {
+//         backgroundColor: 'transparent',
+//         tooltip: {
+//           trigger: 'item',
+//           formatter: '{b}: {c} ({d}%)'
+//         },
+//         legend: {
+//           orient: 'vertical',
+//           right: '5%',
+//           top: 'middle',
+//           textStyle: {
+//             color: '#fff'
+//           }
+//         },
+//         series: [{
+//           name: '告警统计',
+//           type: 'pie3D',
+//           radius: '55%',
+//           center: ['40%', '50%'],
+//           viewControl: {
+//             beta: 40,
+//             alpha: 20,
+//             distance: 200,
+//             rotateSensitivity: 1,
+//             zoomSensitivity: 1
+//           },
+//           label: {
+//             show: true,
+//             formatter: '{d}%',
+//             textStyle: {
+//               color: '#fff',
+//               fontSize: 14,
+//               borderWidth: 1
+//             }
+//           },
+//           labelLine: {
+//             show: true,
+//             lineStyle: {
+//               color: '#fff'
+//             }
+//           },
+//           itemStyle: {
+//             opacity: 0.8,
+//             borderWidth: 1,
+//             borderColor: '#fff'
+//           },
+//           emphasis: {
+//             itemStyle: {
+//               opacity: 1
+//             }
+//           },
+//           data: this.chartData
+//         }]
+//       };
+//       this.chart.setOption(option);
+//     },
+//     resizeChart() {
+//       this.chart && this.chart.resize();
+//     }
+//   }
+// };
 </script>
 
 <style lang="scss" scoped>
@@ -15,5 +100,4 @@ export default {
   background: rgba(0,29,75,0.6);
   border-radius: 0 0 4px 4px;
 }
-
 </style>

src/views/backOfficeSystem/IntelligentControl/warningControl/components/gjtj.vue

@@ -6,9 +6,6 @@
 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);
@@ -98,7 +95,7 @@ function lineChartFn() {
         },
         markPoint: {
           symbol: 'path://M62 62h900v900h-900v-900z', // 使用 SVG path 绘制扁圆形状
-          symbolSize: [10, 4], // 设置扁圆的宽和高
+          symbolSize: [11, 4], // 设置扁圆的宽和高
           itemStyle: {
             color: '#087df9' // 圆盘颜色
           },
@@ -132,7 +129,7 @@ function lineChartFn() {
         },
         markPoint: {
           symbol: 'path://M62 62h900v900h-900v-900z', // 使用 SVG path 绘制扁圆形状
-          symbolSize: [10, 4], // 设置扁圆的宽和高
+          symbolSize: [11, 4], // 设置扁圆的宽和高
           itemStyle: {
             color: '#00FFFF' // 圆盘颜色
           },