增加热力图联动

pages/showdata/index.vue

@@ -25,21 +25,21 @@
                <div id="ZBCount"></div>
              </el-col>
              <el-col span="24" style="text-align: center">
-               <h6>全国数据热力图</h6>
+               <h6>全国中标价格数据热力图</h6>
                <div id="chinaByPrice"></div>
              </el-col>
              <el-col span="24">
-               <h6>每月份招标公告和中标结果公示分析</h6>
+               <h6>每月份招标公告和中标结果公示分析{{this.titleNameAddr}}</h6>
                <div id="ZBandJGByMon"></div>
              </el-col>
 
              <el-col span="24">
-             <h6>招标公告中招标人分析</h6>
+             <h6>招标公告中招标人分析{{this.titleNameAddr}}</h6>
              <div id="depByMon"></div>
            </el-col>
 
              <el-col span="24">
-               <h6>中标结果公示每月金额分析</h6>
+               <h6>中标结果公示每月金额分析{{this.titleNameAddr}}</h6>
                <div id="priceByMon"></div>
              </el-col>
 
@@ -72,6 +72,11 @@ export default {
   },
   data () {
     return {
+      onMapClick:false,
+      onMapName:'',
+      chinaMapData:'',
+      titleNameAddr:'',
+      key:'',
       allCount:0,
       zbCount:0,
       jgCount:0
@@ -104,10 +109,11 @@ export default {
         {name:'天津市',value:39.13},
 
       ]
-
+      let thiss=this
       getSumPriceByAddr().then(res=>{
         this.$echarts.registerMap('chinaMap',chinaJson)
-        console.log(res.data)
+        thiss.chinaMapData=res
+
         let option = {
           tooltip: {
             trigger: 'item'
@@ -145,6 +151,38 @@ export default {
             calculable: true //出现滑块
           }
         }
+        let that=this
+        mCharts.on('click', function (params) {
+
+          if (typeof(params.data)!="undefined"&&that.onMapName!=params.data.name){
+            // alert("1")
+            that.onMapClick=true;
+            that.onMapName=params.data.name
+          }else if(typeof(params.data)!="undefined"&&that.onMapName==params.data.name) {
+            // alert("12")
+            that.onMapClick=false;
+            that.onMapName=''
+          }else if(typeof(params.data)=="undefined"){
+            // alert("123")
+            that.onMapClick=false;
+            that.onMapName='1'
+          }
+          // alert( that.onMapName)
+
+          if ( that.onMapClick){
+            that.key=params.data.name+' 工程';
+            that.titleNameAddr="("+params.data.name+")"
+            that.echartsInit5()
+            that.echartsInit6()
+            that.echartsInit4()
+          }else {
+            that.key='';
+            that.titleNameAddr=''
+            that.echartsInit5()
+            that.echartsInit6()
+            that.echartsInit4()
+          }
+        });
         mCharts.setOption(option)
       })
       let that=this;
@@ -171,14 +209,20 @@ export default {
             orient: 'vertical',
             left: 'left'
           },
+          label:{
+            show:true,
+            position:'inner',
+            formatter:'{d}%'
+          },
           series: [
             {
               name: '访问来源',
               type: 'pie',
               radius: '55%',
               data: [
-                {value: (res.data.clean-res.data.noClean), name: '已清洗'},
+                {value: (res.data.clean-res.data.noClean-res.data.dirty), name: '已清洗'},
                 {value: res.data.noClean, name: '未清洗'},
+                {value: res.data.dirty, name: '模糊数据'},
 
               ]
             }
@@ -207,14 +251,21 @@ export default {
             orient: 'vertical',
             left: 'left'
           },
+          label:{
+            show:true,
+            position:'inner',
+            formatter:'{d}%'
+          },
+
           series: [
             {
               name: '访问来源',
               type: 'pie',
               radius: '55%',
               data: [
-                {value: (res.data[0].count-res.data[2].count), name: '已清洗'},
+                {value: (res.data[0].count-res.data[2].count-res.data[4].count), name: '已清洗'},
                 {value: res.data[2].count, name: '未清洗'},
+                {value: res.data[4].count, name: '模糊数据'},
 
               ]
             }
@@ -228,18 +279,26 @@ export default {
           tooltip: {
             trigger: 'item'
           },
+
           legend: {
             orient: 'vertical',
             left: 'left'
           },
+          label:{
+            show:true,
+            position:'inner',
+            formatter:'{d}%'
+          },
           series: [
             {
+
               name: '访问来源',
               type: 'pie',
               radius: '55%',
               data: [
-                {value: (res.data[1].count-res.data[3].count), name: '已清洗'},
+                {value: (res.data[1].count-res.data[3].count-res.data[5].count), name: '已清洗'},
                 {value: res.data[3].count, name: '未清洗'},
+                {value: res.data[5].count, name: '模糊数据'},
 
               ]
             }
@@ -256,7 +315,7 @@ export default {
     },
     echartsInit4 () {
 
-      getTypeByMon().then(res=>{
+      getTypeByMon(this.key).then(res=>{
 
         var data1=['招标公告'];
         var data2=['中标结果公示'];
@@ -369,7 +428,7 @@ export default {
 
     },
     echartsInit5 () {
-      getCountByDepType().then(res=>{
+      getCountByDepType(this.key).then(res=>{
 
         var data1=[];
         var data2=[];
@@ -463,7 +522,7 @@ export default {
     },
     echartsInit6 () {
 
-      selectAllSumPriceByMon().then(res=>{
+      selectAllSumPriceByMon(this.key).then(res=>{
 
         var data1=[];
         var data2=[];

static/js/api/echarts.js

@@ -11,10 +11,11 @@ export function getAllCount() {
 
 
 // 查询用户评论列表
-export function selectAllSumPriceByMon() {
+export function selectAllSumPriceByMon(query) {
     return request({
-        url: '/gc/selectAllSumPriceByMon',
+        url: '/gc/selectAllSumPriceByMon?key='+query,
         method: 'get',
+
     })
 }
 
@@ -27,20 +28,22 @@ export function getCleanCake() {
 }
 
 // 查询用户评论列表
-export function getTypeByMon() {
+export function getTypeByMon(query) {
     return request({
-        url: '/gc/getTypeByMon',
+        url: '/gc/getTypeByMon?key='+query,
         method: 'get',
+
     })
 }
 
 
 
 // 查询用户评论列表
-export function getCountByDepType() {
+export function getCountByDepType(query) {
     return request({
-        url: '/gc/getCountByDepType',
+        url: '/gc/getCountByDepType?key='+query,
         method: 'get',
+
     })
 }