<template>
  <div class="rank">
    <custom-rank-List :chart-config="options" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
const options = ref({
  attr: { w: '100%', h: 240 },
  option: {
    // 数据
    dataset: [
      { name: '耿马镇', value: 87.84 },
      { name: '勐撒镇', value: 60.7 },
      { name: '勐永镇', value: 85.84 },
      { name: '孟定镇', value: 63.25 },
      { name: '勐简乡', value: 79.45 },
      { name: '贺派乡', value: 66.22 },
      { name: '四排山乡', value: 58.34 },
      { name: '芒洪乡', value: 68.12 },
      { name: '大兴乡', value: 66.34 },
      { name: '信阳', value: 55.75 },
      { name: '新乡', value: 53.32 },
      { name: '大同', value: 51.11 },
    ],
    type: 'column',
    rowNum: 6,
    isAnimation: true,
    waitTime: 5,
    unit: '万元',
    sort: true,
    height: 12,
    color: 'linear-gradient(90deg,rgba(53,208,192,0.00), #35d0c0)',
    textColor: '#fff',
    borderRadius: '12px',
    carousel: 'single',
    indexPrefix: 'TOP',
    indexFontSize: 12,
    leftFontSize: 14,
    rightFontSize: 14,
    valueFormatter: (item) => {
      return item.value;
    },
  },
});
</script>
<style scoped lang="scss">
.rank {
  padding: 10px 20px;

  &:deep(.row-item) {
    .ranking-info {
      color: #35d0c0 !important;
      font-family: 'DingTalk JinBuTi, DingTalk JinBuTi-Regular';
      font-weight: 700;
    }
  }

  &:deep(.row-item-1) {
    .ranking-info {
      color: #fe7f03 !important;
    }
    .ranking-value {
      color: #fe7f03 !important;
    }
    .inside-column {
      background: linear-gradient(90deg, rgba(254, 127, 3, 0), #fe7f03) !important;
    }
  }

  &:deep(.row-item-2) {
    .ranking-info {
      color: #fef906 !important;
    }
    .ranking-value {
      color: #fef906 !important;
    }
    .inside-column {
      background: linear-gradient(90deg, rgba(254, 249, 6, 0), #fef906) !important;
    }
  }

  &:deep(.row-item-3) {
    .ranking-info {
      color: #02fd94 !important;
    }
    .ranking-value {
      color: #02fd94 !important;
    }
    .inside-column {
      background: linear-gradient(90deg, rgba(2, 253, 148, 0), #02fd94) !important;
    }
  }
}
</style>
