97 lines
2.2 KiB
Vue
97 lines
2.2 KiB
Vue
<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>
|