<template>
  <div class="body">
    <vTitle>巡检管理</vTitle>
    <div class="con">
      <div class="bottom" id="wurenji"></div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      options: {
        tooltip: {
          trigger: "item",
        },
        legend: {
          show: true,
          bottom: 0,
          textStyle: {
            color: "#ffffff",
          },
        },
        series: [
          {
            type: "pie",
            top: 14,
            radius: ["36%", "80%"],
            width: "100%",
            height: "70%",
            avoidLabelOverlap: true,
            label: {
              color: "rgba(255, 255, 255, 1)",
              position: "outside",
              formatter: "{d}%",
            },
            labelLine: {
              showAbove: false,
              lineStyle: {
                color: "#ffffff",
                cap: "round",
              },
            },
            data: [
              {
                value: 1048,
                name: "可视化监拍设备",
                itemStyle: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "rgba(224, 184, 34, 1)",
                    },
                    {
                      offset: 0.6,
                      color: "rgba(224, 184, 34, 0.34)",
                    },
                    {
                      offset: 1,
                      color: "rgba(224, 184, 34, 0)",
                    },
                  ]),
                },
              },
              {
                value: 735,
                name: "跨视频监控",
                itemStyle: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 1,
                      color: "rgba(38,  159, 152, 1)",
                    },
                    {
                      offset: 0.4,
                      color: "rgba(38,  159, 152, 0.34)",
                    },
                    {
                      offset: 0,
                      color: "rgba(38,  159, 152, 0)",
                    },
                  ]),
                },
              },
              {
                value: 580,
                name: "螺旋式无人机",
                itemStyle: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 1,
                      color: "rgba(10, 213, 255, 1)",
                    },
                    {
                      offset: 0.4,
                      color: "rgba(10, 213, 255, 0.34)",
                    },
                    {
                      offset: 0,
                      color: "rgba(10, 213, 255, 0)",
                    },
                  ]),
                },
              },
            ],
          },
        ],
      },
    };
  },
  mounted() {
    var myChart = this.$echarts.init(document.getElementById("wurenji"));
    myChart.setOption(this.options);
  },
};
</script>

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