提交最新代码，路段感知分析页的联调

ruoyi-ui/src/api/event/perceiveEvent.js

@@ -19,7 +19,7 @@ export function geTwarningTotal(query) {
     //system/status/tablist
     return request({
         url: '/system/status/tablist',
-        method: 'get',
+        method: 'post',
         params: {
           ...query,
         }
@@ -31,7 +31,7 @@ export function geTwarningTotal(query) {
     //system/status/tablist
     return request({
         url: '/perceivedEvents/warning/perceivedEventsList',
-        method: 'get',
+        method: 'post',
         params: {
           ...query,
         }
@@ -43,7 +43,7 @@ export function geTwarningTotal(query) {
         //system/status/tablist
         return request({
             url: '/perceivedEvents/warning/sectionPerceivedList',
-            method: 'get',
+            method: 'post',
             params: {
               ...query,
             }
@@ -56,7 +56,7 @@ export function geTwarningTotal(query) {
         //system/status/tablist
         return request({
             url: '/perceivedEvents/warning/sectionPerceivedNumber',
-            method: 'get',
+            method: 'post',
             params: {
               ...query,
             }
@@ -68,7 +68,7 @@ export function geTwarningTotal(query) {
         //system/status/tablist
         return request({
             url: '/perceivedEvents/warning/dailyCumulative',
-            method: 'get',
+            method: 'post',
             params: {
               ...query,
             }
@@ -80,7 +80,7 @@ export function geTwarningTotal(query) {
             //system/status/tablist
             return request({
                 url: '/perceivedEvents/warning/warningSourceGroup',
-                method: 'get',
+                method: 'post',
                 params: {
                   ...query,
                 }
@@ -92,7 +92,7 @@ export function geTwarningTotal(query) {
             //system/status/tablist
             return request({
                 url: '/perceivedEvents/warning/warningStateDay',
-                method: 'get',
+                method: 'post',
                 params: {
                   ...query,
                 }
@@ -104,7 +104,7 @@ export function geTwarningTotal(query) {
             //system/status/tablist
             return request({
                 url: '/perceivedEvents/warning/dailyCumulativeMonth',
-                method: 'get',
+                method: 'post',
                 params: {
                   ...query,
                 }
@@ -116,7 +116,7 @@ export function geTwarningTotal(query) {
             //system/status/tablist
             return request({
                 url: '/perceivedEvents/warning/warningTypeDay',
-                method: 'get',
+                method: 'post',
                 params: {
                   ...query,
                 }
@@ -128,7 +128,7 @@ export function geTwarningTotal(query) {
             //system/status/tablist
             return request({
                 url: '/perceivedEvents/warning/warningTrend',
-                method: 'get',
+                method: 'post',
                 params: {
                   ...query,
                 }
@@ -140,7 +140,7 @@ export function geTwarningTotal(query) {
             //system/status/tablist
             return request({
                 url: '/perceivedEvents/warning/warningSectionType',
-                method: 'get',
+                method: 'post',
                 params: {
                   ...query,
                 }
@@ -152,7 +152,7 @@ export function geTwarningTotal(query) {
             //system/status/tablist
             return request({
                 url: '/perceivedEvents/warning/sectionMarkNumber',
-                method: 'get',
+                method: 'post',
                 params: {
                   ...query,
                 }

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/assets/charts.js

@@ -1,15 +1,15 @@
-const echartsData = [
+window.echartsData = [
     { value: 25, name: '处理中' },
     { value: 32, name: '待处理' },
     { value: 30, name: '已处理' },]
  
- const colorList = [
+window.colorList = [
    "#FFee0B",
    "#61D8FF",
    "#6AE0BC",
     
     ]
-let count = 0;
+window.count = 0;
 
     echartsData.forEach((it)=>{
        count += it.value;
@@ -33,6 +33,7 @@ let count = 0;
             ast: {
                align: "left",
                fontSize: 12,
+               width:35,
             },
             bst: {
               align: "left",

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/index.vue

@@ -12,6 +12,7 @@
   import WgtTitle from '../../../widgets/title'
   import * as echarts from "echarts";
   import chartsStatistics from "./assets/charts";
+  import { getWarningStateDay } from '../../../../../../../api/event/perceiveEvent';
 
   const drawRoundRect = ( ctx, x, y, width, height, radius ,gr) => {   
   // ctx, 矩形距离x坐标位置, 矩形距离y坐标的位置, 矩形的宽, 矩形的长,圆角角度 
@@ -50,7 +51,75 @@
       setTimeout(() => {
         this.$nextTick(() => {
           var myChart = echarts.init(document.getElementById('dailyDisposal'));
+
+          getWarningStateDay().then(res=>{
+              if ( res.code == 200 ) {
+               let data = res.data;
+                console.log(data);
+                window.echartsData = [];
+                for (let i = 0;i < data.length;i++){
+                    let it = data[i];
+                    if ( it.warningState == 1 ) {
+                      echartsData.push({
+                        name:"上报",
+                        value: it.number
+                      });
+                    }
+                    if (it.warningState == 2 ) {
+                      echartsData.push({
+                        name:"已完成",
+                        value: it.number
+                      });
+                      
+                    }
+                    if (it.warningState == 3 ) {
+                      echartsData.push({
+                        name:"已终止",
+                        value: it.number
+                      });
+                      
+                    }
+                    if (it.warningState == 4 ) {
+                      echartsData.push({
+                        name:"自动结束",
+                        value: it.number
+                      });
+                      
+                    }
+                    
+                    
+                }
+                count = 0;
+
+                echartsData.forEach((it)=>{
+                  count += it.value;
+                })
+
+                console.log(echartsData);
+
+                chartsStatistics.legend.data = window.echartsData?.map(x => x);
+                chartsStatistics.series[0].data = echartsData.map((item, index) => {
+                                                                return {
+                                                                  ...item,
+                                                                  label: {
+                                                                      color: colorList[index]
+                                                                  }
+                                                                }
+                                                            })
+                 chartsStatistics.series[1].data = echartsData.map((item, index) => {
+                                                                return {
+                                                                  ...item,
+                                                                  label: {
+                                                                      color: colorList[index]
+                                                                  }
+                                                                }
+                                                            })                                                            
+              } 
+
               myChart.setOption(chartsStatistics);
+          });
+
+         
 
 
           const domMap = document.getElementById("dailyDisposal");

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/assets/charts.js

@@ -70,8 +70,6 @@ const sxnja = [
        //   return value.min*0.9;
        // },
        type: 'value',
-       min: 0,
-       max:1000,
        // max: yAxisMax,
        axisLine: {
          show: false,

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/index.vue

@@ -12,6 +12,8 @@
   import WgtTitle from '../../../widgets/title'
   import * as echarts from "echarts";
   import chartsStatistics from "./assets/charts";
+  import { getDailyCumulative } from '../../../../../../../api/event/perceiveEvent';
+
   export default {
     name: 'RailWayDay',
     components: {
@@ -33,7 +35,26 @@
       setTimeout(() => {
         this.$nextTick(() => {
           var myChart = echarts.init(document.getElementById('daytotal'));
+
+          getDailyCumulative().then(res=>{
+            if ( res.code == 200) {
+              let data = res.data;
+              let timer = [];
+              let number = [];
+
+              data.forEach((it)=>{
+                timer.push(it.time);
+                number.push(it.number);
+              });
+
+              chartsStatistics.xAxis.data = timer;
+              chartsStatistics.series[0].data = number;
+
               myChart.setOption(chartsStatistics);
+            }
+           
+          });
+         
         });
       });
     },

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js

@@ -15,6 +15,9 @@ let data = [{
    typeName:'护栏碰撞',
    percent:0.14
 }]
+
+window.mainData = data;
+
 let chartData = [],lengData=[], colorList = ['#006EDF', '#00FF00', '#FFC30D', '#FF8400', '#1DA7FF','#2967EA'];
 for (let i = 0; i < data.length; i++) {
    chartData.push({
@@ -55,6 +58,8 @@ for (let i = 0; i < chartData.length; i++) {
    });
    pieData1.push(gapData);
 }
+console.log(pieData1);
+
 var options = {
    tooltip: {
       confine: true,
@@ -115,10 +120,13 @@ var options = {
       formatter: function(name){
         let total = 0
             let target
+            if ( !mainData ) return "";
             for (let i = 0; i < data.length; i++) {
-              total += data[i].average
-              if (data[i].typeName === name) {
-                target = data[i].average
+              if ( window.mainData[i] ) {
+                total += window.mainData[i].value
+                if ( window.mainData[i].name === name) {
+                  target = window.mainData[i].value
+                }
               }
             }
             var arr = [

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue

@@ -12,6 +12,8 @@
   import WgtTitle from '../../../widgets/title'
   import * as echarts from "echarts";
   import chartsStatistics from "./assets/charts";
+  import { getWarningSourceGroup } from '../../../../../../../api/event/perceiveEvent';
+
   export default {
     name: 'EventSource',
     components: {
@@ -36,30 +38,74 @@
         let currentIndex = -1;
         this.$nextTick(() => {
           var myChart = echarts.init(document.getElementById('eventSource'));
-          myChart.setOption(chartsStatistics);
-          this.myChart = myChart;
 
-            myChart.on('mouseover', (params) => {
-           // oldIndex = currentIndex;
-            currentIndex = params.dataIndex;
-            highlightPie(currentIndex,oldIndex);
-            })
+          getWarningSourceGroup().then((res)=>{
+            if ( res.code == 200 ) {
+              let data = res.data;
+              let warningTypes = [];
+              let number = [];
+              data.forEach(it=>{
+                  if ( it.warningSource == 1) {
+                    warningTypes.push('交通拥堵');
+                  }
+                  if ( it.warningSource == 2) {
+                    warningTypes.push('行人');
+                  }
+                  if ( it.warningSource == 3) {
+                    warningTypes.push('非机动车');
+                  }
+                  if ( it.warningSource == 4) {
+                    warningTypes.push('停车');
+                  }
+                  if ( it.warningSource == 5) {
+                    warningTypes.push('倒车/逆行');
+                  }
+                  if ( it.warningSource == 6) {
+                    warningTypes.push('烟火');
+                  }
+                  if ( it.warningSource == 7) {
+                    warningTypes.push('撒落物');
+                  }
+                  if ( it.warningSource == 8) {
+                    warningTypes.push('异常天气');
+                  }
+                  if ( it.warningSource == 9) {
+                    warningTypes.push('护栏碰撞');
+                  }
 
-            function highlightPie(currentIndex,oldIndex) {
-            myChart.dispatchAction({
-                type: 'downplay',
-                seriesIndex: 1,
-                dataIndex: oldIndex
+                  number.push(it.number);
               })
-            myChart.dispatchAction({
-                type: 'highlight',
-                seriesIndex: 1,
-                dataIndex: currentIndex
+              let  colorList = ['#006EDF', '#00FF00', '#FFC30D', '#FF8400', '#1DA7FF','#2967EA'];
+              let lengData = [];
+              let mainData = [];
+              let mainCount = 0;
+              for (let j =0;j < number.length;j++){
+                mainCount+= number[j];
+              }
+              for (let i = 0;i < warningTypes.length;i++){
+                let it = warningTypes[i];
+                  lengData.push({
+                    name:it,
+                    color:colorList[i],
+                    value:number[i],
+                  });
+                  mainData.push({
+                    name:it,
+                    color:colorList[i],
+                    value:number[i],
+                    percent: number[i]/mainCount
                   })
               }
-            setTimeout(()=>{
+              window.mainData = mainData;
+              console.log("--------------",mainData);
+              chartsStatistics.legend.data = lengData;
+              chartsStatistics.series[0].data = mainData;
+            }
+            myChart.setOption(chartsStatistics);
+          })
+          
+          this.myChart = myChart;
 
-            },50)
         });
       });
     },

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/assets/charts.js

@@ -1,9 +1,9 @@
 let chartIcon = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAACXBIWXMAAC4jAAAuIwF4pT92AAAFw2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4wLWMwMDAgNzkuMTcxYzI3ZmFiLCAyMDIyLzA4LzE2LTIyOjM1OjQxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjQuMCAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjMtMTItMjlUMTA6MTM6MTQrMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIzLTEyLTI5VDEwOjQ2OjE3KzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIzLTEyLTI5VDEwOjQ2OjE3KzA4OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDplYzhkN2NkNS01ZjdjLTQ5Y2ItOTgyMy1lOTM4ODViNjRjMmIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ZjE1ZWVkNDgtNDA3ZS00MDU0LTliNTMtYTllZmQ1ODE5YjVmIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6ZjE1ZWVkNDgtNDA3ZS00MDU0LTliNTMtYTllZmQ1ODE5YjVmIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpmMTVlZWQ0OC00MDdlLTQwNTQtOWI1My1hOWVmZDU4MTliNWYiIHN0RXZ0OndoZW49IjIwMjMtMTItMjlUMTA6MTM6MTQrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyNC4wIChNYWNpbnRvc2gpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDplYzhkN2NkNS01ZjdjLTQ5Y2ItOTgyMy1lOTM4ODViNjRjMmIiIHN0RXZ0OndoZW49IjIwMjMtMTItMjlUMTA6NDY6MTcrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyNC4wIChNYWNpbnRvc2gpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PibZhN0AAAHBSURBVDiNfdTtThNREAbgZ5sCrRTaRaBqQDTR6AXaq9grJEaiKCJWaAv9ENDUH2fWLkU8yeTkZGbe885nNp/PVU9vIMMGNtHGo1BNMQoZF7k7jlkVqDewji72sI5VrIT6F64xwRecFbnJPaDeQBsv8RSdCpsS6BYzDENOcVTkLv8CBZPX2McOdrEVITYC6BpjnKOP7zjG+yI3yd5dzLNg8jbY7MW9g+2lHJUgpzgJOcRRPX7dj3C6eIaDAO+iGUCzYPERWSXU5+jXIxct5MFgN0AOsLaoi9Ul0HHkaoBOLZg0IoQNPMaTJZAqWDfytylVtol2LdishNFaKBv/AClPI3waISto1UKZoRZ39h8QFZus8laTqvEbNyEzqdQPnZ/hcyMl/BbTmpSsacg43v0wXD43+BE2V+FzjWFdmp1ZKAZheByUt91tyD4+S/00wGWAjerxOJYS2JSSngX4lrsNeREfnUg9dRG+o3JEWniDF1Lpd6U2KEdkHoyuwvkM36TmPCxy4+rQdvDKoss7FhugzM8kIjiPED8UuSH310jLYkRaUl9V18gswD7ha5Ebl77ZA4utLY1MOT4sRmKI0fJi+wM9v6Q1QC+Y6wAAAABJRU5ErkJggg==`;
 let xdata = {
-   value: ['平阴停车区', '孔村枢纽', '平阴南收费站', '东平湖枢纽', '沙河停车区', '梁山东收费站', '王官屯枢纽']
+   value: ['平阴停车区']
 };
 let sdata = {
-   value: [32774, 30067, 28774, 30067, 30021, 30067, 32774]
+   value: [32774]
 }
 
 let dataZoomMove = {

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/index.vue

@@ -16,6 +16,8 @@
   import WgtTitle from '../../../widgets/title'
   import * as echarts from "echarts";
   import chartsStatistics from "./assets/charts";
+  import { getSectionPerceivedList } from '../../../../../../../api/event/perceiveEvent';
+
   export default {
     name: 'Situation',
     components: {
@@ -31,7 +33,27 @@
       setTimeout(() => {
         this.$nextTick(() => {
           var myChart = echarts.init(document.getElementById('situationEchartBox'));
+         
+          getSectionPerceivedList({}).then((res)=>{
+             console.log(res);
+             if ( res.code == 200 ) {
+               let data = res.data;
+               let texts = [];
+               let datas = [];
+
+               data.forEach(it => {
+                  texts.push(it.sectionName);
+                  datas.push(it.number);
+               });
+
+               chartsStatistics.yAxis[0].data = texts;
+               chartsStatistics.series[0].data = datas;
+
                myChart.setOption(chartsStatistics);
+             }
+          });
+
+        
         });
       });
     },

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/assets/charts.js

@@ -68,9 +68,7 @@ var options = {
    yAxis: [{
       type: 'value',
       name: "",
-      max: 1000,
-      min:0,
-      splitNumber:5,
+
       nameTextStyle: {
          color: '#B6E6FF',
          fontSize: 13,

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/index.vue

@@ -12,6 +12,8 @@
 import WgtTitle from '../../../widgets/title'
 import * as echarts from "echarts";
 import chartsStatistics from "./assets/charts";
+import { getSectionPerceivedNumber } from '../../../../../../../api/event/perceiveEvent';
+
 export default {
   name: 'RailWayDay',
   components: {
@@ -33,7 +35,23 @@ export default {
     setTimeout(() => {
       this.$nextTick(() => {
         var myChart = echarts.init(document.getElementById('railwayDay'));
+        getSectionPerceivedNumber().then((res)=>{
+          if ( res.code == 200 ) {
+            let data = res.data;
+               let texts = [];
+               let datas = [];
+
+               data.forEach(it => {
+                  texts.push(it.sectionName);
+                  datas.push(it.number);
+               });
+
+               chartsStatistics.xAxis.data = texts;
+               chartsStatistics.series[0].data = datas;
+
                myChart.setOption(chartsStatistics);
+          }
+        })
       });
     });
   },

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/assets/charts.js

@@ -1,4 +1,4 @@
-const echartsData = [
+window.typeAnalysisData = [
    { value: 100, name: '行人' },
    { value: 90, name: '非机动车' },
    { value: 80, name: '拥堵' },
@@ -6,7 +6,7 @@ const echartsData = [
      { value: 50, name: '抛洒物' },
      { value: 45, name: '烟火' }]
 
-const colorList = [
+window.colorList = [
    "#019AFF",
    "#3CC3F0",
    "#51D5AD",
@@ -14,14 +14,14 @@ const colorList = [
    "#F6A73C",
    "#7390FD",]
 
-const colorList1 = [
+window.colorList1 = [
    "#61D8FF",
    "#FFB905",
    "#6AE0BC",]
 
-   let count = 0;
+window.count = 0;
 
-   echartsData.forEach((it)=>{
+typeAnalysisData.forEach((it)=>{
       count += it.value;
    })
   
@@ -30,9 +30,9 @@ var options = {
    color: colorList,
    legend: {
       orient: 'vertical',
-      top: "center",
+      top: "10",
       icon: "circle",
-      right: 30,
+      right: 40,
       itemGap: 16,
       itemWidth: 8,
       itemHeight: 8,
@@ -54,11 +54,11 @@ var options = {
          }
       },
       formatter: (params) => {
-        let obj = echartsData.filter(it=>{ return it.name == params})
+        let obj = typeAnalysisData.filter(it=>{ return it.name == params})
         console.log(obj);
         return `{ast|${obj[0].name}}        {bst|${Math.round(obj[0].value/count* 100) }%}`
      },
-      data: echartsData?.map(x => x.name),
+      data: typeAnalysisData?.map(x => x.name),
    },
    tooltip: {
       trigger: 'item',
@@ -96,7 +96,7 @@ var options = {
          length: 10,
          length2: 30,
       },
-      data: echartsData.map((item, index) => {
+      data: typeAnalysisData.map((item, index) => {
          return {
             ...item,
             label: {
@@ -139,7 +139,7 @@ var options = {
          length: 10,
          length2: 30,
       },
-      data: echartsData.map((item, index) => {
+      data: typeAnalysisData.map((item, index) => {
          return {
             ...item,
             label: {

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue

@@ -12,6 +12,7 @@
   import WgtTitle from '../../../widgets/title'
   import * as echarts from "echarts";
   import chartsStatistics from "./assets/charts";
+  import { getWarningTypeDay } from '../../../../../../../api/event/perceiveEvent';
 
   
   const drawRoundRect = ( ctx, x, y, width, height, radius ,gr) => {   
@@ -52,9 +53,95 @@
       setTimeout(() => {
         this.$nextTick(() => {
           var myChart = echarts.init(document.getElementById('typeAnalysis'));
-          myChart.setOption(chartsStatistics);
           
 
+          getWarningTypeDay().then(res=>{
+             console.log(res);
+             if ( res.code == 200 ) {
+                let data = res.data;
+                console.log("===================",data);
+                typeAnalysisData = [];
+                for (var i = 0;i < data.length;i++){
+                  var it = data[i];
+                  if ( it.warningType == 1) {
+                    typeAnalysisData.push({
+                       name:'交通拥堵',
+                       value:it.number
+                    });
+                  }
+                  if ( it.warningType == 2) {
+                    typeAnalysisData.push({
+                       name:'行人',
+                       value:it.number
+                    });
+                  }
+                  if ( it.warningType == 3) {
+                    typeAnalysisData.push({
+                       name:'非机动车',
+                       value:it.number
+                    });
+                  }
+                  if ( it.warningType == 4) {
+                    typeAnalysisData.push({
+                       name:'停车',
+                       value:it.number
+                    });
+                  }
+                  if ( it.warningType == 5) {
+                    typeAnalysisData.push({
+                       name:'倒车/逆行',
+                       value:it.number
+                    });
+                  }
+                  if ( it.warningType == 6) {
+                    typeAnalysisData.push({
+                       name:'烟火',
+                       value:it.number
+                    });
+                  }
+                  if ( it.warningType == 7) {
+                    typeAnalysisData.push({
+                       name:'撒落物',
+                       value:it.number
+                    });
+                  }
+                  if ( it.warningType == 8) {
+                    typeAnalysisData.push({
+                       name:'异常天气',
+                       value:it.number
+                    });
+                  }
+                  if ( it.warningType == 9) {
+                    typeAnalysisData.push({
+                       name:'护栏碰撞',
+                       value:it.number
+                    });
+                  }
+
+                  drawRoundRect(context, 260, 8 + i * 28, 120, 24, 12,gr)
+                }
+
+                chartsStatistics.legend.data = typeAnalysisData?.map(x => x.name);
+                chartsStatistics.series[0].data = typeAnalysisData.map((item, index) => {
+                                                                  return {
+                                                                      ...item,
+                                                                      label: {
+                                                                        color: colorList[index]
+                                                                      }
+                                                                  }
+                                                                })
+                chartsStatistics.series[1].data = typeAnalysisData.map((item, index) => {
+                                                                  return {
+                                                                      ...item,
+                                                                      label: {
+                                                                        color: colorList[index]
+                                                                      }
+                                                                  }
+                                                                })                                                              
+             }
+
+             myChart.setOption(chartsStatistics);
+          })
           
           const domMap = document.getElementById("typeAnalysis");
           let parentDiv = domMap.firstChild; 
@@ -75,12 +162,12 @@
           context.lineWidth = 1; // 设置线段宽度
         
           // 绘制圆角矩形
-          drawRoundRect(context, 260, 8, 120, 24, 12,gr)
-          drawRoundRect(context, 260, 36, 120, 24, 12,gr)
-          drawRoundRect(context, 260, 64, 120, 24, 12,gr)
-          drawRoundRect(context, 260, 92, 120, 24, 12,gr)
-          drawRoundRect(context, 260, 120, 120, 24, 12,gr)
-          drawRoundRect(context, 260, 148, 120, 24, 12,gr)
+       
+          // drawRoundRect(context, 260, 36, 120, 24, 12,gr)
+          // drawRoundRect(context, 260, 64, 120, 24, 12,gr)
+          // drawRoundRect(context, 260, 92, 120, 24, 12,gr)
+          // drawRoundRect(context, 260, 120, 120, 24, 12,gr)
+          // drawRoundRect(context, 260, 148, 120, 24, 12,gr)
         });
       });
     },