zhgdyun/src/views/projectFront/videoDataAnalysis/chartComponents/ChartThree.vue

<template>
  <div class="main-content">
    <span class="title-text">前七天巡检</span>
    <div class="chart" ref="ChartThree"></div>
    <!-- <div v-if="statsEnterpriseList.length == 0">
      <div class="placeholderBox">
        <img src="@/assets/images/noData.png" alt="" />
        <p>暂无数据</p>
      </div>
    </div> -->
  </div>
</template>
<script>
import echarts from "echarts4";
import {
  countFullApi
} from "@/assets/js/api/equipmentCenter/cameraList";
export default {
  data() {
    return {};
  },
  created() {
    this.getCountStatusFn();
  },
  mounted() {
  },
  methods: {
    getCountStatusFn(){
      let that = this;
      countFullApi({
        projectSn: this.$store.state.projectSn,
      }).then((res) => {
        console.log("获取录像完整率", res);
        that.countData = res.result;
        that.topChartThree();
      });
    },
    topChartThree() {
      let ageChart = echarts.init(this.$refs.ChartThree);
      let option = {
        color: ["#36CE90", "#FF952C", "#FE0B0F","#CCCCCC"],
        title: {
          //饼图中间的文字设置
          show: true,
          left: "39%",
          top: "37%",
          textAlign: "center",
          // textVerticalAlign: "middle",
          text: this.countData.fullRatio + "%",
          textStyle: {
            fontSize: 20,
            color: "#000"
          },
          subtext: "录像完整率",
          subtextStyle: {
            fontSize: 12,
            color: "#000"
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          //图例设置
          right: 120,
          top: "middle",
          bottom: 20,
          orient: "vertical", //垂直
          itemGap: 15, //图例之间间距
          textStyle: {
            //数据右对齐样式
            color: "#687F96",
            rich: {
              name: {
                //legend左边的文字
                fontSize: 10,
                padding: [3, 10, 0, 0], //1.左边的文字添加右边距10(可自己调整)
              },
              value: {
                //legend右边的值
                fontSize: 12,
                color: "#182F41",
                backgroundColor: "transparent", //2.右边的值添加背景色
                align: "right", //3.右对齐
                padding: [5, -100, 0, 0], //4.设置右边距为-100(-70/-80..可自己调整)
              },
            },
          },
          formatter: function (name) {
            let data = option.series[0].data;
            let total = 0;
            let tarValue;
            for (let i = 0; i < data.length; i++) {
              total += data[i].value;
              if (data[i].name == name) {
                tarValue = data[i].value;
              }
            }
            let v = tarValue;
            return [`{name|${name}}` + `{value|${v}}`].join("");
          },
        },
        series: [
          {
            name: "录像完整率",
            type: "pie",
            center: ["40%", "50%"], //饼图位置
            radius: ["55%", "80%"], //圆环大小
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },

            emphasis: {
              label: {
                show: false,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: this.countData.fullNum, name: "录像完整" },
              { value: this.countData.loseNum, name: "录像丢失" },
              { value: this.countData.failNum, name: "诊断失败" },
              { value: this.countData.notDetectNum, name: "未检测" }
            ],
          },
        ],
      };
      ageChart.setOption(option);
      window.addEventListener("resize", () => {
        ageChart.resize();
      });
    }
  },
};
</script>
<style lang="less" scoped>
.main-content {
  width: 100%;
  height: 100%;
  position: relative;
  .title-text{
    position: absolute;
    top: 10px;
    left: 10px;
  }
  .chart {
    width: 100%;
    height: 100%;
  }
}
</style>