<template>
  <div class="body">
    <vTitle>园区概况</vTitle>
    <div class="con">
      <div class="top">大楼名称</div>
      <div class="bottom" id="gk"></div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      options: {
        tooltip: {
          trigger: "item",
        },

        series: [
          {
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: true,
            label: {
              color: "rgba(255, 255, 255, 1)",
              position: "outside",
              formatter: "{d}%  {name|{b}}",
              rich: {
                name: {
                  fontSize: 16,
                  color: "rgba(224, 184, 34, 1)",
                },
              },
            },
            labelLine: {
              showAbove: false,
              lineStyle: {
                color: "#ffffff",
                cap: "round",
              },
            },
            // labelLayout(params) {
            //   console.log(params);
            //   return {
            //     x: "56%",
            //     y: 30 + params.dataIndex * 40,
            //     verticalAlign: "middle",
            //     align: "left",
            //   };
            // },
            data: [
              {
                value: 1048,
                name: "综合大楼",
              },
              { value: 735, name: "学术交流中心" },
              { value: 580, name: "公寓楼" },
              { value: 484, name: "综合服务中心" },
              { value: 300, name: "科研楼" },
            ],
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 1,
                  color: "rgba(38, 159, 152, 1)",
                },
                {
                  offset: 0.2,
                  color: "rgba(38, 159, 152, 0.34)",
                },
                {
                  offset: 0,
                  color: "rgba(38, 159, 152, 0)",
                },
              ]),
              emphasis: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(224, 184, 34, 1)",
                  },
                  {
                    offset: 0.5,
                    color: "rgba(224, 184, 34, 0.5)",
                  },
                  {
                    offset: 1,
                    color: "rgba(255, 255, 255, 1)",
                  },
                ]),
              },
            },
          },
        ],
      },
    };
  },
  mounted() {
    var myChart = this.$echarts.init(document.getElementById("gk"));
    myChart.setOption(this.options);
  },
};
</script>

<style lang="less" scoped>
.con {
  width: 100%;
  .top {
    font-size: 16px;
    margin-top: 14px;
  }
  .bottom {
    width: 100%;
    height: 220px;
  }
}
</style>
