<template>
<!-- 质量问题 -->
  <div class="qualityProblem">
    <div class="titleTxt">{{ title }}</div>
    <div class="myChart" ref="myChart" />
  </div>
</template>

<script>
import echarts from "echarts4";
export default {
  props: {
    title: {
      type: String,
      default: "default title"
    }
  },
  data() {
    return {

    };
  },
  mounted(){
    this.initMyChart();
  },
  methods:{
     initMyChart() {
      const myChart = echarts.init(this.$refs.myChart);
      const option = {
        title: {
          subtext: "质量问题",
          textAlign: 'center',
          x: '29%',
          y: '43%',
          textStyle: {
            fontSize: 20,
            fontWeight: 'normal',
            color: '#fff',
          },
          subtextStyle: {
            fontSize: 16,
            fontWeight: 'normal',
            color: '#fff'
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: 50,
          top: 'center',
          itemWidth: 10, // 设置宽度
          itemHeight: 10, // 设置高度
          selectedMode: true,
          icon: 'circle',
          textStyle: {
            color: '#ffffff',
            fontSize: 14,
          }
        },
        color: ['#3cabfd', '#58ec72', '#f294c6', '#f43a8d', '#6ee4f0',],
        series: [
          {
            type: "pie",
            radius: ["50%", "65%"],
            center: ['30%', '50%'],
            avoidLabelOverlap: true,
            // itemStyle: {
            //   borderRadius: 8,
            //   borderColor: '#11316c',
            //   borderWidth: 6,
            // },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "20",
                color: '#fff',
                fontWeight: "bold",
              },
              scaleSize: 12,
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 15, name: "文明施工" },
              { value: 2, name: "未分类" },
              { value: 5, name: "安全管理" },
              { value: 6, name: "施工安全" },
              { value: 20, name: "基础工程" },
            ],
          },
        ],
      };

      myChart.setOption(option);
    },
  },

}
</script>

<style lang="less" scoped>
.qualityProblem {
  width: 100%;
  height: 100%;
  border: 1px solid #0081c3;

  .titleTxt {
    font-size: 18px;
    color: #6ee4f0;
    margin-top: 5px;
    margin-left: 5px;
  }
  .myChart {
    width: 100%;
    height: 100%;
  }
}
</style>