<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,
    },
    // series: [
    //   {
    //     type: 'pie3D',
    //     center: ['50%', '50%'],
    //     radius: ['40%', '60%'],
    //     avoidLabelOverlap: false,
    //     label: {
    //       normal: {
    //         formatter: (params) => {
    //           return params.value + '%';
    //         },
    //         padding: [0, -100, 25, -100],
    //         rich: {
    //           icon: {
    //             fontSize: 16,
    //           },
    //           name: {
    //             fontSize: 14,
    //             padding: [0, 10, 0, 4],
    //             color: '#666666',
    //           },
    //           value: {
    //             fontSize: 18,
    //             fontWeight: 'bold',
    //             color: '#333333',
    //           },
    //         },
    //       },
    //     },
    //     labelLine: {
    //       show: false,
    //     },
    //     data: [],
    //   },
    // ],
  },
  data: [
    { value: 76, name: '产业运营平台' },
    { value: 24, 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>
