|
@@ -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>
|