刘泉佳
47 lines
1.2 KiB
Vue
47 lines
1.2 KiB
Vue
<template>
|
|
<div class="wel-card rank-panel">
|
|
<div class="panel-title">
|
|
{{ title }}
|
|
<span v-if="unit" class="panel-title__unit">{{ unit }}</span>
|
|
</div>
|
|
<wel-chart
|
|
v-if="type === 'rank'"
|
|
:option="rankOpt"
|
|
:height="height"
|
|
/>
|
|
<wel-chart v-else :option="diffOpt" :height="height" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import WelChart from './wel-chart.vue';
|
|
import { rankOption, diffOption } from '../chart-options';
|
|
|
|
export default {
|
|
name: 'rank-panel',
|
|
components: { WelChart },
|
|
props: {
|
|
title: { type: String, required: true },
|
|
unit: { type: String, default: '' },
|
|
/* rank = 普通排行；diff = 盈亏双向对比 */
|
|
type: { type: String, default: 'rank' },
|
|
color: { type: String, default: '#4a90e2' },
|
|
items: { type: Array, required: true },
|
|
height: { type: String, default: '300px' },
|
|
nameWidth: { type: Number, default: 100 },
|
|
},
|
|
computed: {
|
|
rankOpt() {
|
|
return rankOption(this.items, { color: this.color, unit: this.unit, nameWidth: this.nameWidth });
|
|
},
|
|
diffOpt() {
|
|
return diffOption(this.items);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@use '../dashboard.scss';
|
|
</style>
|