65 lines
1.4 KiB
Vue
65 lines
1.4 KiB
Vue
<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>
|