77 lines
1.6 KiB
Vue
77 lines
1.6 KiB
Vue
<template>
|
|
<a-card
|
|
class="general-card"
|
|
:title="$t('multiDAnalysis.card.title.userActions')"
|
|
>
|
|
<Chart height="122px" :option="chartOption" />
|
|
</a-card>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import useChartOption from '@/hooks/chart-option';
|
|
|
|
const { chartOption } = useChartOption((isDark) => {
|
|
return {
|
|
grid: {
|
|
left: 44,
|
|
right: 20,
|
|
top: 0,
|
|
bottom: 20,
|
|
},
|
|
xAxis: {
|
|
type: 'value',
|
|
axisLabel: {
|
|
show: true,
|
|
formatter(value: number, idx: number) {
|
|
if (idx === 0) return String(value);
|
|
return `${Number(value) / 1000}k`;
|
|
},
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: isDark ? '#484849' : '#E5E8EF',
|
|
},
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: ['点赞量', '评论量', '分享量'],
|
|
axisLabel: {
|
|
show: true,
|
|
color: '#4E5969',
|
|
},
|
|
axisTick: {
|
|
show: true,
|
|
length: 2,
|
|
lineStyle: {
|
|
color: '#A9AEB8',
|
|
},
|
|
alignWithLabel: true,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: isDark ? '#484849' : '#A9AEB8',
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
trigger: 'axis',
|
|
},
|
|
series: [
|
|
{
|
|
data: [1033, 1244, 1520],
|
|
type: 'bar',
|
|
barWidth: 7,
|
|
itemStyle: {
|
|
color: '#4086FF',
|
|
borderRadius: 4,
|
|
},
|
|
},
|
|
],
|
|
};
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="less"></style>
|