<template>
    <div class="box">
      <div class="box-title">数据统计</div>
      <div class="box-container">
          <div class="max-w max-h" id="echartsId"></div>
      </div>
    </div>
  </template>
  
  <script>
  let BASE_URL = process.env.VUE_APP_BASE_API
  import axios from 'axios'
    export default {
      name: 'toolbox',
      data(){
          return {
              list:[],
              query:[
                {
                    severName:"现有水源地-一级水源",
                    tableRef:"yijishuiyuan"
                },{
                    severName:"现有水源地-二级水源",
                    tableRef:"erjishuiyuan"
                },{
                    severName:"防火卡口",
                    tableRef:"fanghuokakou"
                },{
                    severName:"森林消防专业队伍",
                    tableRef:"xiaofangzhuanyeduiwu"
                },{
                    severName:"规划水源地",
                    tableRef:"guihuashuiyuandi"
                },{
                    severName:"森林防火物资",
                    tableRef:"senlinfanghuowuzi"
                }
              ],
              listParams:{
                  areaname:localStorage.getItem("areaName"),
              },
          }
      },
      created(){
         
      },
      mounted(){
        this.getList();
      },
      methods:{
          getList(){
              let params= [];

              this.query.forEach((item,index)=>{
                  params.push(item.tableRef);
              })

              axios({
                  method:"post",
                  url:BASE_URL+"/FirePrevention/GetTableListCountByTableName",
                  data:params,
                  headers:{
                      'X-Token':localStorage.getItem("X-Token")
                  }
              }).then(res=>{
                  let rel = res.data.data
                  this.handleEcharts(rel)
              })
          },
          handleEcharts(data){
            let xData = []
            let yData = []
            data.forEach(item =>{
                let obj = this.query.find((it,idx)=>{
                    return it.tableRef == item.name;
                })
                xData.push(obj.severName)
                yData.push(item.value)
            })
            let option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                    },
                },
                grid: {
                    top: '20%',
                    right: '6%',
                    left: '10%',
                    bottom: '12%',
                },
                xAxis: [
                    {
                        type: 'category',
                        data: xData,
                        axisLine: {
                            lineStyle: {
                                color: '#666',
                                width: 1,
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            margin: 10,
                            color: '#D8F0FF',
                            textStyle: {
                                fontSize: 10,
                            },
                        },
                    },
                ],
                yAxis: [
                    {
                        axisLabel: {
                            formatter: '{value}',
                            color: '#D8F0FF',
                            textStyle: {
                                fontSize: 10,
                            },
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                width: 0,
                                color: '#184D9A',
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dashed',
                                // 使用深浅的间隔色
                                color: '#666',
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: '数据统计',
                        type: 'bar',
                        data: yData,
                        barWidth: '15px',
                        itemStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: '#1978E5', //  0%  处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: '#1978E5', //  100%  处的颜色
                                        },
                                    ],
                                    global: false, //  缺省为  false
                                },
                                barBorderRadius: [0, 0, 0, 0],
                                shadowColor: 'rgba(0,160,221,1)',
                                shadowBlur: 0,
                            },
                        },
                        label: {
                            normal: {
                                show: true,
                                lineHeight: 20,
                                width: 80,
                                height: 20,
                                borderRadius: 200,
                                position: ['-0', '-20'],
                                color: '#fff',
                            },
                        },
                    }
                ],
            };
            let myChart = this.$echarts.init(
                document.getElementById("echartsId")
            );
            myChart.setOption(option);
          }
           
      }
    }
  </script>
  
  <style scoped>
    .box{
        width:100%;
        height:100%;

    }
  
    .box-title{
        width:100%;
        height: 17%;
        padding-left: 35px;
        font-size: 18px;
        color: #fff;
        padding-top: 4px;
        text-align: left;
        display: flex;
        align-items: center;
    }
    .box-container{
        width: calc( 100% - 20px);
        margin:0px 15px;
        height: 80%;
        overflow:hidden;
    }
   
  
  
       ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
    border: 0
  }
  
  ::-webkit-scrollbar {
    height: 10px;
    width: 10px;
    background: transparent;
    border-radius: 5px
  }
  
  ::-webkit-scrollbar-thumb {
    padding-top: 100px;
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
    background-color: #797979;
    min-height: 28px;
    border-radius: 4px;
    background-clip: padding-box
  }
  
  ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
    border: 0
  }
  
  ::-webkit-scrollbar-thumb:hover {
    -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
    background-color: rgba(0, 0, 0, .4)
  }
  
  ::-webkit-scrollbar-thumb:active {
    -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
    background-color: rgba(0, 0, 0, .5)
  }

  </style>