应急统计分析

src/api/bigdata.js

@@ -1,144 +1,54 @@
 import request from '@/utils/request'
 
-// 事件来源，类型统计
-export function getEventSourceAndTypeStatistics(param) {
+// 按状态统计分析隐患整改情况
+export function selectStatsMap(param) {
   return request({
-    url: '/center-fire/VisuForestCloudBigDataController/getEventSourceAndTypeStatistics',
-    method: 'post',
+    url: '/center-emergency/VisuEmergencyCloudBigDataController/selectStatsMap',
+    method: 'get',
     data: param
   })
 }
 
-
-// 设备类型统计
-export function getCameaCount() {
-  return request({
-    url: '/center-fire/VisuForestCloudBigDataController/getCameaCount',
-    method: 'post',
-  })
-}
-
-// 设备分布
-export function getSbfb() {
-  return request({
-    url: '/center-fire/VisuForestCloudBigDataController/getSbfb',
-    method: 'post',
-  })
-}
-
-//林场分布统计
-export function getLcfbtj() {
-  return request({
-    url: '/center-fire/VisuForestCloudBigDataController/selectBigDataFarmDeptCount',
-    method: 'post'
-  })
-}
-
-//起火原因统计
-export function getQhyytj(param) {
-  //暂时传当年，以后再说
-  if (param == null) {
-    let myDate = new Date();
-    param = {day: myDate.getFullYear()}
-  }
-  return request({
-    url: '/center-fire/VisuForestCloudBigDataController/selectEventByYearGroupByFireSource',
-    data: param,
-    method: 'post'
-  })
-}
-
-//重点区域
-export function getZdqy() {
-  return request({
-    url: '/center-fire/VisuForestCloudBigDataController/selectBigDataImportareaDeptCount',
-    method: 'post'
-  })
-}
-
-//设备上报事件数量
-export function getSbsbsjsl(param) {
-  //暂时传当年，以后再说
-  if (param == null) {
-    let myDate = new Date();
-    param = {day: myDate.getFullYear()}
-  }
-  return request({
-    url: '/center-fire/VisuForestCloudBigDataController/getAIEventNum',
-    data: param,
-    method: 'post'
-  })
-}
-
-//珍惜古树
-export function getZxgs() {
-  return request({
-    url: '/center-fire/VisuForestCloudBigDataController/selectBigDataTreesDeptCount',
-    method: 'post'
-  })
-}
-
-//事件趋势
-export function getSjqs(param) {
-  //暂时传当年，以后再说
-  if (param == null) {
-    let myDate = new Date();
-    param = {day: myDate.getFullYear()}
-  }
+// 按行业领域统计高危企业
+export function selectIndustryHighList(param) {
   return request({
-    url: '/center-fire/VisuForestCloudBigDataController/getEventTrend',
-    data: param,
-    method: 'post'
-  })
-}
-
-//网格分布
-export function getWgfb() {
-  return request({
-    url: '/center-fire/VisuForestCloudBigDataController/selectBigDataFridDeptCount',
-    method: 'post'
+    url: '/center-emergency/VisuEmergencyCloudBigDataController/selectIndustryHighList',
+    method: 'get',
+    data: param
   })
 }
 
-
-//天气趋势
-export function getTqqs(param) {
-  if (param == null) {
-    let myDate = new Date();
-    let month = myDate.getMonth() + 1;
-    if (month < 10) {
-      month = "0" + month
-    }
-    param = {day: myDate.getFullYear() + "-" + month}
-  }
+// 从业人员分布情况分析
+export function selectPersonnelList(param) {
   return request({
-    url: '/center-fire/VisuForestCloudBigDataController/selectBigDataByYearMonthFegin',
-    data: param,
-    method: 'post'
+    url: '/center-emergency/VisuEmergencyCloudBigDataController/selectPersonnelList',
+    method: 'get',
+    data: param
   })
 }
 
-//网格人员
-export function getWgry() {
+// 按类型分析应急物资
+export function selectCategoryClassificationList(param) {
   return request({
-    url: '/center-fire/VisuForestCloudBigDataController/selectBigDataFridLZDeptCount',
-    method: 'post'
+    url: '/center-emergency/VisuEmergencyCloudBigDataController/selectCategoryClassificationList',
+    method: 'get',
+    data: param
   })
 }
-
-//防火队
-export function getFhd() {
+// 按类型及巡检数量 不通过："inspectionResult"."1"；通过："inspectionResult"."0"
+export function selectAdoptionList(param) {
   return request({
-    url: '/center-fire/VisuForestCloudBigDataController/selectBigDataFireTeamDeptCount',
-    method: 'post'
+    url: '/center-emergency/VisuEmergencyCloudBigDataController/selectAdoptionList',
+    method: 'get',
+    params: param
   })
 }
-
-//气象站
-export function getQxz() {
+// 高发不合格项
+export function selectHightAdoptionList(param) {
   return request({
-    url: '/center-fire/VisuForestCloudBigDataController/selectBigDataWeatherStationDeptCount',
-    method: 'post'
+    url: '/center-emergency/VisuEmergencyCloudBigDataController/selectHightAdoptionList',
+    method: 'get',
+    data: param
   })
 }
 
@@ -146,8 +56,8 @@ export function getQxz() {
 export function getZhxx(param) {
 //暂时传当年，以后再说
   if (param == null) {
-    let myDate = new Date();
-    param = {day: myDate.getFullYear()}
+    let myDate = new Date()
+    param = { day: myDate.getFullYear() }
   }
   return request({
     url: '/center-fire/VisuForestCloudBigDataController/selectBigDataZhxx',
@@ -160,13 +70,13 @@ export function getZhxx(param) {
 export function getRlt(param) {
   //暂时传当年，以后再说
   if (param == null) {
-    let myDate = new Date();
-    param = {day: myDate.getFullYear()}
+    let myDate = new Date()
+    param = { day: myDate.getFullYear() }
   }
   return request({
     url: '/center-fire/VisuForestCloudBigDataController/getHeatMap',
     method: 'post',
-    data : param
+    data: param
   })
 }
 

src/views/bigdata/bigdata.vue

@@ -23,19 +23,19 @@
       <div class="bigdata-list wid-li-1">
         <div class="b-con mg-b-20">
           <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-            <span>事件来源，类型统计</span>
+            <span>隐患整改情况</span>
           </div>
           <chartEvent></chartEvent>
         </div>
         <div class="b-con mg-b-20">
           <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-            <span>林场分布统计</span>
+            <span>行业高危企业</span>
           </div>
           <chartForestFarm></chartForestFarm>
         </div>
         <div class="b-con">
           <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-            <span>设备类型统计</span>
+            <span>从业人员分布情况</span>
           </div>
           <chartEquipmentType></chartEquipmentType>
         </div>
@@ -54,25 +54,25 @@
       <div class="bigdata-list wid-li-3 m-l-15 flex-r">
         <div class="b-con mg-b-20 b-49">
           <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-            <span>起火原因统计</span>
+            <span>应急物资统计</span>
           </div>
           <chartFireCause></chartFireCause>
         </div>
         <div class="b-con mg-b-20 b-49">
           <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-            <span>设备上报事件数量</span>
+            <span>巡检通过类型统计</span>
           </div>
           <chartDeviceReportingEvents></chartDeviceReportingEvents>
         </div>
         <div class="b-con mg-b-20 b-49">
           <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-            <span>重点区域</span>
+            <span>高发不合格项</span>
           </div>
           <chartKeyArea></chartKeyArea>
         </div>
         <div class="b-con mg-b-20 b-49">
           <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-            <span>珍惜古树</span>
+            <span>巡检不通过类型统计</span>
           </div>
           <chartAncientTree></chartAncientTree>
         </div>
@@ -80,7 +80,7 @@
           <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
             <span>事件趋势</span>
           </div>
-          <chartEventTrend></chartEventTrend>
+<!--          <chartEventTrend></chartEventTrend>-->
           <strong></strong>
         </div>
       </div>
@@ -90,13 +90,13 @@
           <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
             <span>网格分布</span>
           </div>
-          <chartGridDistribution></chartGridDistribution>
+<!--          <chartGridDistribution></chartGridDistribution>-->
         </div>
         <div class="b-con">
           <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
             <span>天气趋势</span>
           </div>
-          <chartWeatherTrends></chartWeatherTrends>
+<!--          <chartWeatherTrends></chartWeatherTrends>-->
         </div>
       </div>
       <!-- 第五纵向-->
@@ -105,19 +105,19 @@
           <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
             <span>网格人员</span>
           </div>
-          <chartGridStaff></chartGridStaff>
+<!--          <chartGridStaff></chartGridStaff>-->
         </div>
         <div class="b-con mg-b-20 b-49">
           <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
             <span>防火队</span>
           </div>
-          <chartFireBrigade></chartFireBrigade>
+<!--          <chartFireBrigade></chartFireBrigade>-->
         </div>
         <div class="b-con mg-b-20 b-49">
           <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
             <span>气象站</span>
           </div>
-          <chartWeatherStation></chartWeatherStation>
+<!--          <chartWeatherStation></chartWeatherStation>-->
         </div>
       </div>
       <!-- 第六纵向-->
@@ -126,7 +126,7 @@
           <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
             <span>设备分布</span>
           </div>
-          <chartEquipmentDistribution></chartEquipmentDistribution>
+<!--          <chartEquipmentDistribution></chartEquipmentDistribution>-->
         </div>
       </div>
     </div>
@@ -139,20 +139,20 @@ import tabbar from './tabbar.vue' //区域切换
 import bigdataSupermap from '@/components/supermap' //超图
 
 //echarts
-import chartEvent from './chart-event.vue' //1  事件、、
-import chartForestFarm from './chart-forestFarm.vue' //2  林场分布、、
-import chartEquipmentType from './chart-equipmentType.vue' //3  公司、、
-import chartFireCause from './chart-fireCause.vue' //4  起火原因、、
-import chartDeviceReportingEvents from './chart-deviceReportingEvents.vue' //5  设备上报数量、、
-import chartEventTrend from './chart-eventTrend.vue' //6  事件趋势、、
-import chartKeyArea from './chart-keyArea.vue' //7  重点区域、、
-import chartAncientTree from './chart-ancientTree.vue' //8  珍惜古树、、
-import chartWeatherTrends from './chart-weatherTrends.vue' //9  天气趋势、、
-import chartGridDistribution from './chart-gridDistribution.vue' //10 网格分布、、
-import chartFireBrigade from './chart-fireBrigade.vue' //12 防火队、、
-import chartGridStaff from './chart-gridStaff.vue' //13 网格人员、、
-import chartWeatherStation from './chart-weatherStation.vue' //14 气象站、、
-import chartEquipmentDistribution from './chart-equipmentDistribution' //16 设备分布、、
+import chartEvent from './chart-event.vue' //1  隐患整改情况
+import chartForestFarm from './chart-forestFarm.vue' //2  行业高危企业
+import chartEquipmentType from './chart-equipmentType.vue' //3  从业人员分布情况
+import chartFireCause from './chart-fireCause.vue' //4  应急物资、、
+import chartDeviceReportingEvents from './chart-deviceReportingEvents.vue' //5  巡检通过类型统计、、
+// import chartEventTrend from './chart-eventTrend.vue' //6  事件趋势、、
+import chartKeyArea from './chart-keyArea.vue' //7  高发不合格项、、
+import chartAncientTree from './chart-ancientTree.vue' //8  巡检不通过类型统计、、
+// import chartWeatherTrends from './chart-weatherTrends.vue' //9  天气趋势、、
+// import chartGridDistribution from './chart-gridDistribution.vue' //10 网格分布、、
+// import chartFireBrigade from './chart-fireBrigade.vue' //12 防火队、、
+// import chartGridStaff from './chart-gridStaff.vue' //13 网格人员、、
+// import chartWeatherStation from './chart-weatherStation.vue' //14 气象站、、
+// import chartEquipmentDistribution from './chart-equipmentDistribution' //16 设备分布、、
 
 import { getRlt } from '@/api/bigdata'
 import { fontConfig } from '@/api/login'
@@ -166,15 +166,15 @@ export default {
     chartEquipmentType,
     chartFireCause,
     chartDeviceReportingEvents,
-    chartEventTrend,
+    // chartEventTrend,
     chartKeyArea,
     chartAncientTree,
-    chartWeatherTrends,
-    chartGridDistribution,
-    chartFireBrigade,
-    chartGridStaff,
-    chartWeatherStation,
-    chartEquipmentDistribution
+    // chartWeatherTrends,
+    // chartGridDistribution,
+    // chartFireBrigade,
+    // chartGridStaff,
+    // chartWeatherStation,
+    // chartEquipmentDistribution
   },
   data() {
 

src/views/bigdata/chart-ancientTree.vue

@@ -8,7 +8,7 @@
 
 <script>
   import * as echarts from 'echarts';
-  import {getZxgs} from '@/api/bigdata.js'
+  import {selectAdoptionList} from '@/api/bigdata.js'
 
   export default {
     name: 'farm',
@@ -20,17 +20,19 @@
       }
     },
     mounted() {
-      this.zxgs()
+      this.selectAdoptionList()
 
     },
 
     methods: {
       // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=KH0XpN7nyKZZae11
-      zxgs() {
+      selectAdoptionList() {
         let that = this
-        getZxgs().then(resp => {
-          that.data_num = resp.data.value
-          that.data_name = resp.data.name
+        selectAdoptionList({"inspectionResult":"1"}).then(res => {
+          for (let i = 0; i < res.data.length; i++) {
+            that.data_num.push(res.data[i].value)
+            that.data_name.push(res.data[i].name)
+          }
           that.myEcharts();
         })
       },
@@ -41,7 +43,6 @@
         var myChart = echarts.init(chartDom);
         var color = ['#02CDFF', '#62FBE7', '#7930FF', '#ef5f9d', '#ecb935'];
         var option;
-        var data = this.data_num;
         option = {
           color: ["#41FF80"],
           title: {
@@ -71,6 +72,7 @@
               show: true,
               margin: 14,
               fontSize: 10,
+              rotate: '45',
               textStyle: {
                 color: '#ffffff' //X轴文字颜色
               }
@@ -132,7 +134,7 @@
                 ])
               }
             },
-            data: data,
+            data: this.data_num,
             z: 10,
             zlevel: 0
           },
@@ -152,7 +154,7 @@
               symbolPosition: 'start',
               symbolOffset: [0, -1],
               // symbolBoundingData: this.total,
-              data: data,
+              data: this.data_num,
               width: "100%",
               z: 0,
               zlevel: 1

src/views/bigdata/chart-deviceReportingEvents.vue

@@ -8,7 +8,7 @@
 
 <script>
   import * as echarts from 'echarts';
-  import {getSbsbsjsl} from '@/api/bigdata.js'
+  import {selectAdoptionList} from '@/api/bigdata.js'
 
   export default {
     name: 'forestfarm',
@@ -20,17 +20,18 @@
       }
     },
     mounted() {
-      this.sjsbsbsl()
-
+      this.selectAdoptionList()
     },
 
     methods: {
       // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=2nuQSYycLWN0P_EG
-      sjsbsbsl() {
+      selectAdoptionList() {
         let that = this
-        getSbsbsjsl().then(resp => {
-          that.data_num = resp.data.num;
-          that.data_reportor = resp.data.reportor
+        selectAdoptionList({"inspectionResult":"0"}).then(res => {
+          for (let i = 0; i < res.data.length; i++) {
+            that.data_num.push(res.data[i].value)
+            that.data_reportor.push(res.data[i].name)
+          }
           that.myEcharts()
         })
       },
@@ -68,6 +69,7 @@
             axisLabel: {
               // interval: 0,
               // rotate: 40,
+              rotate: '45',
               textStyle: {
                 fontFamily: 'Microsoft YaHei'
               }
@@ -76,7 +78,6 @@
 
           yAxis: {
             type: 'value',
-            max: '500',
             axisLine: {
               show: false,
               lineStyle: {

src/views/bigdata/chart-equipmentType.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import { getCameaCount } from '@/api/bigdata'
+import { selectPersonnelList } from '@/api/bigdata'
 
 import * as echarts from 'echarts'
 
@@ -21,25 +21,24 @@ export default {
     }
   },
   mounted() {
-    this.getCameaCount()
+    this.selectPersonnelList()
   },
 
   methods: {
     // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=XWNjkKJQ3NBt1FK6
 
-    getCameaCount() {
+    selectPersonnelList() {
       let that = this
-      getCameaCount().then(res => {
-        console.log(res)
-        for (let i = 0; i < res.data.deviceCount.length; i++) {
+      selectPersonnelList().then(res => {
+        for (let i = 0; i < res.data.length; i++) {
           that.deviceTypeCount.push({
-            value: res.data.deviceCount[i],
-            name: res.data.deviceType[i],
+            value: res.data[i].value,
+            name: res.data[i].name,
             itemStyle: { color: that.color16() }
           })
+          that.deviceCount.push(res.data[i].value)
+          that.deviceType.push(res.data[i].name)
         }
-        this.deviceCount = res.data.deviceCount
-        this.deviceType = res.data.deviceType
         that.myEcharts()
       })
     },
@@ -89,7 +88,6 @@ export default {
               color: '#07faa9',
               formatter: function() {
                 for (var i in value) {
-                  console.log(value[i])
                   if (i == temp) {
                     temp++
                     return value[i]

src/views/bigdata/chart-event.vue

@@ -1,16 +1,14 @@
 <!-- **************************************NO.2 事件类型 分类*************************************** -->
 <template>
   <div class="chart-container">
-    <div id="event" style="width: 50%; height:21vh;">
-    </div>
-    <div id="event2" style="width: 50%; height:21vh;">
+    <div id="chart-panel"  style="width: 100%; height:23vh;">
     </div>
   </div>
 </template>
 
 <script>
 import {
-  getEventSourceAndTypeStatistics
+  selectStatsMap
 } from '@/api/bigdata'
 
 import * as echarts from 'echarts'
@@ -19,29 +17,32 @@ export default {
   name: 'event',
   data() {
     return {
-      year: 2022,
+      year: new Date().getFullYear(),
       optionData: [],
-      option2Data: []
     }
   },
   mounted() {
-    this.getEventSourceAndTypeStatistics()
+    this.selectStatsMap()
   },
 
   methods: {
-    // 出处 https://echarts.apache.org/examples/zh/editor.html?c=pie-borderRadius
-    //http://192.144.199.210:8080/editor/index.html?chart_id=K8nTnNyu0caN65uT
-    getEventSourceAndTypeStatistics() {
+    // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=i7ECVMUa6Je46WyE
+    selectStatsMap() {
       let that = this
-      getEventSourceAndTypeStatistics({ day: that.year }).then(res => {
-        this.optionData=res.data.source
-        this.option2Data=res.data.type
+      selectStatsMap({ day: that.year }).then(res => {
+        for (let i = 0; i < res.data.length; i++) {
+          that.optionData.push({
+            'name': res.data[i].NAME,
+            'value': res.data[i].VALUE
+          })
+        }
         that.myEcharts()
-        that.myEcharts2()
       })
     },
+
+
     myEcharts() {
-      var chartDom = document.getElementById('event')
+      var chartDom = document.getElementById('chart-panel')
       var myChart = echarts.init(chartDom)
       var color = ['#02CDFF', '#62FBE7', '#7930FF', '#E148EB', '#ecb935']
       var option
@@ -54,7 +55,7 @@ export default {
         },
         series: [
           {
-            name: '事件类型',
+            name: '隐患整改情况',
             type: 'pie',
             center: ['50%', '60%'],
             radius: ['55%', '70%'],
@@ -81,190 +82,13 @@ export default {
       }
       option && myChart.setOption(option)
     },
-    myEcharts2() {
-      var chartDom = document.getElementById('event2')
-      var myChart = echarts.init(chartDom)
-      let dashedPic =
-        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM8AAAAOBAMAAAB6G1V9AAAAD1BMVEX////Kysrk5OTj4+TJycoJ0iFPAAAAG0lEQVQ4y2MYBaNgGAMTQQVFOiABhlEwCugOAMqzCykGOeENAAAAAElFTkSuQmCC'
-      let color = ['#FF8700', '#ffc300', '#00e473', '#009DFF', '#0034ff', '#99ff00', '#E148EB', '#E148EB', '#E148EB', '#E148EB']
-      var option
-      let chartData = this.option2Data
-      let arrName = []
-      let arrValue = []
-      let sum = 0
-      let pieSeries = [],
-        lineYAxis = []
-
-      // 数据处理
-      chartData.forEach((v, i) => {
-        arrName.push(v.name)
-        arrValue.push(v.value)
-        sum = sum + v.value
-      })
-
-      // 图表option整理
-      chartData.forEach((v, i) => {
-        pieSeries.push({
-          name: '沪昆线到达晚点情况',
-          type: 'pie',
-          clockWise: false,
-          hoverAnimation: false,
-          radius: [65 - i * 10 + '%', 66.5 - i * 10 + '%'],
-          center: ['35%', '60%'],
-          label: {
-            show: false
-          },
-          itemStyle: {
-            borderRadius: 20
-          },
-          data: [
-            {
-              value: v.value,
-              name: v.name,
-              itemStyle: {
-                normal: {
-                  borderWidth: 5,
-                  borderColor: color[i]
-                }
-              }
-            },
-            {
-              value: sum - v.value,
-              name: '',
-              itemStyle: {
-                color: 'rgba(0,0,0,0)'
-              }
-            }
-          ]
-        })
-        pieSeries.push({
-          name: '',
-          type: 'pie',
-          silent: true,
-          z: 1,
-          clockWise: false, //顺时加载
-          hoverAnimation: false, //鼠标移入变大
-          radius: [65 - i * 10 + '%', 66.5 - i * 10 + '%'],
-          center: ['35%', '60%'],
-          label: {
-            show: false
-          },
-          itemStyle: {
-            borderCap: 'round',
-            borderJoin: 'round'
-          },
-          data: [
-            {
-              value: 7.5,
-              itemStyle: {
-                color: '#E3F0FF'
-              }
-            },
-            {
-              value: 2.5,
-              name: '',
-              itemStyle: {
-                color: 'rgba(0,0,0,0)'
-              }
-            }
-          ]
-        })
-        v.percent = ((v.value / sum) * 100).toFixed(1) + '%'
-        lineYAxis.push({
-          value: i,
-          textStyle: {
-            rich: {
-              circle: {
-                color: color[i],
-                padding: [0, 0]
-              }
-            }
-          }
-        })
-      })
-
-      option = {
-        color: color,
-        grid: {
-          top: '20%',
-          bottom: '45%',
-          left: '40%',
-          containLabel: false
-        },
-        yAxis: [
-          {
-            type: 'category',
-            inverse: true,
-            axisLine: {
-              show: false
-            },
-            axisTick: {
-              show: false
-            },
-            axisLabel: {
-              formatter: function(params) {
-                let item = chartData[params]
-                console.log(item)
-                return (
-                  '{circle|●}{name|' +
-                  item.name +
-                  '}{bd||}{percent|' +
-                  item.percent +
-                  '}'
-                )
-              },
-              interval: 0,
-              inside: true,
-              textStyle: {
-                color: '#333',
-                fontSize: 10,
-                rich: {
-                  line: {
-                    width: 170,
-                    height: 5,
-                    backgroundColor: { image: dashedPic }
-                  },
-                  name: {
-                    color: '#fff',
-                    fontSize: 10
-                  },
-                  bd: {
-                    color: '#72afff',
-                    padding: [0, 5],
-                    fontSize: 10
-                  },
-                  percent: {
-                    color: '#5cdad0',
-                    fontSize: 10
-                  },
-                  value: {
-                    color: '#333',
-                    fontSize: 16,
-                    fontWeight: 500,
-                    padding: [0, 0, 0, 10]
-                  },
-                  unit: {
-                    fontSize: 14
-                  }
-                }
-              },
-              show: true
-            },
-            data: lineYAxis
-          }
-        ],
-        xAxis: [
-          {
-            show: false
-          }
-        ],
-        series: pieSeries
+     array2obj :function(array, key) {
+      var resObj = {}
+      for (var i = 0; i < array.length; i++) {
+        resObj[array[i][key]] = array[i]
       }
-
-      option && myChart.setOption(option)
-
+      return resObj
     }
-
   }
 
 }

src/views/bigdata/chart-fireBrigade.vue

@@ -45,7 +45,6 @@
 				var color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
 				var option;
         let dataList =that.data_fhd
-        console.log(dataList);
 
         option = {
 				        grid: {

src/views/bigdata/chart-fireCause.vue

@@ -1,14 +1,14 @@
 <!-- **************************************NO.4 隐患*************************************** -->
 <template>
   <div class="chart-container">
-    <div id="danger" style="width: 100%; height:23vh;">
+    <div id="danger" style="width: 100%; height:25vh;">
     </div>
   </div>
 </template>
 
 <script>
   import * as echarts from 'echarts';
-  import {getQhyytj} from '@/api/bigdata.js'
+  import {selectCategoryClassificationList} from '@/api/bigdata.js'
 
   export default {
     name: 'danger',
@@ -16,32 +16,41 @@
       return {
         count: 0,
         data: [],
-        indicator: []
+        indicator: [],
       }
     },
     mounted() {
-      this.qhyytj()
+      this.selectCategoryClassificationList()
     },
 
     methods: {
 
-      qhyytj() {
+      selectCategoryClassificationList() {
         let that = this
-        getQhyytj(null).then(resp => {
-          that.data = resp.data.num
-          that.indicator = resp.data.firesource
+        selectCategoryClassificationList().then(res => {
+          let max=0;
+          for (let i = 0; i < res.data.length; i++) {
+            if(res.data[i].value>max){
+              max=res.data[i].value
+            }
+            that.data.push(res.data[i].value)
+          }
+          for (let i = 0; i < res.data.length; i++) {
+            that.indicator.push({
+              name: res.data[i].name,
+              max: max
+            })
+          }
           that.myEcharts()
         })
       },
 
-      // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=XWNjkKJQ3NBt1FK6
-
       myEcharts() {
 
         let that = this
         var chartDom = document.getElementById('danger');
         var myChart = echarts.init(chartDom);
-        var color = ['#02CDFF', '#62FBE7', '#7930FF', '#E148EB', '#ecb935']
+        var colorArr = ['#55d7f2', '#4BFFFC']; //颜色
         var option;
         // let data = [582, 421, 622, 625, 265]
         let data = this.data;
@@ -69,219 +78,91 @@
         // ]
 
         option = {
-
+          backgroundColor:"#061740",
+          grid: {
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            top: '15%',
+            left: '3%',
+            right: '3%',
+            bottom: '3%',
+            containLabel: true,
+          },
+          tooltip: {
+            trigger: 'item',
+            axisPointer: {
+              type: 'cross',
+              crossStyle: {
+                color: '#999'
+              }
+            }
+          },
           radar: {
-            center: ['50%', '50%'],
-            radius: '89%',
+            radius: "80%", //大小
+            nameGap: 1, // 图中工艺等字距离图的距离
+            center: ["50%", "50%"], // 图的位置
             name: {
-              formatter: function (name, indicator) {
-                let arr;
-                //   if(name=='开卡绑定数'||name=='渠道批量办理业务'){
-                //         arr = [
-                //         '{a|'+name+'}{b|'+indicator.value+'万}'
-                //     ]
-                //   }else{
-                arr = [
-                  '{a|' + name + '}'
-                ]
-                //   }
-
-                return arr.join('\n')
-              },
               textStyle: {
-                rich: { //根据文字的组设置格式
-                  a: {
-                    color: '#13ffdc',
-                    fontSize: 12,
-                    fontFamily: 'Source Han Sans CN',
-                  },
-                  // b:{
-                  //     fontSize:14,
-                  //     verticalAlign:'top',
-                  //     width:57,
-                  //     color:'#8E88FE',
-                  //     fontWeight:600,
-                  //     align:'center'
-                  // },
-                }
-
+                color: "#24adfe",
+                fontSize: "1rem",
+              },
+              formatter: function(name) {
+                return name;
               }
             },
-            nameGap: 0,
             indicator: indicator,
-            splitLine: {
-              show: false
-
-            },
-            splitArea: {
-              show: false
-            },
             axisLine: {
-              show: false
-            }
-          },
-          series: [{
-            // name: '家庭融合包',
-            type: 'radar',
-            data: [data],
-            // value:14,
-            label: {
-              show: true,
-              formatter: function (params) {
-                console.log(params)
-                return params.value;
-              },
-              color: '#ffffff',
-              // position:[-20,-10,-10,-10],
-              align: 'right',
-              distance: 10,
-              align: 'right'
-            },
-            symbolSize: [6, 6],
-            lineStyle: { //边缘颜色
-              width: 0
-            },
-            itemStyle: {
-              borderWidth: 1,
-              color: '#fff',
-              borderColor: '#F2F063',
-            },
-            areaStyle: {
-              color: '#7D77F1',
-              opacity: 0.6
-            }
-          },
-            {
-              type: 'radar',
-              data: [
-                [1000, 1000, 1000, 1000, 1000, 1000],
-              ],
-              symbol: 'none',
-              lineStyle: {
-                width: 0
-              },
-              itemStyle: {
-                color: '#4175F5'
-              },
-
-              areaStyle: {
-                color: '#4175F5',
-                opacity: 0.06
-              }
-            },
-            {
-              type: 'radar',
-              data: [
-                [900, 900, 900, 900, 900, 900],
-              ],
-
-              symbol: 'none',
-              lineStyle: {
-                width: 0
-              },
-              itemStyle: {
-                color: '#2C72C8'
-              },
-
-              areaStyle: {
-                color: '#2C72C8',
-                opacity: 0.12
-              }
-            },
-            {
-              type: 'radar',
-              data: [
-                [800, 800, 800, 800, 800, 800]
-              ],
-
-              symbol: 'none',
               lineStyle: {
-                width: 0
-              },
-              itemStyle: {
-                color: '#4175F5'
-              },
+                color: "rgba(153, 209, 246, 0.2)", //轴颜色
 
-              areaStyle: {
-                color: '#4175F5',
-                opacity: 0.18
               }
             },
-            {
-              type: 'radar',
-              data: [
-                [700, 700, 700, 700, 700, 700]
-              ],
-
-              symbol: 'none',
-              lineStyle: {
-                width: 0
-              },
-              itemStyle: {
-                color: '#4175F5'
-              },
-
+            splitArea: {
+              show: false,
               areaStyle: {
-                color: '#4175F5',
-                opacity: 0.19
+                color: "rgba(36,173,254,1)" // 图表背景的颜色
               }
             },
-            {
-              type: 'radar',
-              data: [
-                [600, 600, 600, 600, 600, 600],
-              ],
-
-              symbol: 'none',
+            splitLine: {
+              show: true,
               lineStyle: {
-                width: 0
-              },
-              itemStyle: {
-                color: '#4175F5'
-              },
-
-              areaStyle: {
-                color: '#4175F5',
-                opacity: 0.17
+                width: 1,
+                color: "rgba(153, 209, 246, 0.2)" // 网格的颜色
               }
-            },
+            }
+          },
+          series: [
             {
-              type: 'radar',
-              data: [
-                [500, 500, 500, 500, 500, 500],
-              ],
-              symbol: 'none',
-              lineStyle: {
-                width: 0
-              },
+              name: "应急物资统计",
+              type: "radar",
+              symbol: "angle",
               itemStyle: {
-                color: '#4175F5'
+                normal: {
+                  areaStyle: { type: "default" }
+                }
               },
-
-              areaStyle: {
-                color: '#4175F5',
-                opacity: 0.16
-              }
-            },
-            {
-              type: 'radar',
               data: [
-                [400, 400, 400, 400, 400, 400],
-              ],
-
-              symbol: 'none',
-              lineStyle: {
-                width: 0
-              },
-              itemStyle: {
-                color: '#4175F5'
-              },
-
-              areaStyle: {
-                color: '#4175F5',
-                opacity: 0.13
-              }
-            },
+                {
+                  symbol: "circle", //圆点
+                  symbolSize: 2, //圆点大小
+                  value: this.data,
+                  areaStyle: { color: "rgba(64, 205, 241, 0.2)" },
+                  itemStyle: {
+                    normal: {
+                      borderWidth:0.5,
+                      color: "#22e4fe",
+                      borderColor: "#22e4fe"
+                    }
+                  },
+                  lineStyle: {
+                    color: "rgba(146, 225, 255, 1)",
+                    width: 0.5
+                  }
+                }
+              ]
+            }
           ]
         };
         option && myChart.setOption(option);

src/views/bigdata/chart-forestFarm.vue

@@ -1,4 +1,4 @@
-<!-- **************************************NO.2 人口*************************************** -->
+<!-- **************************************NO.2 个口*************************************** -->
 <template>
   <div class="chart-container">
     <div id="population" style="width: 100%; height:21vh;">
@@ -8,7 +8,7 @@
 
 <script>
   import * as echarts from 'echarts';
-  import {getLcfbtj} from '@/api/bigdata.js'
+  import {selectIndustryHighList} from '@/api/bigdata.js'
 
   export default {
     name: 'population',
@@ -19,15 +19,14 @@
       }
     },
     mounted() {
-      this.myEcharts()
-      this.lcfbtj()
+      this.selectIndustryHighList()
     },
 
     methods: {
 
-      lcfbtj() {
+      selectIndustryHighList() {
         var that = this
-        getLcfbtj().then(response => {
+        selectIndustryHighList().then(response => {
           that.chartData = response.data
           that.myEcharts()
         })
@@ -103,7 +102,7 @@
 
         option = {
           tooltip: {
-            formatter: '{b} : {c}' + '人',
+            formatter: '{b} : {c}' + '个',
           },
           grid: {
             left: '3%',
@@ -183,7 +182,7 @@
                         stuNum = value.value;
                       }
                     })
-                    return stuNum + '{white| 人}';
+                    return stuNum + '{white| 个}';
                   },
                   textStyle: {
                     color: "#ffc72b",

src/views/bigdata/chart-keyArea.vue

@@ -1,389 +1,393 @@
 <!-- **************************************NO.7 散养户分布*************************************** -->
 <template>
-	<div class="chart-container">
-		<div id="freelyraise" style="width: 100%; height:23vh;">
-		</div>
-	</div>
+  <div class="chart-container">
+    <div id="freelyraise" style="width: 100%; height:23vh;">
+    </div>
+  </div>
 </template>
 
 <script>
-	import * as echarts from 'echarts';
-  import {getZdqy} from '@/api/bigdata.js'
-	export default {
-		name: 'freelyraise',
-		data() {
-			return {
-				count: 0,
-        data: []
-			}
-		},
-		mounted() {
-      this.zdqy()
+import * as echarts from 'echarts'
+import { selectHightAdoptionList } from '@/api/bigdata.js'
 
-		},
+export default {
+  name: 'freelyraise',
+  data() {
+    return {
+      count: 0,
+      data: []
+    }
+  },
+  mounted() {
+    this.selectHightAdoptionList()
 
-		methods: {
-			// 出处 http://192.144.199.210/forum.php?mod=viewthread&tid=6785&highlight=%E6%9F%B1%E7%8A%B6%E5%9B%BE
+  },
 
-      zdqy(){
-        let that = this
-        getZdqy().then(resp => {
-          that.data = resp.data
-          that.myEcharts()
-        })
-      },
-
-			myEcharts() {
+  methods: {
+    // 出处 http://192.144.199.210/forum.php?mod=viewthread&tid=6785&highlight=%E6%9F%B1%E7%8A%B6%E5%9B%BE
 
+    selectHightAdoptionList() {
+      let that = this
+      selectHightAdoptionList().then(res => {
+        for (let i = 0; i < res.data.length; i++) {
+          that.data.push({
+            'name': res.data[i].name,
+            'num': res.data[i].value
+          })
+        }
+        that.myEcharts()
+      })
+    },
 
-				var chartDom = document.getElementById('freelyraise');
-				var myChart = echarts.init(chartDom);
-				var color = ['#02CDFF', '#62FBE7', '#7930FF', '#ef5f9d', '#ecb935'];
-				var option;
-				var data = this.data
-				// let data = [{
-				// 		"name": "双辽市",
-				// 		"num": "18.987691"
-				// 	},
-				// 	{
-				// 		"name": "梨树县",
-				// 		"num": "20.377176"
-				// 	},
-				// 	{
-				// 		"name": "伊通县",
-				// 		"num": "19.127404"
-				// 	},
-				// 	{
-				// 		"name": "铁东区",
-				// 		"num": "18.40882"
-				// 	},
-				// 	{
-				// 		"name": "铁西区",
-				// 		"num": "17.980597"
-				// 	},
-				// ]
+    myEcharts() {
 
-				function contains(arr, dst) {
-					var i = arr.length;
-					while ((i -= 1)) {
-						if (arr[i] == dst) {
-							return i;
-						}
-					}
-					return false;
-				}
+      var chartDom = document.getElementById('freelyraise')
+      var myChart = echarts.init(chartDom)
+      var color = ['#02CDFF', '#62FBE7', '#7930FF', '#ef5f9d', '#ecb935']
+      var option
+      var data = this.data
+      // let data = [{
+      // 		"name": "双辽市",
+      // 		"num": "18.987691"
+      // 	},
+      // 	{
+      // 		"name": "梨树县",
+      // 		"num": "20.377176"
+      // 	},
+      // 	{
+      // 		"name": "伊通县",
+      // 		"num": "19.127404"
+      // 	},
+      // 	{
+      // 		"name": "铁东区",
+      // 		"num": "18.40882"
+      // 	},
+      // 	{
+      // 		"name": "铁西区",
+      // 		"num": "17.980597"
+      // 	},
+      // ]
 
-			 var attackSourcesColor = [
-					new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
-							offset: 0,
-							color: "#EB3B5A"
-						},
-						{
-							offset: 1,
-							color: "#FE9C5A"
-						}
-					]),
-					new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
-							offset: 0,
-							color: "#FA8231"
-						},
-						{
-							offset: 1,
-							color: "#FFD14C"
-						}
-					]),
-					new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
-							offset: 0,
-							color: "#F7B731"
-						},
-						{
-							offset: 1,
-							color: "#FFEE96"
-						}
-					]),
-					new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
-							offset: 0,
-							color: "#21fe8f"
-						},
-						{
-							offset: 1,
-							color: "#38911f"
-						}
-					]),
-					new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
-							offset: 0,
-							color: "#395CFE"
-						},
-						{
-							offset: 1,
-							color: "#2EC7CF"
-						}
-					])
+      function contains(arr, dst) {
+        var i = arr.length
+        while ((i -= 1)) {
+          if (arr[i] == dst) {
+            return i
+          }
+        }
+        return false
+      }
 
-				];
-				var attackSourcesColor1 = [
-					"#EB3B5A",
-					"#FA8231",
-					"#F7B731",
-					"#38911f",
-					"#3860FC",
-					"#F57474",
-					"#56D0E3",
-					"#1089E7",
-					"#F57474",
-					"#1089E7",
-					"#F57474",
-					"#F57474"
-				];
-				var attaData = [];
-				var attaName = [];
-				var topName = []
-				data.forEach((it, index) => {
-					attaData[index] = parseFloat(it.num).toFixed(0);
-					//attaData[index] = parseInt(it.num);
-					attaName[index] = it.name;
-					topName[index] = `${it.name}`
-				});
-				var salvProMax = [];
-				var max = attaData[0];
-				for (let i = 0; i < attaData.length; i++) {
-					max = max < attaData[i + 1] ? attaData[i + 1] : max;
-				}
-				for (let i = 0; i < attaData.length; i++) {
-					salvProMax.push(max); //背景按最大值
-				}
+      var attackSourcesColor = [
+        new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
+          offset: 0,
+          color: '#EB3B5A'
+        },
+          {
+            offset: 1,
+            color: '#FE9C5A'
+          }
+        ]),
+        new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
+          offset: 0,
+          color: '#FA8231'
+        },
+          {
+            offset: 1,
+            color: '#FFD14C'
+          }
+        ]),
+        new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
+          offset: 0,
+          color: '#F7B731'
+        },
+          {
+            offset: 1,
+            color: '#FFEE96'
+          }
+        ]),
+        new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
+          offset: 0,
+          color: '#21fe8f'
+        },
+          {
+            offset: 1,
+            color: '#38911f'
+          }
+        ]),
+        new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
+          offset: 0,
+          color: '#395CFE'
+        },
+          {
+            offset: 1,
+            color: '#2EC7CF'
+          }
+        ])
 
-				function attackSourcesDataFmt(sData) {
-					var sss = [];
-					sData.forEach(function(item, i) {
-						let itemStyle = {
-							color: i > 5 ? attackSourcesColor[5] : attackSourcesColor[i]
-						};
-						sss.push({
-							value: item,
-							itemStyle: itemStyle
-						});
-					});
-					return sss;
-				}
+      ]
+      var attackSourcesColor1 = [
+        '#EB3B5A',
+        '#FA8231',
+        '#F7B731',
+        '#38911f',
+        '#3860FC',
+        '#F57474',
+        '#56D0E3',
+        '#1089E7',
+        '#F57474',
+        '#1089E7',
+        '#F57474',
+        '#F57474'
+      ]
+      var attaData = []
+      var attaName = []
+      var topName = []
+      data.forEach((it, index) => {
+        attaData[index] = parseFloat(it.num).toFixed(0)
+        //attaData[index] = parseInt(it.num);
+        attaName[index] = it.name
+        topName[index] = `${it.name}`
+      })
+      var salvProMax = []
+      var max = attaData[0]
+      for (let i = 0; i < attaData.length; i++) {
+        max = max < attaData[i + 1] ? attaData[i + 1] : max
+      }
+      for (let i = 0; i < attaData.length; i++) {
+        salvProMax.push(max) //背景按最大值
+      }
 
-				option = {
-					tooltip: {
-						show: false,
-						backgroundColor: "rgba(3,169,244, 0.5)", //背景颜色（此时为默认色）
-						textStyle: {
-							fontSize: 12
-						}
-			  },
-					color: ["#F7B731"],
-					legend: {
-						show: false,
-						pageIconSize: [12, 12],
-						itemWidth: 20,
-						itemHeight: 10,
-						textStyle: {
-							//图例文字的样式
-							fontSize: 12,
-							color: "#fff"
-						},
-						selectedMode: false,
-						data: ["个人所得(亿元)"]
-					},
-					grid: {
-						left: '12%',
-						width: '70%',
-						bottom: '5%',
-						top: "8%",
-					},
-					xAxis: {
-						type: "value",
+      function attackSourcesDataFmt(sData) {
+        var sss = []
+        sData.forEach(function(item, i) {
+          let itemStyle = {
+            color: i > 5 ? attackSourcesColor[5] : attackSourcesColor[i]
+          }
+          sss.push({
+            value: item,
+            itemStyle: itemStyle
+          })
+        })
+        return sss
+      }
 
-						splitLine: {
-							show: false
-						},
-						axisLabel: {
-							show: false
-						},
-						axisTick: {
-							show: false
-			  	},
-						axisLine: {
-							show: false
-						}
-					},
-					yAxis: [{ //左侧排行数字
-							type: "category",
-							inverse: true,
-			  		axisLine: {
-								show: false
-							},
-							axisTick: {
-								show: false
-							},
-							axisPointer: {
-								label: {
-									show: true,
-									//margin: 30
-								}
-			 			},
-							padding: [5, 0, 0, 0],
-							postion: "right",
-							data: attaName,
-							axisLabel: {
-								margin: 30,
-								fontSize: 12,
-			  			align: "left",
-								padding: [2, 0, 0, 0],
-								color: "#000",
-								rich: {
-									nt1: {
-										color: "#fff",
-										backgroundColor: attackSourcesColor1[0],
-										width: 15,
-										height: 15,
-										fontSize: 12,
-										align: "center",
-										borderRadius: 100,
-										lineHeight: "5",
-										padding: [0, 1, 2, 1]
-										// padding:[0,0,2,0],
-									},
-									nt2: {
-										color: "#fff",
-										backgroundColor: attackSourcesColor1[1],
-										width: 15,
-										height: 15,
-										fontSize: 12,
-										align: "center",
-										borderRadius: 100,
-										padding: [0, 1, 2, 1]
-									},
-									nt3: {
-										color: "#fff",
-										backgroundColor: attackSourcesColor1[2],
-										width: 15,
-										height: 15,
-										fontSize: 12,
-										align: "center",
-										borderRadius: 100,
-										padding: [0, 1, 2, 1]
-									},
-									nt: {
-										color: "#fff",
-										backgroundColor: attackSourcesColor1[3],
-										width: 15,
-			  					height: 15,
-										fontSize: 12,
-										align: "center",
-										lineHeight: 3,
-										borderRadius: 100,
-										padding: [0, 1, 2, 1],
-										lineHeight: 5
-									}
-								},
+      option = {
+        tooltip: {
+          show: false,
+          backgroundColor: 'rgba(3,169,244, 0.5)', //背景颜色（此时为默认色）
+          textStyle: {
+            fontSize: 12
+          }
+        },
+        color: ['#F7B731'],
+        legend: {
+          show: false,
+          pageIconSize: [12, 12],
+          itemWidth: 20,
+          itemHeight: 10,
+          textStyle: {
+            //图例文字的样式
+            fontSize: 12,
+            color: '#fff'
+          },
+          selectedMode: false,
+          data: ['个人所得(亿元)']
+        },
+        grid: {
+          left: '12%',
+          width: '70%',
+          bottom: '5%',
+          top: '8%'
+        },
+        xAxis: {
+          type: 'value',
 
-							}
-						},
-						{ //右侧名字
-							type: "category",
-							inverse: true,
-							axisTick: "none",
-							axisLine: "none",
-							show: true,
-							axisLabel: {
-								textStyle: {
-									color: "#fff",
-									fontSize: "12"
-								}
-							},
-							//data: attackSourcesDataFmt(attaName)
-							data: attackSourcesDataFmt(attaData) //数字
-						},
-						{ //名称
-							type: 'category',
-							offset: -10,
-							position: "left",
-							axisLabel: {
-								color: `#fff`,
-								fontSize: 10
-							},
-			  		axisLine: {
-								show: false
-							},
-							inverse: true,
-							axisTick: {
-								show: false
-							},
-							axisLabel: {
-								interval: 0,
-								color: ["#fff"],
-								align: "left",
-								verticalAlign: "bottom",
-								lineHeight: 32,
-								fontSize: 12
-							},
-							data: topName
-			 		},
-					],
-					series: [{ //条形图数值
-							zlevel: 1,
-							name: "个人所得(亿元)",
-							type: "bar",
-							barWidth: "8px",
-							animationDuration: 1500,
-							data: attackSourcesDataFmt(attaData),
-							align: "center",
-							itemStyle: {
-								normal: {
-									barBorderRadius: 10
-								}
-							},
-							label: {
-								show: false,
-			 				fontSize: 12,
-			  			color: "#fff",
-								textBorderWidth: 2,
-								padding: [2, 0, 0, 0]
-							}
-						},
-						{ //最大值背景条形图
-							name: "个人所得(亿元)",
-							type: "bar",
-							barWidth: 8,
-							barGap: "-100%",
-							margin: "20",
-							data: salvProMax,
-							textStyle: {
-								//图例文字的样式
-								fontSize: 12,
-								color: "#fff"
-							},
-							itemStyle: {
-								normal: {
-									color: "#05325F",
-									//width:"100%",
-									fontSize: 12,
-									barBorderRadius: 30
-								},
-							}
-						}
-					]
-				};
-				option && myChart.setOption(option);
-			},
+          splitLine: {
+            show: false
+          },
+          axisLabel: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          }
+        },
+        yAxis: [{ //左侧排行
+          type: 'category',
+          inverse: true,
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisPointer: {
+            label: {
+              show: true
+              //margin: 30
+            }
+          },
+          padding: [5, 0, 0, 0],
+          postion: 'right',
+          data: attaName,
+          axisLabel: {
+            margin: 30,
+            fontSize: 12,
+            align: 'left',
+            padding: [2, 0, 0, 0],
+            color: '#000',
+            rich: {
+              nt1: {
+                color: '#fff',
+                backgroundColor: attackSourcesColor1[0],
+                width: 15,
+                height: 15,
+                fontSize: 12,
+                align: 'center',
+                borderRadius: 100,
+                lineHeight: '5',
+                padding: [0, 1, 2, 1]
+                // padding:[0,0,2,0],
+              },
+              nt2: {
+                color: '#fff',
+                backgroundColor: attackSourcesColor1[1],
+                width: 15,
+                height: 15,
+                fontSize: 12,
+                align: 'center',
+                borderRadius: 100,
+                padding: [0, 1, 2, 1]
+              },
+              nt3: {
+                color: '#fff',
+                backgroundColor: attackSourcesColor1[2],
+                width: 15,
+                height: 15,
+                fontSize: 12,
+                align: 'center',
+                borderRadius: 100,
+                padding: [0, 1, 2, 1]
+              },
+              nt: {
+                color: '#fff',
+                backgroundColor: attackSourcesColor1[3],
+                width: 15,
+                height: 15,
+                fontSize: 12,
+                align: 'center',
+                lineHeight: 3,
+                borderRadius: 100,
+                padding: [0, 1, 2, 1],
+                lineHeight: 5
+              }
+            }
 
-		},
+          }
+        },
+          { //右侧名字
+            type: 'category',
+            inverse: true,
+            axisTick: 'none',
+            axisLine: 'none',
+            show: true,
+            axisLabel: {
+              textStyle: {
+                color: '#fff',
+                fontSize: '12'
+              }
+            },
+            //data: attackSourcesDataFmt(attaName)
+            data: attackSourcesDataFmt(attaData) //数字
+          },
+          { //名称
+            type: 'category',
+            offset: -10,
+            position: 'left',
+            axisLabel: {
+              color: `#fff`,
+              fontSize: 10
+            },
+            axisLine: {
+              show: false
+            },
+            inverse: true,
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              interval: 0,
+              color: ['#fff'],
+              align: 'left',
+              verticalAlign: 'bottom',
+              lineHeight: 32,
+              fontSize: 12
+            },
+            data: topName
+          }
+        ],
+        series: [{ //条形图数值
+          zlevel: 1,
+          name: '高发不合格项',
+          type: 'bar',
+          barWidth: '8px',
+          animationDuration: 1500,
+          data: attackSourcesDataFmt(attaData),
+          align: 'center',
+          itemStyle: {
+            normal: {
+              barBorderRadius: 10
+            }
+          },
+          label: {
+            show: false,
+            fontSize: 12,
+            color: '#fff',
+            textBorderWidth: 2,
+            padding: [2, 0, 0, 0]
+          }
+        },
+          { //最大值背景条形图
+            name: '个人所得(亿元)',
+            type: 'bar',
+            barWidth: 8,
+            barGap: '-100%',
+            margin: '20',
+            data: salvProMax,
+            textStyle: {
+              //图例文字的样式
+              fontSize: 12,
+              color: '#fff'
+            },
+            itemStyle: {
+              normal: {
+                color: '#05325F',
+                //width:"100%",
+                fontSize: 12,
+                barBorderRadius: 30
+              }
+            }
+          }
+        ]
+      }
+      option && myChart.setOption(option)
+    }
 
+  }
 
-	}
+}
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-	.chart-container {
-		width: 100%;
-		height: auto;
-		position: relative;
-		padding-bottom: 10px;
-		display: flex;
-	}
+.chart-container {
+  width: 100%;
+  height: auto;
+  position: relative;
+  padding-bottom: 10px;
+  display: flex;
+}
 </style>