mirror of
https://github.com/soybeanjs/soybean-admin.git
synced 2025-09-29 22:56:41 +08:00
feat: add dark mode support in vtable
This commit is contained in:
Rui-Sun
parent
0e105f32e4
commit
caa686cefd
@ -39,27 +39,30 @@ onUnmounted(() => {
|
||||
|
||||
<template>
|
||||
<NSpace vertical :size="16">
|
||||
<NCard title="List Chart" :bordered="false" class="h-full card-wrapper">
|
||||
<NCard title="Stacked Dash Area Chart" :bordered="false" class="h-full card-wrapper">
|
||||
<div ref="stackedDashAreaRef" class="h-400px" />
|
||||
</NCard>
|
||||
<NCard title="List Chart" :bordered="false" class="h-full card-wrapper">
|
||||
<NCard title="Bar Mark Point Chart" :bordered="false" class="h-full card-wrapper">
|
||||
<div ref="barMarkPointRef" class="h-400px" />
|
||||
</NCard>
|
||||
<NCard title="List Chart" :bordered="false" class="h-full card-wrapper">
|
||||
<NCard title="Histogram Different Bin Chart" :bordered="false" class="h-full card-wrapper">
|
||||
<div ref="histogramDifferentBinRef" class="h-400px" />
|
||||
</NCard>
|
||||
<NCard title="List Chart" :bordered="false" class="h-full card-wrapper">
|
||||
<NCard title="Ranking Bar Chart" :bordered="false" class="h-full card-wrapper">
|
||||
<div ref="rankingBarRef" class="h-400px" />
|
||||
</NCard>
|
||||
<NCard title="List Chart" :bordered="false" class="h-full card-wrapper">
|
||||
<NCard title="Circular Progress Tick Chart" :bordered="false" class="h-full card-wrapper">
|
||||
<div ref="circularProgressTickRef" class="h-400px" />
|
||||
</NCard>
|
||||
<NCard title="List Chart" :bordered="false" class="h-full card-wrapper">
|
||||
<NCard title="Liquid Chart Smart Invert Chart" :bordered="false" class="h-full card-wrapper">
|
||||
<div ref="liquidChartSmartInvertRef" class="h-400px" />
|
||||
</NCard>
|
||||
<NCard title="List Chart" :bordered="false" class="h-full card-wrapper">
|
||||
<NCard title="Shape Word Cloud Chart" :bordered="false" class="h-full card-wrapper">
|
||||
<div ref="shapeWordCloudRef" class="h-400px" />
|
||||
</NCard>
|
||||
<NCard :bordered="false" class="h-full w-2/3 card-wrapper">
|
||||
<WebSiteLink label="More VChart Demos: " link="https://www.visactor.com/vchart/example" />
|
||||
</NCard>
|
||||
</NSpace>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
const listTableRecords = [
|
||||
export const listTableRecords = [
|
||||
{
|
||||
'Row ID': '7981',
|
||||
'Order ID': 'CA-2015-103800',
|
||||
@ -691,4 +691,354 @@ const listTableRecords = [
|
||||
}
|
||||
];
|
||||
|
||||
export { listTableRecords };
|
||||
export const customListRecords = [
|
||||
{
|
||||
bloggerId: 1,
|
||||
bloggerName: 'Virtual Anchor Xiaohua',
|
||||
bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/flower.jpg',
|
||||
introduction:
|
||||
'Hi everyone, I am Xiaohua, the virtual host. I am a little fairy who likes games, animation and food. I hope to share happy moments with you through live broadcast.',
|
||||
fansCount: 400,
|
||||
worksCount: 10,
|
||||
viewCount: 5,
|
||||
city: 'Dream City',
|
||||
tags: ['game', 'anime', 'food']
|
||||
},
|
||||
{
|
||||
bloggerId: 2,
|
||||
bloggerName: 'Virtual anchor little wolf',
|
||||
bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/wolf.jpg',
|
||||
introduction:
|
||||
'Hello everyone, I am the virtual anchor Little Wolf. I like music, travel and photography, and I hope to explore the beauty of the world with you through live broadcast.',
|
||||
fansCount: 800,
|
||||
worksCount: 20,
|
||||
viewCount: 15,
|
||||
city: 'City of Music',
|
||||
tags: ['music', 'travel', 'photography']
|
||||
},
|
||||
{
|
||||
bloggerId: 3,
|
||||
bloggerName: 'Virtual anchor bunny',
|
||||
bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/rabbit.jpg',
|
||||
introduction:
|
||||
'Hello everyone, I am the virtual anchor Xiaotu. I like painting, handicrafts and beauty makeup. I hope to share creativity and fashion with you through live broadcast.',
|
||||
fansCount: 600,
|
||||
worksCount: 15,
|
||||
viewCount: 10,
|
||||
city: 'City of Art',
|
||||
tags: ['painting', 'handmade', 'beauty makeup']
|
||||
},
|
||||
{
|
||||
bloggerId: 4,
|
||||
bloggerName: 'Virtual anchor kitten',
|
||||
bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/cat.jpg',
|
||||
introduction:
|
||||
'Hello everyone, I am the virtual host Kitty. I am a lazy cat who likes dancing, fitness and cooking. I hope to live a healthy and happy life with everyone through the live broadcast.',
|
||||
fansCount: 1000,
|
||||
worksCount: 30,
|
||||
viewCount: 20,
|
||||
city: 'Health City',
|
||||
tags: ['dance', 'fitness', 'cooking']
|
||||
},
|
||||
{
|
||||
bloggerId: 5,
|
||||
bloggerName: 'Virtual anchor Bear',
|
||||
bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bear.jpg',
|
||||
introduction:
|
||||
'Hello everyone, I am the virtual host Xiaoxiong. A little wise man who likes movies, reading and philosophy, I hope to explore the meaning of life with you through live broadcast.',
|
||||
fansCount: 1200,
|
||||
worksCount: 25,
|
||||
viewCount: 18,
|
||||
city: 'City of Wisdom',
|
||||
tags: ['Movie', 'Literature']
|
||||
},
|
||||
{
|
||||
bloggerId: 6,
|
||||
bloggerName: 'Virtual anchor bird',
|
||||
bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bird.jpeg',
|
||||
introduction:
|
||||
'Hello everyone, I am the virtual anchor Xiaoniao. I like singing, acting and variety shows. I hope to be happy with everyone through the live broadcast.',
|
||||
fansCount: 900,
|
||||
worksCount: 12,
|
||||
viewCount: 8,
|
||||
city: 'Happy City',
|
||||
tags: ['music', 'performance', 'variety']
|
||||
}
|
||||
];
|
||||
|
||||
export const pivotChartColumns = [
|
||||
{
|
||||
dimensionKey: 'Region',
|
||||
title: 'Region',
|
||||
headerStyle: {
|
||||
textStick: true
|
||||
}
|
||||
},
|
||||
'Category'
|
||||
];
|
||||
export const pivotChartRows = [
|
||||
{
|
||||
dimensionKey: 'Order Year',
|
||||
title: 'Order Year',
|
||||
headerStyle: {
|
||||
textStick: true
|
||||
}
|
||||
},
|
||||
'Ship Mode'
|
||||
];
|
||||
export const pivotChartIndicators = [
|
||||
{
|
||||
indicatorKey: 'Quantity',
|
||||
title: 'Quantity',
|
||||
width: 'auto',
|
||||
cellType: 'chart',
|
||||
chartModule: 'vchart',
|
||||
chartSpec: {
|
||||
stack: true,
|
||||
type: 'bar',
|
||||
data: {
|
||||
id: 'data',
|
||||
fields: {
|
||||
'Sub-Category': {
|
||||
sortIndex: 0,
|
||||
domain: [
|
||||
'Chairs',
|
||||
'Tables',
|
||||
'Bookcases',
|
||||
'Furnishings',
|
||||
'Binders',
|
||||
'Art',
|
||||
'Storage',
|
||||
'Appliances',
|
||||
'Envelopes',
|
||||
'Fasteners',
|
||||
'Paper',
|
||||
'Labels',
|
||||
'Supplies',
|
||||
'Accessories',
|
||||
'Phones',
|
||||
'Copiers',
|
||||
'Machines'
|
||||
]
|
||||
},
|
||||
'Segment-Indicator': {
|
||||
sortIndex: 1,
|
||||
domain: [
|
||||
'Consumer-Quantity',
|
||||
'Corporate-Quantity',
|
||||
'Home Office-Quantity',
|
||||
'Consumer-Sales',
|
||||
'Corporate-Sales',
|
||||
'Home Office-Sales',
|
||||
'Consumer-Profit',
|
||||
'Corporate-Profit',
|
||||
'Home Office-Profit'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
xField: ['Sub-Category'],
|
||||
yField: 'Quantity',
|
||||
seriesField: 'Segment-Indicator',
|
||||
axes: [
|
||||
{ orient: 'left', visible: true, label: { visible: true } },
|
||||
{ orient: 'bottom', visible: true }
|
||||
],
|
||||
bar: {
|
||||
state: {
|
||||
selected: { fill: 'yellow' },
|
||||
selected_reverse: { opacity: 0.2 }
|
||||
}
|
||||
},
|
||||
scales: [
|
||||
{
|
||||
id: 'color',
|
||||
type: 'ordinal',
|
||||
domain: [
|
||||
'Consumer-Quantity',
|
||||
'Corporate-Quantity',
|
||||
'Home Office-Quantity',
|
||||
'Consumer-Sales',
|
||||
'Corporate-Sales',
|
||||
'Home Office-Sales',
|
||||
'Consumer-Profit',
|
||||
'Corporate-Profit',
|
||||
'Home Office-Profit'
|
||||
],
|
||||
range: [
|
||||
'#2E62F1',
|
||||
'#4DC36A',
|
||||
'#FF8406',
|
||||
'#FFCC00',
|
||||
'#4F44CF',
|
||||
'#5AC8FA',
|
||||
'#003A8C',
|
||||
'#B08AE2',
|
||||
'#FF6341',
|
||||
'#98DD62',
|
||||
'#07A199',
|
||||
'#87DBDD'
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
style: { padding: 1 }
|
||||
},
|
||||
{
|
||||
indicatorKey: 'Sales',
|
||||
title: 'Sales & Profit',
|
||||
cellType: 'chart',
|
||||
chartModule: 'vchart',
|
||||
chartSpec: {
|
||||
type: 'common',
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
data: {
|
||||
id: 'data1',
|
||||
fields: {
|
||||
'Sub-Category': {
|
||||
sortIndex: 0,
|
||||
domain: [
|
||||
'Chairs',
|
||||
'Tables',
|
||||
'Bookcases',
|
||||
'Furnishings',
|
||||
'Binders',
|
||||
'Art',
|
||||
'Storage',
|
||||
'Appliances',
|
||||
'Envelopes',
|
||||
'Fasteners',
|
||||
'Paper',
|
||||
'Labels',
|
||||
'Supplies',
|
||||
'Accessories',
|
||||
'Phones',
|
||||
'Copiers',
|
||||
'Machines'
|
||||
]
|
||||
},
|
||||
'Segment-Indicator': {
|
||||
sortIndex: 1,
|
||||
domain: [
|
||||
'Consumer-Quantity',
|
||||
'Corporate-Quantity',
|
||||
'Home Office-Quantity',
|
||||
'Consumer-Sales',
|
||||
'Corporate-Sales',
|
||||
'Home Office-Sales',
|
||||
'Consumer-Profit',
|
||||
'Corporate-Profit',
|
||||
'Home Office-Profit'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
stack: true,
|
||||
xField: ['Sub-Category'],
|
||||
yField: 'Sales',
|
||||
seriesField: 'Segment-Indicator',
|
||||
bar: {
|
||||
state: {
|
||||
selected: { fill: 'yellow' },
|
||||
selected_reverse: { opacity: 0.2 }
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
data: {
|
||||
id: 'data2',
|
||||
fields: {
|
||||
'Sub-Category': {
|
||||
sortIndex: 0,
|
||||
domain: [
|
||||
'Chairs',
|
||||
'Tables',
|
||||
'Bookcases',
|
||||
'Furnishings',
|
||||
'Binders',
|
||||
'Art',
|
||||
'Storage',
|
||||
'Appliances',
|
||||
'Envelopes',
|
||||
'Fasteners',
|
||||
'Paper',
|
||||
'Labels',
|
||||
'Supplies',
|
||||
'Phones',
|
||||
'Accessories',
|
||||
'Machines',
|
||||
'Copiers'
|
||||
]
|
||||
},
|
||||
'Segment-Indicator': {
|
||||
sortIndex: 1,
|
||||
domain: [
|
||||
'Consumer-Quantity',
|
||||
'Corporate-Quantity',
|
||||
'Home Office-Quantity',
|
||||
'Consumer-Sales',
|
||||
'Corporate-Sales',
|
||||
'Home Office-Sales',
|
||||
'Consumer-Profit',
|
||||
'Corporate-Profit',
|
||||
'Home Office-Profit'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
stack: false,
|
||||
xField: ['Sub-Category'],
|
||||
yField: 'Profit',
|
||||
seriesField: 'Segment-Indicator',
|
||||
line: {
|
||||
state: {
|
||||
selected: { lineWidth: 3 },
|
||||
selected_reverse: { lineWidth: 1 }
|
||||
}
|
||||
},
|
||||
point: {
|
||||
state: {
|
||||
selected: { fill: 'yellow' },
|
||||
selected_reverse: { fill: '#ddd' }
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
scales: [
|
||||
{
|
||||
id: 'color',
|
||||
type: 'ordinal',
|
||||
domain: [
|
||||
'Consumer-Quantity',
|
||||
'Corporate-Quantity',
|
||||
'Home Office-Quantity',
|
||||
'Consumer-Sales',
|
||||
'Corporate-Sales',
|
||||
'Home Office-Sales',
|
||||
'Consumer-Profit',
|
||||
'Corporate-Profit',
|
||||
'Home Office-Profit'
|
||||
],
|
||||
range: [
|
||||
'#2E62F1',
|
||||
'#4DC36A',
|
||||
'#FF8406',
|
||||
'#FFCC00',
|
||||
'#4F44CF',
|
||||
'#5AC8FA',
|
||||
'#003A8C',
|
||||
'#B08AE2',
|
||||
'#FF6341',
|
||||
'#98DD62',
|
||||
'#07A199',
|
||||
'#87DBDD'
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
style: { padding: 1 }
|
||||
}
|
||||
];
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script setup lang="tsx">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import {
|
||||
Group,
|
||||
Image,
|
||||
@ -14,32 +14,72 @@ import {
|
||||
PivotTable,
|
||||
Tag,
|
||||
Text,
|
||||
VTable,
|
||||
registerChartModule
|
||||
} from '@visactor/vue-vtable';
|
||||
import VChart from '@visactor/vchart';
|
||||
import { listTableRecords } from './data';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { customListRecords, listTableRecords, pivotChartColumns, pivotChartIndicators, pivotChartRows } from './data';
|
||||
|
||||
registerChartModule('vchart', VChart);
|
||||
const titleColorPool = ['#3370ff', '#34c724', '#ff9f1a', '#ff4050', '#1f2329'];
|
||||
|
||||
const themeStore = useThemeStore();
|
||||
|
||||
// list table
|
||||
const listTableRef = ref(null);
|
||||
const listOptions = computed(() => {
|
||||
const options = {
|
||||
theme: themeStore.darkMode ? VTable.themes.DARK : VTable.themes.DEFAULT
|
||||
};
|
||||
return options;
|
||||
});
|
||||
const listRecords = ref<Record<string, string | number>[]>(listTableRecords);
|
||||
|
||||
// group table
|
||||
const groupTableRef = ref(null);
|
||||
const groupOptions = computed(() => {
|
||||
const options = {
|
||||
groupBy: ['Category', 'Sub-Category'],
|
||||
theme: (themeStore.darkMode ? VTable.themes.DARK : VTable.themes.DEFAULT).extends({
|
||||
groupTitleStyle: {
|
||||
fontWeight: 'bold',
|
||||
bgColor: (args: any) => {
|
||||
const { col, row, table } = args;
|
||||
const index = table.getGroupTitleLevel(col, row);
|
||||
if (index !== undefined) {
|
||||
return titleColorPool[index % titleColorPool.length] as string;
|
||||
}
|
||||
return 'white';
|
||||
}
|
||||
}
|
||||
})
|
||||
};
|
||||
return options;
|
||||
});
|
||||
const groupRecords = ref<Record<string, string | number>[]>(listTableRecords);
|
||||
|
||||
// pivot table
|
||||
const pivotTableRef = ref(null);
|
||||
const pivotTableOptions = ref({
|
||||
tooltip: {
|
||||
isShowOverflowTextTooltip: true
|
||||
},
|
||||
dataConfig: {
|
||||
sortRules: [
|
||||
{
|
||||
sortField: 'Category',
|
||||
sortBy: ['Office Supplies', 'Technology', 'Furniture']
|
||||
}
|
||||
]
|
||||
},
|
||||
widthMode: 'standard'
|
||||
const pivotTableOptions = computed(() => {
|
||||
return {
|
||||
tooltip: {
|
||||
isShowOverflowTextTooltip: true
|
||||
},
|
||||
dataConfig: {
|
||||
sortRules: [
|
||||
{
|
||||
sortField: 'Category',
|
||||
sortBy: ['Office Supplies', 'Technology', 'Furniture']
|
||||
}
|
||||
]
|
||||
},
|
||||
widthMode: 'standard',
|
||||
theme: themeStore.darkMode ? VTable.themes.DARK : VTable.themes.DEFAULT,
|
||||
emptyTip: {
|
||||
text: 'no data records'
|
||||
}
|
||||
};
|
||||
});
|
||||
const pivotTableIndicators = ref([
|
||||
{
|
||||
@ -96,325 +136,54 @@ const pivotTableRecords = ref([]);
|
||||
|
||||
// pivot chart
|
||||
const pivotChartRef = ref(null);
|
||||
const pivotChartColumns = [
|
||||
{
|
||||
dimensionKey: 'Region',
|
||||
title: 'Region',
|
||||
headerStyle: {
|
||||
textStick: true
|
||||
}
|
||||
},
|
||||
'Category'
|
||||
];
|
||||
const pivotChartRows = [
|
||||
{
|
||||
dimensionKey: 'Order Year',
|
||||
title: 'Order Year',
|
||||
headerStyle: {
|
||||
textStick: true
|
||||
}
|
||||
},
|
||||
'Ship Mode'
|
||||
];
|
||||
const pivotChartIndicators = [
|
||||
{
|
||||
indicatorKey: 'Quantity',
|
||||
title: 'Quantity',
|
||||
width: 'auto',
|
||||
cellType: 'chart',
|
||||
chartModule: 'vchart',
|
||||
chartSpec: {
|
||||
stack: true,
|
||||
type: 'bar',
|
||||
data: {
|
||||
id: 'data',
|
||||
fields: {
|
||||
'Sub-Category': {
|
||||
sortIndex: 0,
|
||||
domain: [
|
||||
'Chairs',
|
||||
'Tables',
|
||||
'Bookcases',
|
||||
'Furnishings',
|
||||
'Binders',
|
||||
'Art',
|
||||
'Storage',
|
||||
'Appliances',
|
||||
'Envelopes',
|
||||
'Fasteners',
|
||||
'Paper',
|
||||
'Labels',
|
||||
'Supplies',
|
||||
'Accessories',
|
||||
'Phones',
|
||||
'Copiers',
|
||||
'Machines'
|
||||
]
|
||||
},
|
||||
'Segment-Indicator': {
|
||||
sortIndex: 1,
|
||||
domain: [
|
||||
'Consumer-Quantity',
|
||||
'Corporate-Quantity',
|
||||
'Home Office-Quantity',
|
||||
'Consumer-Sales',
|
||||
'Corporate-Sales',
|
||||
'Home Office-Sales',
|
||||
'Consumer-Profit',
|
||||
'Corporate-Profit',
|
||||
'Home Office-Profit'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
xField: ['Sub-Category'],
|
||||
yField: 'Quantity',
|
||||
seriesField: 'Segment-Indicator',
|
||||
axes: [
|
||||
{ orient: 'left', visible: true, label: { visible: true } },
|
||||
{ orient: 'bottom', visible: true }
|
||||
],
|
||||
bar: {
|
||||
state: {
|
||||
selected: { fill: 'yellow' },
|
||||
selected_reverse: { opacity: 0.2 }
|
||||
}
|
||||
},
|
||||
scales: [
|
||||
{
|
||||
id: 'color',
|
||||
type: 'ordinal',
|
||||
domain: [
|
||||
'Consumer-Quantity',
|
||||
'Corporate-Quantity',
|
||||
'Home Office-Quantity',
|
||||
'Consumer-Sales',
|
||||
'Corporate-Sales',
|
||||
'Home Office-Sales',
|
||||
'Consumer-Profit',
|
||||
'Corporate-Profit',
|
||||
'Home Office-Profit'
|
||||
],
|
||||
range: [
|
||||
'#2E62F1',
|
||||
'#4DC36A',
|
||||
'#FF8406',
|
||||
'#FFCC00',
|
||||
'#4F44CF',
|
||||
'#5AC8FA',
|
||||
'#003A8C',
|
||||
'#B08AE2',
|
||||
'#FF6341',
|
||||
'#98DD62',
|
||||
'#07A199',
|
||||
'#87DBDD'
|
||||
]
|
||||
}
|
||||
const pivotChartOptions = computed(() => {
|
||||
return {
|
||||
rows: pivotChartRows,
|
||||
columns: pivotChartColumns,
|
||||
indicators: pivotChartIndicators,
|
||||
indicatorsAsCol: false,
|
||||
defaultRowHeight: 200,
|
||||
defaultHeaderRowHeight: 50,
|
||||
defaultColWidth: 280,
|
||||
defaultHeaderColWidth: 100,
|
||||
indicatorTitle: '指标',
|
||||
autoWrapText: true,
|
||||
corner: {
|
||||
titleOnDimension: 'row',
|
||||
headerStyle: { autoWrapText: true }
|
||||
},
|
||||
legends: {
|
||||
orient: 'bottom',
|
||||
type: 'discrete',
|
||||
data: [
|
||||
{ label: 'Consumer-Quantity', shape: { fill: '#2E62F1', symbolType: 'circle' } },
|
||||
{ label: 'Consumer-Quantity', shape: { fill: '#4DC36A', symbolType: 'square' } },
|
||||
{ label: 'Home Office-Quantity', shape: { fill: '#FF8406', symbolType: 'square' } },
|
||||
{ label: 'Consumer-Sales', shape: { fill: '#FFCC00', symbolType: 'square' } },
|
||||
{ label: 'Consumer-Sales', shape: { fill: '#4F44CF', symbolType: 'square' } },
|
||||
{ label: 'Home Office-Sales', shape: { fill: '#5AC8FA', symbolType: 'square' } },
|
||||
{ label: 'Consumer-Profit', shape: { fill: '#003A8C', symbolType: 'square' } },
|
||||
{ label: 'Consumer-Profit', shape: { fill: '#B08AE2', symbolType: 'square' } },
|
||||
{ label: 'Home Office-Profit', shape: { fill: '#FF6341', symbolType: 'square' } }
|
||||
]
|
||||
},
|
||||
style: { padding: 1 }
|
||||
},
|
||||
{
|
||||
indicatorKey: 'Sales',
|
||||
title: 'Sales & Profit',
|
||||
cellType: 'chart',
|
||||
chartModule: 'vchart',
|
||||
chartSpec: {
|
||||
type: 'common',
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
data: {
|
||||
id: 'data1',
|
||||
fields: {
|
||||
'Sub-Category': {
|
||||
sortIndex: 0,
|
||||
domain: [
|
||||
'Chairs',
|
||||
'Tables',
|
||||
'Bookcases',
|
||||
'Furnishings',
|
||||
'Binders',
|
||||
'Art',
|
||||
'Storage',
|
||||
'Appliances',
|
||||
'Envelopes',
|
||||
'Fasteners',
|
||||
'Paper',
|
||||
'Labels',
|
||||
'Supplies',
|
||||
'Accessories',
|
||||
'Phones',
|
||||
'Copiers',
|
||||
'Machines'
|
||||
]
|
||||
},
|
||||
'Segment-Indicator': {
|
||||
sortIndex: 1,
|
||||
domain: [
|
||||
'Consumer-Quantity',
|
||||
'Corporate-Quantity',
|
||||
'Home Office-Quantity',
|
||||
'Consumer-Sales',
|
||||
'Corporate-Sales',
|
||||
'Home Office-Sales',
|
||||
'Consumer-Profit',
|
||||
'Corporate-Profit',
|
||||
'Home Office-Profit'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
stack: true,
|
||||
xField: ['Sub-Category'],
|
||||
yField: 'Sales',
|
||||
seriesField: 'Segment-Indicator',
|
||||
bar: {
|
||||
state: {
|
||||
selected: { fill: 'yellow' },
|
||||
selected_reverse: { opacity: 0.2 }
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
data: {
|
||||
id: 'data2',
|
||||
fields: {
|
||||
'Sub-Category': {
|
||||
sortIndex: 0,
|
||||
domain: [
|
||||
'Chairs',
|
||||
'Tables',
|
||||
'Bookcases',
|
||||
'Furnishings',
|
||||
'Binders',
|
||||
'Art',
|
||||
'Storage',
|
||||
'Appliances',
|
||||
'Envelopes',
|
||||
'Fasteners',
|
||||
'Paper',
|
||||
'Labels',
|
||||
'Supplies',
|
||||
'Phones',
|
||||
'Accessories',
|
||||
'Machines',
|
||||
'Copiers'
|
||||
]
|
||||
},
|
||||
'Segment-Indicator': {
|
||||
sortIndex: 1,
|
||||
domain: [
|
||||
'Consumer-Quantity',
|
||||
'Corporate-Quantity',
|
||||
'Home Office-Quantity',
|
||||
'Consumer-Sales',
|
||||
'Corporate-Sales',
|
||||
'Home Office-Sales',
|
||||
'Consumer-Profit',
|
||||
'Corporate-Profit',
|
||||
'Home Office-Profit'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
stack: false,
|
||||
xField: ['Sub-Category'],
|
||||
yField: 'Profit',
|
||||
seriesField: 'Segment-Indicator',
|
||||
line: {
|
||||
state: {
|
||||
selected: { lineWidth: 3 },
|
||||
selected_reverse: { lineWidth: 1 }
|
||||
}
|
||||
},
|
||||
point: {
|
||||
state: {
|
||||
selected: { fill: 'yellow' },
|
||||
selected_reverse: { fill: '#ddd' }
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
scales: [
|
||||
{
|
||||
id: 'color',
|
||||
type: 'ordinal',
|
||||
domain: [
|
||||
'Consumer-Quantity',
|
||||
'Corporate-Quantity',
|
||||
'Home Office-Quantity',
|
||||
'Consumer-Sales',
|
||||
'Corporate-Sales',
|
||||
'Home Office-Sales',
|
||||
'Consumer-Profit',
|
||||
'Corporate-Profit',
|
||||
'Home Office-Profit'
|
||||
],
|
||||
range: [
|
||||
'#2E62F1',
|
||||
'#4DC36A',
|
||||
'#FF8406',
|
||||
'#FFCC00',
|
||||
'#4F44CF',
|
||||
'#5AC8FA',
|
||||
'#003A8C',
|
||||
'#B08AE2',
|
||||
'#FF6341',
|
||||
'#98DD62',
|
||||
'#07A199',
|
||||
'#87DBDD'
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
style: { padding: 1 }
|
||||
}
|
||||
];
|
||||
const pivotChartOptions = ref({
|
||||
rows: pivotChartRows,
|
||||
columns: pivotChartColumns,
|
||||
indicators: pivotChartIndicators,
|
||||
indicatorsAsCol: false,
|
||||
defaultRowHeight: 200,
|
||||
defaultHeaderRowHeight: 50,
|
||||
defaultColWidth: 280,
|
||||
defaultHeaderColWidth: 100,
|
||||
indicatorTitle: '指标',
|
||||
autoWrapText: true,
|
||||
corner: {
|
||||
titleOnDimension: 'row',
|
||||
headerStyle: { autoWrapText: true }
|
||||
},
|
||||
legends: {
|
||||
orient: 'bottom',
|
||||
type: 'discrete',
|
||||
data: [
|
||||
{ label: 'Consumer-Quantity', shape: { fill: '#2E62F1', symbolType: 'circle' } },
|
||||
{ label: 'Consumer-Quantity', shape: { fill: '#4DC36A', symbolType: 'square' } },
|
||||
{ label: 'Home Office-Quantity', shape: { fill: '#FF8406', symbolType: 'square' } },
|
||||
{ label: 'Consumer-Sales', shape: { fill: '#FFCC00', symbolType: 'square' } },
|
||||
{ label: 'Consumer-Sales', shape: { fill: '#4F44CF', symbolType: 'square' } },
|
||||
{ label: 'Home Office-Sales', shape: { fill: '#5AC8FA', symbolType: 'square' } },
|
||||
{ label: 'Consumer-Profit', shape: { fill: '#003A8C', symbolType: 'square' } },
|
||||
{ label: 'Consumer-Profit', shape: { fill: '#B08AE2', symbolType: 'square' } },
|
||||
{ label: 'Home Office-Profit', shape: { fill: '#FF6341', symbolType: 'square' } }
|
||||
]
|
||||
},
|
||||
theme: {
|
||||
bodyStyle: { borderColor: 'gray', borderLineWidth: [1, 0, 0, 1] },
|
||||
headerStyle: { borderColor: 'gray', borderLineWidth: [0, 0, 1, 1], hover: { cellBgColor: '#CCE0FF' } },
|
||||
rowHeaderStyle: { borderColor: 'gray', borderLineWidth: [1, 1, 0, 0], hover: { cellBgColor: '#CCE0FF' } },
|
||||
cornerHeaderStyle: { borderColor: 'gray', borderLineWidth: [0, 1, 1, 0], hover: { cellBgColor: '' } },
|
||||
cornerRightTopCellStyle: { borderColor: 'gray', borderLineWidth: [0, 0, 1, 1], hover: { cellBgColor: '' } },
|
||||
cornerLeftBottomCellStyle: { borderColor: 'gray', borderLineWidth: [1, 1, 0, 0], hover: { cellBgColor: '' } },
|
||||
cornerRightBottomCellStyle: { borderColor: 'gray', borderLineWidth: [1, 0, 0, 1], hover: { cellBgColor: '' } },
|
||||
rightFrozenStyle: { borderColor: 'gray', borderLineWidth: [1, 0, 1, 1], hover: { cellBgColor: '' } },
|
||||
bottomFrozenStyle: { borderColor: 'gray', borderLineWidth: [1, 1, 0, 1], hover: { cellBgColor: '' } },
|
||||
selectionStyle: { cellBgColor: '', cellBorderColor: '' },
|
||||
frameStyle: { borderLineWidth: 0 }
|
||||
}
|
||||
theme: (themeStore.darkMode ? VTable.themes.DARK : VTable.themes.DEFAULT).extends({
|
||||
bodyStyle: { borderColor: 'gray', borderLineWidth: [1, 0, 0, 1] },
|
||||
headerStyle: { borderColor: 'gray', borderLineWidth: [0, 0, 1, 1], hover: { cellBgColor: '#CCE0FF' } },
|
||||
rowHeaderStyle: { borderColor: 'gray', borderLineWidth: [1, 1, 0, 0], hover: { cellBgColor: '#CCE0FF' } },
|
||||
cornerHeaderStyle: { borderColor: 'gray', borderLineWidth: [0, 1, 1, 0], hover: { cellBgColor: '' } },
|
||||
cornerRightTopCellStyle: { borderColor: 'gray', borderLineWidth: [0, 0, 1, 1], hover: { cellBgColor: '' } },
|
||||
cornerLeftBottomCellStyle: { borderColor: 'gray', borderLineWidth: [1, 1, 0, 0], hover: { cellBgColor: '' } },
|
||||
cornerRightBottomCellStyle: { borderColor: 'gray', borderLineWidth: [1, 0, 0, 1], hover: { cellBgColor: '' } },
|
||||
rightFrozenStyle: { borderColor: 'gray', borderLineWidth: [1, 0, 1, 1], hover: { cellBgColor: '' } },
|
||||
bottomFrozenStyle: { borderColor: 'gray', borderLineWidth: [1, 1, 0, 1], hover: { cellBgColor: '' } },
|
||||
selectionStyle: { cellBgColor: '', cellBorderColor: '' },
|
||||
frameStyle: { borderLineWidth: 0 }
|
||||
}),
|
||||
emptyTip: {
|
||||
text: 'no data records'
|
||||
}
|
||||
};
|
||||
});
|
||||
const pivotChartRecords = ref({} as any);
|
||||
const handleLegendItemClick = (args: { value: any }) => {
|
||||
@ -428,84 +197,15 @@ const handleLegendItemClick = (args: { value: any }) => {
|
||||
|
||||
// custom layout list table
|
||||
const customLayoutListTableRef = ref(null);
|
||||
const customLayoutListTableOptions = ref({
|
||||
defaultRowHeight: 80
|
||||
const customLayoutListTableOptions = computed(() => {
|
||||
return {
|
||||
defaultRowHeight: 80,
|
||||
theme: themeStore.darkMode ? VTable.themes.DARK : VTable.themes.DEFAULT
|
||||
};
|
||||
});
|
||||
const customLayoutListTableRecords = ref([
|
||||
{
|
||||
bloggerId: 1,
|
||||
bloggerName: 'Virtual Anchor Xiaohua',
|
||||
bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/flower.jpg',
|
||||
introduction:
|
||||
'Hi everyone, I am Xiaohua, the virtual host. I am a little fairy who likes games, animation and food. I hope to share happy moments with you through live broadcast.',
|
||||
fansCount: 400,
|
||||
worksCount: 10,
|
||||
viewCount: 5,
|
||||
city: 'Dream City',
|
||||
tags: ['game', 'anime', 'food']
|
||||
},
|
||||
{
|
||||
bloggerId: 2,
|
||||
bloggerName: 'Virtual anchor little wolf',
|
||||
bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/wolf.jpg',
|
||||
introduction:
|
||||
'Hello everyone, I am the virtual anchor Little Wolf. I like music, travel and photography, and I hope to explore the beauty of the world with you through live broadcast.',
|
||||
fansCount: 800,
|
||||
worksCount: 20,
|
||||
viewCount: 15,
|
||||
city: 'City of Music',
|
||||
tags: ['music', 'travel', 'photography']
|
||||
},
|
||||
{
|
||||
bloggerId: 3,
|
||||
bloggerName: 'Virtual anchor bunny',
|
||||
bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/rabbit.jpg',
|
||||
introduction:
|
||||
'Hello everyone, I am the virtual anchor Xiaotu. I like painting, handicrafts and beauty makeup. I hope to share creativity and fashion with you through live broadcast.',
|
||||
fansCount: 600,
|
||||
worksCount: 15,
|
||||
viewCount: 10,
|
||||
city: 'City of Art',
|
||||
tags: ['painting', 'handmade', 'beauty makeup']
|
||||
},
|
||||
{
|
||||
bloggerId: 4,
|
||||
bloggerName: 'Virtual anchor kitten',
|
||||
bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/cat.jpg',
|
||||
introduction:
|
||||
'Hello everyone, I am the virtual host Kitty. I am a lazy cat who likes dancing, fitness and cooking. I hope to live a healthy and happy life with everyone through the live broadcast.',
|
||||
fansCount: 1000,
|
||||
worksCount: 30,
|
||||
viewCount: 20,
|
||||
city: 'Health City',
|
||||
tags: ['dance', 'fitness', 'cooking']
|
||||
},
|
||||
{
|
||||
bloggerId: 5,
|
||||
bloggerName: 'Virtual anchor Bear',
|
||||
bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bear.jpg',
|
||||
introduction:
|
||||
'Hello everyone, I am the virtual host Xiaoxiong. A little wise man who likes movies, reading and philosophy, I hope to explore the meaning of life with you through live broadcast.',
|
||||
fansCount: 1200,
|
||||
worksCount: 25,
|
||||
viewCount: 18,
|
||||
city: 'City of Wisdom',
|
||||
tags: ['Movie', 'Literature']
|
||||
},
|
||||
{
|
||||
bloggerId: 6,
|
||||
bloggerName: 'Virtual anchor bird',
|
||||
bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bird.jpeg',
|
||||
introduction:
|
||||
'Hello everyone, I am the virtual anchor Xiaoniao. I like singing, acting and variety shows. I hope to be happy with everyone through the live broadcast.',
|
||||
fansCount: 900,
|
||||
worksCount: 12,
|
||||
viewCount: 8,
|
||||
city: 'Happy City',
|
||||
tags: ['music', 'performance', 'variety']
|
||||
}
|
||||
]);
|
||||
const customLayoutListTableRecords = ref(customListRecords);
|
||||
const customLayoutListTableColumnStyle = ref({ fontFamily: 'Arial', fontSize: 12, fontWeight: 'bold' });
|
||||
|
||||
onMounted(() => {
|
||||
// pivot tablt records
|
||||
fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_Pivot_data.json')
|
||||
@ -529,7 +229,23 @@ onMounted(() => {
|
||||
<div class="h-full">
|
||||
<NSpace vertical :size="16">
|
||||
<NCard title="List Table" :bordered="false" class="h-full w-2/3 card-wrapper">
|
||||
<ListTable ref="listTableRef" :options="{}" :records="listRecords" height="400px">
|
||||
<ListTable ref="listTableRef" :options="listOptions" :records="listRecords" height="400px">
|
||||
<ListColumn field="Order ID" title="Order ID" width="auto" />
|
||||
<ListColumn field="Customer ID" title="Customer ID" width="auto" />
|
||||
<ListColumn field="Product Name" title="Product Name" width="auto" />
|
||||
<ListColumn field="Category" title="Category" width="auto" />
|
||||
<ListColumn field="Sub-Category" title="Sub-Category" width="auto" />
|
||||
<ListColumn field="Region" title="Region" width="auto" />
|
||||
<ListColumn field="City" title="City" width="auto" />
|
||||
<ListColumn field="Order Date" title="Order Date" width="auto" />
|
||||
<ListColumn field="Quantity" title="Quantity" width="auto" />
|
||||
<ListColumn field="Sales" title="Sales" width="auto" />
|
||||
<ListColumn field="Profit" title="Profit" width="auto" />
|
||||
</ListTable>
|
||||
</NCard>
|
||||
|
||||
<NCard title="Group Table" :bordered="false" class="h-full w-2/3 card-wrapper">
|
||||
<ListTable ref="groupTableRef" :options="groupOptions" :records="groupRecords" height="400px">
|
||||
<ListColumn field="Order ID" title="Order ID" width="auto" />
|
||||
<ListColumn field="Customer ID" title="Customer ID" width="auto" />
|
||||
<ListColumn field="Product Name" title="Product Name" width="auto" />
|
||||
@ -594,10 +310,10 @@ onMounted(() => {
|
||||
height="400px"
|
||||
>
|
||||
<!-- Order Number Column -->
|
||||
<ListColumn field="bloggerId" title="order number" width="100" />
|
||||
<ListColumn field="bloggerId" title="Order Number" width="100" />
|
||||
|
||||
<!-- Anchor Nickname Column with Custom Layout -->
|
||||
<ListColumn field="bloggerName" title="anchor nickname" :width="330">
|
||||
<ListColumn field="bloggerName" title="Anchor Nickname" :width="330">
|
||||
<template #customLayout="{ record, height, width }">
|
||||
<Group :height="height" :width="width" display="flex" flex-direction="row" flex-wrap="nowrap">
|
||||
<!-- Avatar Group -->
|
||||
|
||||
Loading…
Reference in New Issue
Block a user