测试表单

nuxt.config.js

@@ -28,7 +28,7 @@ export default {
   css: ['element-ui/lib/theme-chalk/index.css'],
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
-  plugins: ['@/plugins/element-ui'],
+  plugins: [{src:'@/plugins/element-ui'},{src:'@/plugins/echarts.js'}],
 
   // Auto import components: https://go.nuxtjs.dev/config-components
   components: true,
@@ -42,7 +42,26 @@ export default {
   ],
 
   // Modules: https://go.nuxtjs.dev/config-modules
-  modules: [],
+  modules: [
+    '@nuxtjs/axios',
+    '@nuxtjs/proxy'
+
+  ],
+
+  axios: {
+    proxy: true // Can be also an object with default options
+  },
+  // proxy: {
+  //   '/api': {
+  //     changeOrigin: true,
+  //     target: 'http://localhost:8090/website/', // 允许跨域的服务器地址
+  //     pathRewrite: {
+  //       '^/api': ''
+  //     }
+  //   }
+  // },
+
+
 
   // Build Configuration: https://go.nuxtjs.dev/config-build
   build: {

package.json

@@ -21,9 +21,11 @@
     "*.**": "prettier --check --ignore-unknown"
   },
   "dependencies": {
+    "@nuxtjs/axios": "^5.13.6",
     "axios": "^0.24.0",
     "core-js": "^3.19.3",
     "cross-env": "^7.0.3",
+    "echarts": "^5.3.2",
     "element-ui": "^2.15.6",
     "js-cookie": "^3.0.1",
     "nuxt": "^2.15.8",
@@ -36,6 +38,7 @@
     "@babel/eslint-parser": "^7.16.3",
     "@commitlint/cli": "^15.0.0",
     "@commitlint/config-conventional": "^15.0.0",
+    "@gauseen/nuxt-proxy": "^1.0.1",
     "@nuxt/types": "^2.15.8",
     "@nuxtjs/eslint-config": "^8.0.0",
     "@nuxtjs/eslint-module": "^3.0.2",

pages/showdata/index.vue

@@ -0,0 +1,524 @@
+<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="zbCount"></span>
+               <div id="ZBCount"></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="24">
+               <h6>每月份招标公告和中标结果公示分析</h6>
+               <div id="ZBandJGByMon"></div>
+             </el-col>
+
+             <el-col span="24">
+             <h6>招标公告中招标人分析</h6>
+             <div id="depByMon"></div>
+           </el-col>
+
+             <el-col span="24">
+               <h6>中标结果公示每月金额分析</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 {getAllCount,selectAllSumPriceByMon,getCleanCake,getTypeByMon,getCountByDepType} from "../../static/js/api/echarts"
+export default {
+  name: 'Echarts',
+  data () {
+    return {
+      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]
+        }]
+      })
+    },
+    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'
+          },
+          series: [
+            {
+              name: '访问来源',
+              type: 'pie',
+              radius: '55%',
+              data: [
+                {value: (res.data.clean-res.data.noClean), name: '已清洗'},
+                {value: res.data.noClean, 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'
+          },
+          series: [
+            {
+              name: '访问来源',
+              type: 'pie',
+              radius: '55%',
+              data: [
+                {value: (res.data[0].count-res.data[2].count), name: '已清洗'},
+                {value: res.data[2].count, name: '未清洗'},
+
+              ]
+            }
+          ]
+        })
+
+
+        let myChart2 = this.$echarts.init(document.getElementById('JGCount'))
+        myChart2.setOption({
+          // title: {text: 'echarts 饼图'},
+          tooltip: {
+            trigger: 'item'
+          },
+          legend: {
+            orient: 'vertical',
+            left: 'left'
+          },
+          series: [
+            {
+              name: '访问来源',
+              type: 'pie',
+              radius: '55%',
+              data: [
+                {value: (res.data[1].count-res.data[3].count), name: '已清洗'},
+                {value: res.data[3].count, name: '未清洗'},
+
+              ]
+            }
+          ]
+        })
+
+      })
+
+
+
+    },
+    echartsInit3 () {
+
+    },
+    echartsInit4 () {
+
+      getTypeByMon().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().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().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.echartsInit()
+    this.echartsInit1()
+    this.echartsInit2()
+    this.echartsInit3()
+    this.echartsInit4()
+    this.echartsInit5()
+    this.echartsInit6()
+  }
+}
+</script>
+<style scoped >
+h6{
+  text-align: center;
+}
+#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>

plugins/echarts.js

@@ -0,0 +1,3 @@
+import Vue from 'vue'
+import * as echarts from 'echarts'; // 引入echarts
+Vue.prototype.$echarts = echarts // 引入组件（将echarts注册为全局）

static/js/api/echarts.js

@@ -0,0 +1,45 @@
+import request from "../../util/request.js"
+
+
+// 查询用户评论列表
+export function getAllCount() {
+    return request({
+        url: '/gc/getAllCount',
+        method: 'get',
+    })
+}
+
+
+// 查询用户评论列表
+export function selectAllSumPriceByMon() {
+    return request({
+        url: '/gc/selectAllSumPriceByMon',
+        method: 'get',
+    })
+}
+
+// 查询用户评论列表
+export function getCleanCake() {
+    return request({
+        url: '/gc/getCleanCake',
+        method: 'get',
+    })
+}
+
+// 查询用户评论列表
+export function getTypeByMon() {
+    return request({
+        url: '/gc/getTypeByMon',
+        method: 'get',
+    })
+}
+
+
+
+// 查询用户评论列表
+export function getCountByDepType() {
+    return request({
+        url: '/gc/getCountByDepType',
+        method: 'get',
+    })
+}

static/util/request.js

@@ -9,6 +9,7 @@ axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
 const service = axios.create({
   // axios中请求配置有baseURL选项，表示请求URL公共部分
   baseURL:process.env.BASE_URL,
+  // baseURL:"/api",
   // 超时
   timeout: 10000
 })