<template>
  <div class="water-intake-charts">
    <custom-echart-mixin :chart-data="handelData" :option="chartsData.option" />
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
let itemStyle = reactive({
  itemStyle: { borderRadius: [8, 8, 0, 0] },
});
let legendList = reactive(['种子', '番茄', '小麦']);

const chartsData = reactive({
  option: {
    color: ['#0AF2FE', '#2196f3', '#02fd94'],
    series: [
      {
        type: 'pie', // 饼图
        clockWise: false,
        radius: [60, 40],
        center: ['40%', '50%'],
        hoverAnimation: false,
        itemStyle: {
          borderRadius: 5,
          normal: {
            label: {
              position: 'outside',
              formatter: function (params) {
                if (params.name !== '') {
                  return '{name|' + params.name + '}' + '\n\n{value|' + params.value + '}吨';
                } else {
                  return '';
                }
              },
              align: 'left',
              rich: {
                name: {
                  fontSize: 14,
                  fontFamily: 'PingFang SC',
                  fontWeight: 500,
                  color: '#fff',
                },
                value: {
                  fontSize: 20,
                  fontFamily: 'D-DIN',
                  fontWeight: 400,
                },
              },
            },
            labelLine: {
              width: 4,
              show: true,
              length: 30,
              length2: 60,
              color: '#fff',
            },
          },
        },
        tooltip: {
          show: true,
        },
        data: [
          {
            value: 11325,
            name: '种子',
            itemStyle: {
              normal: {
                borderWidth: 5,
                borderRadius: 20,
                shadowBlur: 0,
                borderColor: '#0AF2FE',
                shadowColor: '#0AF2FE',
              },
            },
          },
          {
            value: '3000',
            name: '',
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: 'rgba(0, 0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 0,
              },
            },
          },
          {
            value: 123000,
            name: '化肥',
            itemStyle: {
              normal: {
                borderWidth: 5,
                borderRadius: 20,
                shadowBlur: 0,
                borderColor: '#2196f3',
                shadowColor: '#2196f3',
              },
            },
          },
          {
            value: '3000',
            name: '',
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: 'rgba(0, 0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 0,
              },
            },
          },
          {
            value: 601,
            name: '农药',
            itemStyle: {
              normal: {
                borderWidth: 5,
                borderRadius: 20,
                shadowBlur: 0,
                borderColor: '#02fd94',
                shadowColor: '#02fd94',
              },
            },
          },
          {
            value: '3000',
            name: '',
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: 'rgba(0, 0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 0,
              },
            },
          },
        ],
      },
    ],
  },
  valData: [],
});

const randomVal = (num) => {
  let list = [];
  for (let i = 0; i < legendList.length; i++) {
    let addNum = [10, 8, 2, 5];
    let val = {
      name: num + '月',
      value: Number(Math.random() * 100 + addNum[i]).toFixed(2),
      seriesType: 'bar',
      type: legendList[i],
      ...itemStyle,
    };
    list[i] = val;
  }
  return list;
};
let handelData = computed(() => {
  let list = [];
  let maxMouth = 6;
  for (let i = 0; i < maxMouth; i++) {
    let val = randomVal(i + 1);
    list = [...list, ...val];
  }

  list.map((m) => {
    return { ...m, value: Number(m.value + Math.random() + 10).toFixed(2) };
  });
  // console.info('handelData', list);
  return list;
});

onMounted(() => {});
</script>
<style lang="scss" scoped>
.water-intake-charts {
  height: 100%;
}
</style>
