<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-08-25 08:59:04
-->
<template>
  <div class="djlx">
    <div class="inquire">
      <el-form :model="queryForm" ref="queryForm" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="收件时间" class="width100">
              <el-date-picker
                v-model="queryForm.sj"
                type="daterange"
                class="width100"
                range-separator="至"
                :clearable="false"
                value-format="yyyy-MM-dd"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="11" class="btnColRight">
            <el-form-item>
              <el-button
                type="primary"
                native-type="submit"
                @click="handleSearch"
                >查询</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="concent">
      <div class="left">
        <el-table
          height="187"
          stripe
          :data="tableList"
           show-summary
          size="mini"
          border
          header-cell-class-name="table-header-gray"
        >
          <el-table-column
            label="区域"
            prop="name"
            minWidth="100"
            align="center" />
          <el-table-column
            label="收件数量"
            prop="value"
            minWidth="120"
            align="center"
        /></el-table>
      </div>
      <div class="right">
        <div ref="chart" style="width: 100%; height: 200px"></div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { getdatamonth } from "@/utils/util";
export default {
  components: {},
  data() {
    return {
      queryForm: {},
      tableList: [
        { name: "浐灞", value: "2" },
        { name: "长安", value: "12" },
        { name: "莲湖", value: "23" },
        { name: "高新", value: "33" },
         { name: "高新", value: "33" },
      ],
    };
  },
  mounted() {
     this.setdata();
    // 创建一个 ECharts 实例
    this.chart = echarts.init(this.$refs.chart);
    // 在 ECharts 实例中配置图表
    this.chart.setOption(this.getOption());
  },
  methods: {
    getOption() {
      return {
        title: {
          text: "区域统计分析",
          x: "center",
          textStyle: {
            //主标题文本设置
            fontSize: 12, //大小
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}个 ({d}%)",
        },
        grid: {
          top: "4%",
          left: "2%",
          right: "3%",
          bottom: "20%",
          containLabel: true,
        },
        series: [
          {
            name: "统计分析图",
            type: "pie",
            radius: "70%",
            center: ["50%", "100%"],
            data: this.tableList,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            label: {
              normal: {
                formatter: "{c}/个",
                position: "inside", //让文字显示在饼状图里面
                textStyle: {
                  fontSize: 10,
                  color: "#fff",
                },
              },
            },
            center: ["50%", "50%"], // 这个属性调整图像的位置！！！！！
          },
        ],
      };
    },
   setdata() {
      this.queryForm.sj = getdatamonth();
      console.log("this.queryForm", this.queryForm);
    },
    handleSearch() {
      console.log(" this.queryForm", this.queryForm);
    },
  },
};
</script>
<style scoped lang="scss">
/deep/.el-card__header {
  padding: 8px 10px;
}

/deep/.el-card__body {
  padding: 3px 10px 5px 10px;
  overflow: hidden;
}
.yhjgba {
  .el-col {
    padding: 4px;
    margin-right: 4px;
  }
  .inquire {
    width: 100%;
    height: 40px;
    background-color: #f4f7fd;
    /deep/ .el-form {
      .el-form-item--small.el-form-item {
        margin-bottom: 5px;
      }
    }
  }

  .concent {
    width: 100%;
    height: 300px;
    display: flex;
    /deep/.el-table th {
      height: 36px !important;
      font-size: 14px;
      color: #4a4a4a;
    }
    .left {
      width: 70%;
      height: 200px;
    }
    .right {
      width: 30%;
      height: 300px;
    }
  }
}
</style>