<template>
  <div class="inputs">
    <h2 class="inputs-title">全县投入品数量：291.85万吨</h2>
    <new-hyaline-cake :chart-data="state.data" :option="state.option" :width="'100%'" :height="'188px'" />
  </div>
</template>
<script setup>
import { reactive, watch } from 'vue';
const state = reactive({
  option: {
    k: 0,
    opacity: 0.8,
    itemGap: 0.1,
    // legendSuffix: '万吨',
    itemHeight: 200,
    startAngle: 60,
    grid3D: {
      show: false,
      boxHeight: 2,
      top: '-20',
      bottom: '10',
      // left: '-20%',
      viewControl: {
        //3d效果可以放大、旋转等，请自己去查看官方配置
        alpha: 40, //角度(这个很重要 调节角度的)
        beta: -40,
        distance: 260, //调整视角到主体的距离，类似调整zoom(这是整体大小)
        rotateSensitivity: 0, //设置旋转灵敏度，为0无法旋转
        zoomSensitivity: 0, //设置缩放灵敏度，为0无法缩放
        panSensitivity: 0, //设置平移灵敏度，0无法平移
        autoRotate: false, //自动旋转
        autoRotateAfterStill: 2, //在鼠标静止操作后恢复自动旋转的时间间隔,在开启 autoRotate 后有效
      },
    },
    legend: {
      show: true,
      top: 'bottom',
      orient: 'horizontal',
      itemWidth: 12, // 矩形宽度
      itemHeight: 12, // 矩形高度
      itemGap: 20,
      icon: 'rect',
      left: 'center',
      textStyle: {
        color: '#fff',
        fontSize: 16,
      },
      formatter: (name) => name,
    },
    pie2dConfig: {
      center: ['50%', '40%'],
      label: {
        show: true,
        position: 'outside',
        formatter: (params) => {
          const total = 221.8 + 70.01; // 或动态计算
          const percent = ((params.value / total) * 100).toFixed(0);
          return `{name|${params.name}}\n{value|${params.value} 万吨\n（${percent}%）}`;
        },
        rich: {
          name: {
            fontSize: 16,
            fontWeight: 'bold',
            color: '#ffffff',
            lineHeight: 20,
            align: 'center',
          },
          value: {
            fontSize: 16,
            color: '#79F5AF',
            lineHeight: 18,
            align: 'center',
          },
        },
        color: '#fff',
      },
      labelLine: {
        show: true,
        length: 40,
        length2: 40,
        lineStyle: { color: '#fff', width: 2 },
      },
    },
  },
  data: [
    { value: 221.8, name: '产业运营平台' },
    { value: 70.01, name: '其它', floatZ: 1 },
  ],
});
</script>
<style lang="scss" scoped>
.inputs {
  &-title {
    width: 270px;
    height: 40px;
    line-height: 40px;
    margin: 24px auto 0;
    background-image: url('@/assets/images/inputs/bg_title.png');
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100%;
    font-size: 20px;
    font-weight: 400;
    color: #fff;
    text-align: center;
  }
}
</style>
