<template>
  <div class="echarts">
    <ECharts :option="option" :resize="false" />
  </div>
</template>

<script setup>
import ECharts from "@/components/ECharts/index.vue";
import { ranking1, ranking2, ranking3, ranking4 } from "../assets/ranking-icon";
import echarts from "@/components/ECharts/config";
import { getReturn } from '@/api/dataScreen';
import { computed } from "vue";
import { reactive, ref } from 'vue';
const list = ref([]);

var colorList = ['#73DDFF', '#73ACFF', '#3074c7', '#415b98', '#709cf5', '#9ac0fa', '#58D5FF']
getReturn().then(res => {
  console.log('reee', res)
  if(res.result) {
    list.value = res.result.map(v => ({name: v.name, value: v.totalReturn}))
  }
  
})
const option = computed(() => {
  return {
    tooltip: {
        trigger: 'item'
    },
    series: [{
        type: 'pie',
        center: ['50%', '50%'],
        radius: ['34%', '60%'],
        clockwise: true,
        avoidLabelOverlap: true,
        hoverOffset: 15,
        itemStyle: {
            normal: {
                color: function(params) {
                    return colorList[params.dataIndex]
                }
            }
        },
        label: {
            color: '#fff',
            fontSize: 14,
            show: true,
            position: 'outside',
            formatter: (params) => {
              return params.name + '\n¥' + params.value + '\n' + params.percent + '%'
            },
        },
        labelLine: {
            normal: {
                length: 14,
                length2: 8,
                lineStyle: {
                    width: 1,
                  color: '#fff'
                }
            }
        },
        data: list.value,
    }]
  }
})
</script>
<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: calc(100% - 56px);
}
.echarts-header {
  box-sizing: border-box;
  display: flex;
  height: 36px;
  margin: 10px 10px 0;
  line-height: 36px;
  background: url("../images/rankingChart-bg.png") no-repeat;
  background-size: 100% 100%;
  span {
    width: 18%;
    margin-left: 4px;
    font-size: 14px;
    font-weight: bold;
    color: #fdbc52;
    text-align: center;
    &:nth-child(2) {
      margin-left: 4px;
    }
    &:last-child {
      width: 20%;
      margin-left: 60px;
    }
  }
}
</style>
