<template>
  <div class="soil_constituent">
    <div class="echarts" ref="echarts"></div>
    <div class="curInfo">
      <div class="percent">总类型</div>
      <div class="name">79</div>
    </div>
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance();
const myChart = shallowRef(null);
const data = [
  {
    name: '已竣工',
    value: 38,
  },
  {
    name: '已开工',
    value: 33,
  },
  {
    name: '完成施工指标',
    value: 3,
  },
  {
    name: '完成设计概算',
    value: 5,
  },
  {
    name: '项目前期',
    value: 1,
  },
  {
    name: '尚未立项',
    value: 0,
  },
];
const curActive = reactive({
  name: data[0].name,
  percent: data[0].value,
});
const initEcharts = () => {
  myChart.value = proxy.echarts.init(proxy.$refs.echarts);
  // 绘制图表
  myChart.value.setOption({
    color: ['#159AFF', '#68E1DF ', '#D1DFEF ', '#1662FF ', '#34FFBD', '#FFEF69'],
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}%',
    },
    legend: {
      orient: 'vertical',
      top: '16%',
      right: '0%',
      height: 150,
      itemGap: 15,
      textStyle: {
        color: '#D1DEEE',
        padding: [21, 0, 0, 0],
      },
    },
    grid: {
      left: '12%',
      right: '2%',
      top: '2%',
      bottom: '2%',
    },
    series: [
      {
        type: 'pie',
        radius: ['50%', '80%'],
        center: ['30%', '50%'],
        labelLine: {
          show: false,
        },
        label: {
          show: false,
        },
        itemStyle: {
          borderWidth: 3,
          borderColor: '#185c78',
          borderRadius: 8,
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
        data,
      },
    ],
  });

  myChart.value.on('mouseover', function (params) {
    curActive.name = params.data.name;
    curActive.percent = params.data.value;
  });
  myChart.value.on('mouseout', function () {
    curActive.name = data[0].name;
    curActive.percent = data[0].value;
  });
};

onMounted(() => {
  initEcharts();
  window.addEventListener('resize', () => {
    myChart.value && myChart.value.resize();
  });
});
</script>

<style lang="scss" scoped>
.soil_constituent {
  height: 100%;
  position: relative;
  .echarts {
    height: 100%;
  }
  .curInfo {
    position: absolute;
    left: 94px;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    width: 100px;
    .percent {
      // font-size: 26px;
      font-size: 18px;
      color: #fff;
    }
    .name {
      // font-size: 16px;
      font-size: 26px;
      color: #d1deee;
      padding-right: 6%;
      white-space: nowrap;
    }
  }
}
</style>