<template>
  <div class="demo">
    <h2 class="demo-title">滚动排名列表</h2>
    <custom-rank-List :chart-config="options" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
const options = ref({
  attr: { w: 200, h: 200 },
  option: {
    // 数据
    dataset: [
      { name: '荣成', value: 26700 },
      { name: '河南', value: 20700 },
      { name: '河北', value: 18700 },
      { name: '徐州', value: 17800 },
      { name: '漯河', value: 16756 },
      { name: '三门峡', value: 12343 },
      { name: '郑州', value: 9822 },
      { name: '周口', value: 8912 },
      { name: '濮阳', value: 6834 },
      { name: '信阳', value: 5875 },
      { name: '新乡', value: 3832 },
      { name: '大同', value: 1811 },
    ],
    // 表行数
    rowNum: 5,
    // 轮播时间
    waitTime: 2,
    // 数值单位
    unit: '',
    // 自动排序
    sort: true,
    color: '#1370fb',
    textColor: '#CDD2F8FF',
    borderColor: '#1370fb80',
    carousel: 'single',
    //序号字体大小
    indexFontSize: 12,
    //左侧数据字体大小
    leftFontSize: 12,
    //右侧数据字体大小
    rightFontSize: 12,
    // 格式化
    valueFormatter: (item) => {
      return item.value;
    },
  },
});
</script>
<style lang="scss" scoped>
.demo {
  margin: 30px auto 0;
  padding: 50px;
  width: 500px;
  height: 500px;
  background-color: #999999;
  &-title {
    margin-bottom: 20px;
  }
}
</style>
