增加热力图

pages/showdata/index.vue

@@ -10,19 +10,24 @@
                <h5>https://ctbpsp.com/</h5>
              </el-col>
 
+
+
              <el-col span="8" style="text-align: center">
                爬取总数:  <span v-html="allCount"></span>
                <div id="allCount"></div>
              </el-col>
              <el-col span="8" style="text-align: center">
-               招标公告:<span v-html="zbCount"></span>
-               <div id="ZBCount"></div>
+               招标公告:<span v-html="jgCount"></span>
+               <div id="JGCount"></div>
              </el-col>
              <el-col span="8" style="text-align: center">
-               中标结果公示:<span v-html="jgCount"></span>
-               <div id="JGCount"></div>
+               中标结果公示:<span v-html="zbCount"></span>
+               <div id="ZBCount"></div>
+             </el-col>
+             <el-col span="24" style="text-align: center">
+               <h6>全国数据热力图</h6>
+               <div id="chinaByPrice"></div>
              </el-col>
-
              <el-col span="24">
                <h6>每月份招标公告和中标结果公示分析</h6>
                <div id="ZBandJGByMon"></div>
@@ -55,7 +60,9 @@
   </div>
 </template>
 <script type="text/javascript">
-import {getAllCount,selectAllSumPriceByMon,getCleanCake,getTypeByMon,getCountByDepType} from "../../static/js/api/echarts"
+import axios from 'axios';
+import chinaJson from '../../static/json/china_full.json'
+import {getAllCount,selectAllSumPriceByMon,getCleanCake,getTypeByMon,getCountByDepType,getSumPriceByAddr} from "../../static/js/api/echarts"
 export default {
   name: 'Echarts',
   head(){
@@ -89,6 +96,65 @@ export default {
         }]
       })
     },
+
+    echartsInit0(){
+      let mCharts = this.$echarts.init(document.getElementById('chinaByPrice'));
+      let airData = [
+        {name:'北京市',value:39.93},
+        {name:'天津市',value:39.13},
+
+      ]
+
+      getSumPriceByAddr().then(res=>{
+        this.$echarts.registerMap('chinaMap',chinaJson)
+        console.log(res.data)
+        let option = {
+          tooltip: {
+            trigger: 'item'
+          },
+          geo: {
+            type: 'map',
+            map: 'chinaMap', //chinaMap需要和registerMap中的第一个参数保持一致
+            roam: true, // 设置允许缩放以及拖动的效果
+            label: {
+              show: true  //展示标签
+            },
+            zoom: 3, //设置初始化的缩放比例
+            center: [104.114129, 37.550339],
+
+          },
+          series: [
+            {
+              name:"中标总金额(元)",
+              data: res.data,
+              geoIndex: 0,  //将空气质量的数据和第0个geo配置关联在一起
+              type:'map',
+              label: {
+                formatter: '{b}',
+                position: 'right',
+                show: true
+              },
+            }
+          ],
+          visualMap:{
+            min:0,
+            max:4000000000000,
+            inRange:{
+              color:['white', 'red'], //控制颜色渐变的范围
+            },
+            calculable: true //出现滑块
+          }
+        }
+        mCharts.setOption(option)
+      })
+      let that=this;
+
+      console.log(airData)
+
+
+    },
+
+
     echartsInit1 () {
       let that=this
       getAllCount().then(res=>{
@@ -465,6 +531,7 @@ export default {
     },
   },
   mounted () {
+    this.echartsInit0();
     this.echartsInit()
     this.echartsInit1()
     this.echartsInit2()
@@ -479,6 +546,13 @@ export default {
 h6{
   text-align: center;
 }
+#chinaByPrice{
+  width: 100%;
+  height: 600px;
+  margin-left: auto;
+  margin-right: auto;
+  float: left;
+}
 #ZBCount{
   width: 100%;
   height: 300px;

static/js/api/echarts.js

@@ -42,4 +42,12 @@ export function getCountByDepType() {
         url: '/gc/getCountByDepType',
         method: 'get',
     })
+}
+
+// 查询用户评论列表
+export function getSumPriceByAddr() {
+    return request({
+        url: '/gc/getSumPriceByAddr',
+        method: 'get',
+    })
 }