gs_nuxt/pages/showdata/index.vue

<template>
  <div>
    <el-container>
     <el-main>
       <el-row>
         <el-col span="12" offset="6" style="border: #b11116 solid 1px;padding: 15px">
           <el-row>
             <el-col span="24" style="text-align: center">
               <h3>中国招投标公共服务平台爬虫</h3>
               <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="jgCount"></span>
               <div id="JGCount"></div>
             </el-col>
             <el-col span="8" style="text-align: center">
               中标结果公示:<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>每月份招标公告和中标结果公示分析{{this.titleNameAddr}}</h6>
               <div id="ZBandJGByMon"></div>
             </el-col>

             <el-col span="24">
             <h6>招标公告中招标人分析{{this.titleNameAddr}}</h6>
             <div id="depByMon"></div>
           </el-col>

             <el-col span="24">
               <h6>中标结果公示每月金额分析{{this.titleNameAddr}}</h6>
               <div id="priceByMon"></div>
             </el-col>


             <el-col span="24">
               <div id="echarts">
                 <div id="myChart"></div>
                 <div id="myChart2"></div>
               </div>
             </el-col>
           </el-row>


         </el-col>
       </el-row>
     </el-main>
    </el-container>
  </div>
</template>
<script type="text/javascript">
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(){
    return{
      title:"中国招投标公共服务平台爬虫分析"
    }
  },
  data () {
    return {
      onMapClick:false,
      onMapName:'',
      chinaMapData:'',
      titleNameAddr:'',
      key:'',
      allCount:0,
      zbCount:0,
      jgCount:0
    }
  },
  methods: {
    echartsInit () {
      // 找到容器
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      // 开始渲染
      myChart.setOption({
        title: {text: '在Vue中使用echarts'},
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      })
    },

    echartsInit0(){
      let mCharts = this.$echarts.init(document.getElementById('chinaByPrice'));
      let airData = [
        {name:'北京市',value:39.93},
        {name:'天津市',value:39.13},

      ]
      let thiss=this
      getSumPriceByAddr().then(res=>{
        this.$echarts.registerMap('chinaMap',chinaJson)
        thiss.chinaMapData=res

        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 //出现滑块
          }
        }
        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;

      console.log(airData)


    },


    echartsInit1 () {
      let that=this
      getAllCount().then(res=>{

        that.allCount=res.data.clean;

        let myChart = this.$echarts.init(document.getElementById('allCount'))
        myChart.setOption({
          // title: {text: 'echarts 饼图'},
          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.clean-res.data.noClean-res.data.dirty), name: '已清洗'},
                {value: res.data.noClean, name: '未清洗'},
                {value: res.data.dirty, name: '模糊数据'},

              ]
            }
          ]
        })
      })


    },
    echartsInit2 () {
      let that=this
      getCleanCake().then(res=>{


        that.zbCount=res.data[0].count;
        that.jgCount=res.data[1].count;


        let myChart1 = this.$echarts.init(document.getElementById('ZBCount'))
        myChart1.setOption({
          // title: {text: 'echarts 饼图'},
          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[0].count-res.data[2].count-res.data[4].count), name: '已清洗'},
                {value: res.data[2].count, name: '未清洗'},
                {value: res.data[4].count, name: '模糊数据'},

              ]
            }
          ]
        })


        let myChart2 = this.$echarts.init(document.getElementById('JGCount'))
        myChart2.setOption({
          // title: {text: 'echarts 饼图'},
          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-res.data[5].count), name: '已清洗'},
                {value: res.data[3].count, name: '未清洗'},
                {value: res.data[5].count, name: '模糊数据'},

              ]
            }
          ]
        })

      })



    },
    echartsInit3 () {

    },
    echartsInit4 () {

      getTypeByMon(this.key).then(res=>{

        var data1=['招标公告'];
        var data2=['中标结果公示'];
        var data3=['日期'];
        for(let i=0;i<res.data.gg.length;i++){
          data3.push(res.data.gg[i].mon)
        }
        for(let i=0;i<res.data.gg.length;i++){
          data1.push(res.data.gg[i].count)
        }
        for(let i=0;i<res.data.jg.length;i++){
          data2.push(res.data.jg[i].count)
        }




        var chartDom = document.getElementById('ZBandJGByMon');
        var myChart = this.$echarts.init(chartDom);
        var option;

        setTimeout(function () {
          option = {
            legend: {},
            tooltip: {
              trigger: 'axis',
              showContent: false
            },
            dataset: {
              source: [
                data3,data1,data2,
              ]
            },
            xAxis: { type: 'category' },
            yAxis: { gridIndex: 0 },
            grid: { top: '55%' },
            series: [
              {
                type: 'line',
                smooth: true,
                seriesLayoutBy: 'row',
                emphasis: { focus: 'series' }
              },
              {
                type: 'line',
                smooth: true,
                seriesLayoutBy: 'row',
                emphasis: { focus: 'series' }
              },
              {
                type: 'line',
                smooth: true,
                seriesLayoutBy: 'row',
                emphasis: { focus: 'series' }
              },
              {
                type: 'line',
                smooth: true,
                seriesLayoutBy: 'row',
                emphasis: { focus: 'series' }
              },
              {
                type: 'pie',
                id: 'pie',
                radius: '30%',
                center: ['50%', '25%'],
                emphasis: {
                  focus: 'self'
                },
                label: {
                  formatter: '{b}: {@2012} ({d}%)'
                },
                encode: {
                  itemName: 'product',
                  value: '2012',
                  tooltip: '2012'
                }
              }
            ]
          };
          myChart.on('updateAxisPointer', function (event) {
            const xAxisInfo = event.axesInfo[0];
            if (xAxisInfo) {
              const dimension = xAxisInfo.value + 1;
              myChart.setOption({
                series: {
                  id: 'pie',
                  label: {
                    formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                  },
                  encode: {
                    value: dimension,
                    tooltip: dimension
                  }
                }
              });
            }
          });
          myChart.setOption(option);
        });

        option && myChart.setOption(option);




      })



    },
    echartsInit5 () {
      getCountByDepType(this.key).then(res=>{

        var data1=[];
        var data2=[];
        var data3=[];
        for(let i=0;i<res.data.dw.length;i++){
          data3.push(res.data.dw[i].mon)
        }
        for(let i=0;i<res.data.dw.length;i++){
          data1.push(res.data.dw[i].count)
        }
        for(let i=0;i<res.data.gs.length;i++){
          data2.push(res.data.gs[i].count)
        }


        var chartDom = document.getElementById('depByMon');
        var myChart = this.$echarts.init(chartDom);
        var option;

        option = {
          title: {
            // text: '招标公告中招标人成分分析'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          legend: {
            data: ['公司', '单位']
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: data3
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '公司',
              type: 'line',
              stack: 'Total',
              areaStyle: {},
              emphasis: {
                focus: 'series'
              },
              data: data2
            },
            {
              name: '单位',
              type: 'line',
              stack: 'Total',
              areaStyle: {},
              emphasis: {
                focus: 'series'
              },
              data: data1
            },

          ]
        };

        option && myChart.setOption(option);



      })


    },
    echartsInit6 () {

      selectAllSumPriceByMon(this.key).then(res=>{

        var data1=[];
        var data2=[];
        for(let i=0;i<res.data.length;i++){
          data1.push(res.data[i].mon)
        }
        for(let i=0;i<res.data.length;i++){
          data2.push(res.data[i].price)
        }

        var chartDom = document.getElementById('priceByMon');
        var myChart = this.$echarts.init(chartDom);
        var option;

        option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'top'
          },
          xAxis: {
            type: 'category',
            data: data1
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: data2,
              type: 'bar'
            }
          ],
          dataZoom: [
            {
              show: true,
              start: 74,
              end: 100
            },
            {
              type: 'inside',
              start: 94,
              end: 100
            },
            {
              show: true,
              yAxisIndex: 0,
              filterMode: 'empty',
              width: 30,
              height: '80%',
              showDataShadow: false,
              left: '93%'
            }
          ],
        };

        option && myChart.setOption(option);


      })


    },
  },
  mounted () {
    this.echartsInit0();
    this.echartsInit()
    this.echartsInit1()
    this.echartsInit2()
    this.echartsInit3()
    this.echartsInit4()
    this.echartsInit5()
    this.echartsInit6()
  }
}
</script>
<style scoped >
h6{
  text-align: center;
}
#chinaByPrice{
  width: 100%;
  height: 600px;
  margin-left: auto;
  margin-right: auto;
  float: left;
}
#ZBCount{
  width: 100%;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
  float: left;
}
#JGCount{
  width: 100%;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
  float: right;
}
#allCount{
  width: 100%;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
  float: right;
}
#ZBandJGByMon{
  width: 100%;
  height: 700px;
  margin-left: auto;
  margin-right: auto;
  float: right;
}
#depByMon{
  width: 100%;
  height: 700px;
  margin-left: auto;
  margin-right: auto;
  float: right;
}
#priceByMon{
  width: 100%;
  height: 500px;
  margin-left: auto;
  margin-right: auto;
  float: right;
}
h6{
  font-size: 18px;
  margin-top: 25px;
  text-align: center;
}
</style>