soc_web/src/views/board/charts/org/report_pie.vue

<!--  -->
<template>
  <div
    class="chart-template map-template"
    style="display: flex; flex-direction: row"
  >
    <div>机构统计</div>
    <!-- <div>
      <div>
        <span>营业网点</span>
        <span>
          <span>总数：</span>
          <span>3020</span>
        </span>
        <span>
          <span>达标数：</span>
          <span>500</span>
        </span>
        <span>
          <span>自有产权数：</span>
          <span>1500</span>
        </span>
        <span>
          <span>区域外网数：</span>
          <span>80</span>
        </span>
      </div>
      <div>
        <span>自助设备</span>
        <span>
          <span>总数：</span>
          <span>4000</span>
        </span>
        <span>
          <span>在行式穿墙机具：</span>
          <span>2000</span>
        </span>
        <span>
          <span>在行式堂式机具：</span>
          <span>1500</span>
        </span>
        <span>
          <span>离行式穿墙机具：</span>
          <span>2000</span>
        </span>
        <span>
          <span>离行式堂式机具：</span>
          <span>1500</span>
        </span>
      </div>
      <div>
        <span>自助银行</span>
        <span>
          <span>总数：</span>
          <span>4000</span>
        </span>
        <span>
          <span>在行式自助银行：</span>
          <span>2000</span>
        </span>
        <span>
          <span>离行式自助银行：</span>
          <span>1500</span>
        </span>
      </div>
      <div>
        <span>业务库</span>
        <span>
          <span>总数：</span>
          <span>3020</span>
        </span>
        <span>
          <span>一类库：</span>
          <span>2000</span>
        </span>
        <span>
          <span>二类库：</span>
          <span>1500</span>
        </span>
        <span>
          <span>三类库：80</span>
          <span>80</span>
        </span>
        <span>
          <span>四类库</span>
          <span>80</span>
        </span>
      </div>
    </div> -->
    <div id="org_Chart"></div>
  </div>
</template>

<script>
import "./../../board.scss";
import * as echarts from "echarts";
import {
  findMaxIndex,
  getChartDOMSize,
  getNextPeriod,
  getPeriodText,
} from "../../utils.js";

export default {
  props: ["orgId"],
  data() {
    return {
      data: {
        all: [],
        completed: [],
        name: [],
      },
    };
  },

  components: {},

  computed: {},

  watch: {
    orgId: {
      deep: true,
      handler(val) {
        // this.resetTimer();
        this.getData();
      },
    },
    data: {
      deep: true,
      handler() {
        this.initMap();
      },
    },
  },

  created() {
    // this.types = types;
    this.maxDisplay = 16;
    // this.refreshTime = 1 * 10 * 1000;
    // this.isMouseOver = false;
  },

  async mounted() {
    window.addEventListener("resize", this.windowResize);
  },
  beforeDestroy() {
    this.timer && clearInterval(this.timer);
    this.timer = null;

    window.removeEventListener("resize", this.windowResize);
  },

  methods: {
    handleClick() {
      this.resetTimer();
      this.getData();
    },
    handleMouseEnter() {
      this.isMouseOver = true;
    },
    handleMouseLeave() {
      this.isMouseOver = false;
    },
    async getData() {
      // let bs = parseInt(this.activeName) + 1;
      this.data = {
        all: 500,
        unconfirm: 112, //未确认
        auditing: 20, //异议审批中
        unreform: 50, //待整改
        notQuestion: 4,
        reformed: 500 - 112 - 20 - 50 - 4,
      };
    },

    windowResize() {
      this.myChart && this.myChart.resize();
    },
    initMap() {
      this.myChart && this.myChart.dispose();

      // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(document.getElementById("org_Chart"));

      let t = this;
      // 指定图表的配置项和数据
      var option = {
        backgroundColor: "rgba(0,0,0,0)",
        // color: ["#C0FBB5", "#46557B"],
        legend: {
          show: false,
          icon: "circle",
          //   data: ["达标数", "自有产权数","区域外网数"],
          textStyle: {
            color: "#fff",
            // fontSize:18
          },
          left: "center",
          top: "5%",
        },
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            name: "营业网点",
            type: "pie",
            radius: ["65%", "85%"],
            center: [`12.5%`, "50%"],
            data: [
              {
                name: "达标数",
                value: 2000,
              },
              {
                name: "自有产权数",
                value: 1500,
              },
              {
                name: "区域外网数",
                value: 80,
              },
            ],
            label: {
              show: true,
              position: "center",
              color: "#fff",
              fontSize: 14,
              formatter: function (value) {
                return "3020\n" + "\n营业网点";
              },
            },
            tooltip: {
              show: true,
              trigger: "item",
              backgroundColor: "#b8bdc0",
              textStyle: {
                color: "#000",
              },
              confine:true,
              formatter: function (value) {
                let html=`<div style="z-index:999;">
                        <div>营业网点</div>
                        <div>总数：3020</div>
                        <div>达标数：2000</div>
                        <div>自有产权数：1500</div>
                        <div>区域外网数：80</div>
                    </div>`
                return html;
              },
            },

            //   alignTo: 'none',
            //   bleedMargin: 5,

            // left: 0,
            // right: 0,
            // top: 0,
            // bottom: 0,
          },
          {
            name: "业务库",
            type: "pie",
            radius: ["65%", "85%"],
            center: [`37.5%`, "50%"],
            data: [
              {
                name: "一类库",
                value: 2000,
              },
              {
                name: "二类库",
                value: 1500,
              },
              {
                name: "三类库",
                value: 80,
              },
              {
                name: "四类库",
                value: 80,
              },
            ],
            label: {
              show: true,
              position: "center",
              color: "#fff",
              fontSize: 14,
              formatter: function (value) {
                return "2000\n" + "\n业务库";
              },
            },
            tooltip: {
              show: true,
              trigger: "item",
              backgroundColor: "#b8bdc0",
              textStyle: {
                color: "#000",
              },
              confine: true,
              formatter: function (value) {
                let html = `<div style="z-index:999;">
                        <div>业务库</div>
                        <div>总数：3020</div>
                        <div>一类库：2000</div>                        
                        <div>二类库：1500</div>
                        <div>三类库：80</div>
                        <div>四类库：80</div>
                    </div>`;
                return html;
              },
            },

            //   alignTo: 'none',
            //   bleedMargin: 5,

            // left: 0,
            // right: 0,
            // top: 0,
            // bottom: 0,
          },
          {
            name: "自助银行",
            type: "pie",
            radius: ["62%", "85%"],
            center: [`62.5%`, "50%"],
            data: [
              {
                name: "在行式自助银行",
                value: 2000,
              },
              {
                name: "离行式自助银行",
                value: 1500,
              },
            ],
            label: {
              show: true,
              position: "center",
              color: "#fff",
              fontSize: 14,
              formatter: function (value) {
                return "4000\n" + "\n自助银行";
              },
            },
            tooltip: {
              show: true,
              trigger: "item",
              backgroundColor: "#b8bdc0",
              textStyle: {
                color: "#000",
              },
              confine: true,
              formatter: function (value) {
                let html = `<div style="z-index:999;">
                        <div>自助银行</div>
                        <div>总数：4000</div>
                        <div>在行式自助银行：2000</div>                        
                        <div>离行式自助银行：1500</div>
                    </div>`;
                return html;
              },
            },
          },
          {
            name: "自助设备",
            type: "pie",
            radius: ["62%", "85%"],
            center: [`87.5%`, "50%"],
            data: [
              {
                name: "在行式穿墙机具",
                value: 2000,
              },
              {
                name: "在行式堂式机具",
                value: 1500,
              },
              {
                name: "离行式穿墙机具",
                value: 2000,
              },
              {
                name: "离行式堂式机具",
                value: 1500,
              },
            ],
            label: {
              show: true,
              position: "center",
              color: "#fff",
              fontSize: 14,
              formatter: function (value) {
                return "10000\n" + "\n自助设备";
              },
            },
            tooltip: {
              show: true,
              trigger: "item",
              backgroundColor: "#b8bdc0",
              textStyle: {
                color: "#000",
              },
              confine: true,
              formatter: function (value) {
                let html = `<div style="z-index:999;">
                        <div>自助设备</div>
                        <div>总数：4000</div>
                        <div>在行式穿墙机具：2000</div>                        
                        <div>在行式堂式机具：1500</div>
                        <div>离行式穿墙机具：2000</div>                        
                        <div>离行式堂式机具：1500</div>
                    </div>`;
                return html;
              },
            },
          },
        ],
      };
      if (option && typeof option === "object") {
        this.myChart.setOption(option);
      }
    },

    resetTimer() {
      // this.timer && clearInterval(this.timer);
      // this.timer = setInterval(() => {
      //   if (this.isMouseOver) {
      //     return;
      //   }
      //   this.activeName = getNextPeriod(this.types, this.activeName);
      //   this.getData();
      // }, this.refreshTime);
    },
  },
};
</script>
<style lang="scss" scoped>
.map-template {
  & > div {
    margin: 0px;
    padding: 0px;
  }

  & > div:first-child {
    // display: none;
    width: 30px;
    height: 100%;
    color: rgb(245, 245, 245);
    background-color: #b8bdc088;
    text-align: center;
    font-size: 14px;
    writing-mode: vertical-lr;
    padding-left: 5px;
    padding-right: 5px;
  }

  // & > div:nth-child(2) {
  //   height: 100%;
  //   width: calc(100% - 30px);
  //   font-size: 14px;
  //   line-height: 23px;
  //   display: flex;
  //   flex-direction: row;

  //   & > div {
  //     border: solid 1px #b8bdc088;
  //     background-color: #b8bdc055;
  //     display: flex;
  //     flex-direction: column;
  //     width:calc(25% - 20px);
  //     margin: 10px;
      

  //     & > span:first-child {
  //       background-color: #b8bdc088;
  //       text-align: center;
  //     }
  //     & > span:not(:nth-child(1)) {
  //       & > span {
  //         display: inline-block;
  //       }
  //       & > span:first-child {
  //         width: calc(100% - 60px);
  //         text-align: right;
  //       }
  //       & > span:last-child {
  //         width: 60px;
  //       }
  //     }
  //   }
  // }
  & > div:last-child {
    height: 100%;
    width: calc(100% - 30px);
  }
}
</style>