110 lines
2.0 KiB
Vue
110 lines
2.0 KiB
Vue
<template>
|
|
<div class="rank">
|
|
<custom-rank-List :chart-config="state" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, watch } from 'vue';
|
|
import { isEmpty } from '@/utils';
|
|
|
|
const props = defineProps({
|
|
data: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
});
|
|
|
|
const state = reactive({
|
|
attr: { w: '100%', h: 240 },
|
|
option: {
|
|
// 数据
|
|
dataset: [],
|
|
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;
|
|
},
|
|
},
|
|
});
|
|
|
|
watch(
|
|
() => props.data,
|
|
(val) => {
|
|
if (!isEmpty(val)) {
|
|
state.option.dataset = val;
|
|
}
|
|
},
|
|
{
|
|
deep: true,
|
|
immediate: true,
|
|
}
|
|
);
|
|
</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;
|
|
}
|
|
|
|
.inside-column {
|
|
border-radius: 8px;
|
|
}
|
|
}
|
|
|
|
&: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>
|