<template>
  <div class="zhaobiao">
    <div class="zb-content content1">
      <div class="flex-box query-box">
        <div class="flex-box query-params">
          <span class="common-title">近五年全国招标数量</span>
        </div>
      </div>
      <div class="text">近五年全国项目招标数量达到10,610,000个，招标数量前五的地区分别是广东（38251个）、江苏（36812个）、山东（32615个）、浙江（26341个）、河南（21621个）。</div>
      <div class="main1">
        <div id="zb-echarts" style="height: 250px"></div>
        <p class="tips"><i class="el-icon-info"></i>数据来源大司空建筑大数据平台，统计范围为近5年全国公开的招标项目，未公开的不含在内</p>
      </div>
      <div class="main2">
        <div class="flex-box query-box head">
          <span>近五年全国招标总数<span class="number">10,610,000 </span>个</span>
          <!--<el-select v-model="year" filterable multiple collapse-tags class="form-content-width" placeholder="请选择">-->
            <!--<el-option v-for="(item, index) in yearOptions" :key="index" :label="item.name" :value="item.value" />-->
          <!--</el-select>-->
        </div>
        <div class="table-item">
          <el-table
            :data="tableData"
            border
            height="430"
            fit
            highlight-current-row
          >
            <el-table-column label="序号" width="50" align="left">
              <template slot-scope="scope">{{ scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column prop="area" label="地区"/>
            <el-table-column prop="number" sortable label="招标数量"/>
            <el-table-column prop="zb" sortable label="占比"/>
          </el-table>
        </div>
      </div>
    </div>
    <div class="zb-content content2">
      <div class="flex-box query-box">
        <div class="flex-box query-params">
          <span class="common-title">全国招标项目概览</span>
        </div>
      </div>
      <div class="text">通过对近五年全国招标数据进行分析，发现该企业主要集中在3月（230个）、6月（209个）进行招标。</div>
      <div class="main1">
        <div id="gl-echarts" style="height: 250px"></div>
        <p class="tips"><i class="el-icon-info"></i>数据来源大司空建筑大数据平台，统计范围为近五年全国公开的招标项目，未公开的不含在内</p>
      </div>
      <div class="table-item">
        <el-table
          :data="tableData1"
          border
          height="430"
          fit
          highlight-current-row
        >
          <el-table-column label="序号" width="50" align="left">
            <template slot-scope="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column prop="area" label="月份"/>
          <el-table-column prop="number" sortable label="招标数量"/>
          <el-table-column prop="zb" sortable label="占比"/>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
export default {
  name: 'NationalEconomies',
  data() {
    return {
      year:'',
      yearOptions: [
        { name: '2023年', value: '2023' },
        { name: '2022年', value: '2022' },
        { name: '2021年', value: '2021' },
      ],
      zbData:['广东','江苏','山东','浙江','河南','安徽','河北','四川','湖北','江西','甘肃','重庆','福建','云南','北京','湖南','山西'],
      zbData1:[123,156,236,426,412,231,96,105,210,420,213,86,120,230,150,132,196],
      tableData:[
        {
          area:'广东',
          number:'123',
          zb:'0.19%'
        },
        {
          area:'江苏',
          number:'156',
          zb:'0.29%'
        },
        {
          area:'山东',
          number:'236',
          zb:'0.34%'
        },
        {
          area:'浙江',
          number:'426',
          zb:'0.34%'
        },
        {
          area:'河南',
          number:'412',
          zb:'0.34%'
        },
        {
          area:'安徽',
          number:'231',
          zb:'0.34%'
        },
        {
          area:'河北',
          number:'96',
          zb:'0.34%'
        },
        {
          area:'四川',
          number:'105',
          zb:'0.34%'
        },
        {
          area:'湖北',
          number:'210',
          zb:'0.34%'
        },
        {
          area:'江西',
          number:'420',
          zb:'0.34%'
        },
        {
          area:'甘肃',
          number:'213',
          zb:'0.34%'
        },
      ],
      glData:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
      glData1:[503,156,132,186,203,143,189,301,211,195,132,176],
      tableData1:[
        {
          area:'1月',
          number:'123',
          zb:'0.19%'
        },
        {
          area:'2月',
          number:'156',
          zb:'0.29%'
        },
        {
          area:'3月',
          number:'236',
          zb:'0.34%'
        },
        {
          area:'4月',
          number:'426',
          zb:'0.34%'
        },
        {
          area:'5月',
          number:'412',
          zb:'0.34%'
        },
        {
          area:'6月',
          number:'231',
          zb:'0.34%'
        },
        {
          area:'7月',
          number:'96',
          zb:'0.34%'
        },
        {
          area:'8月',
          number:'105',
          zb:'0.34%'
        },
        {
          area:'9月',
          number:'210',
          zb:'0.34%'
        },
        {
          area:'10月',
          number:'420',
          zb:'0.34%'
        },
        {
          area:'11月',
          number:'213',
          zb:'0.34%'
        },
        {
          area:'12月',
          number:'213',
          zb:'0.34%'
        },
      ],
    }
  },
  created() {
    this.$nextTick(()=>{
      this.initChart()
      this.initChart1()
    })
  },
  methods: {
    initChart() {
      let myChart = echarts.init(document.getElementById("zb-echarts"))
      let option = {
        tooltip: {
          trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
          axisPointer: {// 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '5',
          right: '5',
          top: '10',
          bottom: '10',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.zbData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.zbData1,
            type: 'bar',
            itemStyle: {
              normal: {
                barBorderRadius: [4, 4, 0, 0],
                color: '#165DFF',
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  textStyle: { //数值样式
                    color: '#165DFF',
                    fontSize: 16
                  }
                }
              },
              // 移入当前的柱状图时改变颜色
              emphasis: {
                color: '#3384FF',
              }
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    initChart1() {
      let myChart = echarts.init(document.getElementById("gl-echarts"))
      let dataList=this.glData1;
      let option = {
        tooltip: {
          trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
          axisPointer: {// 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '5',
          right: '5',
          top: '20',
          bottom: '10',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.glData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.glData1,
            // markPoint:{
            //   data:[
            //     {type:'max',name:'最大值'},
            //     {type:'min',name:'最小值'},
            //   ]
            // },
            type: 'bar',
            barWidth: 20,
            itemStyle: {
              normal: {
                barBorderRadius: [4, 4, 0, 0],
                // color: '#2ECFCF',
                color: function (params) {
                  var colorList = []  //定义一个存储颜色的数组
                  //更改前二位柱形颜色
                  //定义一个变量 保存柱形图数据 因为sort方法排序会改变原数组 使用JSON方法深拷贝 将原数值暂存
                  let companyValue1 = JSON.parse(JSON.stringify(dataList))
                  let arr = dataList.sort((a, b) => {
                    return b - a
                  })
                  //将原数组数据赋值回去  保持数据不变
                  dataList = JSON.parse(JSON.stringify(companyValue1))
                  //遍历数据 将原数组和排序后的数组比较
                  dataList.map(i => {
                    if (i == arr[0]) {
                      colorList.push('#F39F35')
                    } else if (i == arr[1]) {
                      colorList.push('#6675A5')
                    }else{
                      colorList.push('#2ECFCF')
                    }
                  })
                  //返回一个存储着颜色的数组根据数据index顺序渲染到页面
                  return colorList[params.dataIndex]
                }
              },
            }
          }
        ]
      };
      myChart.setOption(option);
    },
  }
}
</script>

<style lang="scss" scoped>
  .zhaobiao{
    .zb-content{
      background: #ffffff;
      border-radius: 4px;
      margin-top: 12px;
      padding: 16px;
    }
    .text{
      width: 100%;
      line-height: 28px;
      padding: 0 16px;
      margin-top: 24px;
      font-size: 12px;
      color: rgba(35,35,35,0.8);
      background: #F4F4F5;
      border-radius: 2px;
      margin-bottom: 24px;
    }
    .tips{
      margin: 0;
      font-size: 12px;
      color: rgba(35,35,35,0.4);
      i{
        color:#909399;
        margin-right: 9px;
      }
    }
    .content1{
      .main2{
        margin-top: 30px;
        .head{
          span{
            font-size: 12px;
            color: rgba(35,35,35,0.8);
          }
          .number{
            color:#FF3C3C;
          }
          ::v-deep .el-select{
            width: 100px;
            height: 32px;
            .el-input{
              width: 100%;
              height: 32px;
            }
            .el-input__inner{
              height: 32px !important;
              line-height: 32px;
            }
          }
        }
      }
      .table-item{
        margin-top: 12px;
      }
    }
    .content2{
      .table-item{
        margin-top: 32px;
      }
    }
    .table-item{
      ::v-deep .el-table{
        .el-table__header-wrapper{
          th{
            padding: 0;
          }
        }
      }
    }
  }
</style>
