排序配置, 统计类图表, 可根据指标或维度对类目轴或图例排序, 或自定义顺序
1export const SortAxisByMeasure = memo(() => {
2 const vseed: VSeed = {
3 chartType: 'line',
4 dataset: [
5 { date: '2019', profit: 10, sales: 20, count: 15 },
6 { date: '2020', profit: 30, sales: 60, count: 33 },
7 { date: '2021', profit: 30, sales: 60, count: 22 },
8 { date: '2022', profit: 50, sales: 100, count: 14 },
9 { date: '2023', profit: 40, sales: 80, count: 30 },
10 ],
11 dimensions: [{ id: 'date', alias: '日期', location: 'dimension' }],
12 measures: [
13 { id: 'count', alias: '数量' },
14 {
15 id: 'group',
16 alias: '分组',
17 children: [
18 { id: 'sales', alias: '销售额' },
19 { id: 'profit', alias: '利润' },
20 ],
21 },
22 ],
23 sortAxis: {
24 order: 'desc',
25 orderBy: 'sales',
26 },
27 }
28 return <PivotChart vseed={vseed} />
29})1export const SortAxisByDimension = memo(() => {
2 const vseed: VSeed = {
3 chartType: 'line',
4 dataset: [
5 { date: '2019', profit: 10, sales: 20, count: 50 },
6 { date: '2020', profit: 30, sales: 60, count: 50 },
7 { date: '2021', profit: 30, sales: 60, count: 50 },
8 { date: '2022', profit: 50, sales: 100, count: 50 },
9 { date: '2023', profit: 40, sales: 80, count: 50 },
10 ],
11 dimensions: [{ id: 'date', alias: '日期', location: 'dimension' }],
12 measures: [
13 { id: 'profit', alias: '利润' },
14 { id: 'sales', alias: '销售额' },
15 { id: 'count', alias: '数量' },
16 ],
17 sortAxis: {
18 order: 'desc',
19 orderBy: 'date',
20 },
21 }
22 return <VChartRender vseed={vseed} />
23})1export const SortAxisByCustom = memo(() => {
2 const vseed: VSeed = {
3 chartType: 'line',
4 dataset: [
5 { date: '2019', profit: 10, sales: 20, count: 50 },
6 { date: '2020', profit: 30, sales: 60, count: 50 },
7 { date: '2021', profit: 30, sales: 60, count: 50 },
8 { date: '2022', profit: 50, sales: 100, count: 50 },
9 { date: '2023', profit: 40, sales: 80, count: 50 },
10 ],
11 dimensions: [{ id: 'date', alias: '日期', location: 'dimension' }],
12 measures: [
13 { id: 'profit', alias: '利润' },
14 { id: 'sales', alias: '销售额' },
15 { id: 'count', alias: '数量' },
16 ],
17 sortAxis: {
18 customOrder: ['2022', '2023', '2021', '2020', '2019'],
19 },
20 }
21 return <VChartRender vseed={vseed} />
22})
仅传入 order, 则按图例自身的字符顺序排序
1export const SortLegendBySelf = memo(() => {
2 const vseed: VSeed = {
3 chartType: 'column',
4 dataset: [
5 { date: '2019', profit: 10, sales: 20, count: 15 },
6 { date: '2020', profit: 30, sales: 60, count: 33 },
7 { date: '2021', profit: 30, sales: 60, count: 22 },
8 { date: '2022', profit: 50, sales: 100, count: 14 },
9 { date: '2023', profit: 40, sales: 80, count: 30 },
10 ],
11 dimensions: [{ id: 'date', alias: '日期', location: 'dimension' }],
12 measures: [
13 { id: 'count', alias: '数量' },
14 { id: 'sales', alias: '销售额' },
15 { id: 'profit', alias: '利润' },
16 ],
17 sortLegend: {
18 order: 'desc',
19 },
20 }
21 return <VChartRender vseed={vseed} />
22})1export const SortLegendByMeasure = memo(() => {
2 const vseed: VSeed = {
3 chartType: 'line',
4 dataset: [
5 { date: '2019', profit: 10, sales: 20, count: 15 },
6 { date: '2020', profit: 30, sales: 60, count: 33 },
7 { date: '2021', profit: 30, sales: 60, count: 22 },
8 { date: '2022', profit: 50, sales: 100, count: 14 },
9 { date: '2023', profit: 40, sales: 80, count: 30 },
10 ],
11 dimensions: [{ id: 'date', alias: '日期', location: 'dimension' }],
12 measures: [
13 { id: 'count', alias: '数量' },
14 {
15 id: 'group',
16 alias: '分组',
17 children: [
18 { id: 'sales', alias: '销售额' },
19 { id: 'profit', alias: '利润' },
20 ],
21 },
22 ],
23 sortLegend: {
24 order: 'desc',
25 orderBy: 'sales',
26 },
27 }
28 return <PivotChart vseed={vseed} />
29})1export const SortLegendByDimension = memo(() => {
2 const vseed: VSeed = {
3 chartType: 'line',
4 dataset: [
5 { date: '2019', profit: 10, sales: 20, count: 50 },
6 { date: '2020', profit: 30, sales: 60, count: 50 },
7 { date: '2021', profit: 30, sales: 60, count: 50 },
8 { date: '2022', profit: 50, sales: 100, count: 50 },
9 { date: '2023', profit: 40, sales: 80, count: 50 },
10 ],
11 dimensions: [{ id: 'date', alias: '日期', location: 'dimension' }],
12 measures: [
13 { id: 'profit', alias: '利润' },
14 { id: 'sales', alias: '销售额' },
15 { id: 'count', alias: '数量' },
16 ],
17 sortLegend: {
18 order: 'desc',
19 orderBy: 'date',
20 },
21 }
22 return <VChartRender vseed={vseed} />
23})builder.getColorItems() 可获取到图例名称的数组
1export const SortLegendByCustom = memo(() => {
2 const vseed: VSeed = {
3 chartType: 'line',
4 dataset: [
5 { date: '2019', profit: 10, sales: 20, count: 50 },
6 { date: '2020', profit: 30, sales: 60, count: 50 },
7 { date: '2021', profit: 30, sales: 60, count: 50 },
8 { date: '2022', profit: 50, sales: 100, count: 50 },
9 { date: '2023', profit: 40, sales: 80, count: 50 },
10 ],
11 dimensions: [{ id: 'date', alias: '日期', location: 'dimension' }],
12 measures: [
13 { id: 'profit', alias: '利润' },
14 { id: 'sales', alias: '销售额' },
15 { id: 'count', alias: '数量' },
16 ],
17 sortLegend: {
18 customOrder: ['销售额', '数量', '利润'],
19 },
20 }
21 return <VChartRender vseed={vseed} />
22})builder.getColorIdMap() 可获取到图例id和名称的映射关系
1export const SortLegendByCustomId = memo(() => {
2 const vseed: VSeed = {
3 chartType: 'columnParallel',
4 dataset: [
5 { date: '2019', profit: 10, sales: 20, count: 50 },
6 { date: '2020', profit: 30, sales: 60, count: 50 },
7 { date: '2021', profit: 30, sales: 60, count: 50 },
8 { date: '2022', profit: 50, sales: 100, count: 50 },
9 { date: '2023', profit: 40, sales: 80, count: 50 },
10 ],
11 dimensions: [{ id: 'date', alias: '日期', location: 'dimension' }],
12 measures: [
13 { id: 'profit', alias: '利润' },
14 { id: 'sales', alias: '销售额' },
15 { id: 'count', alias: '数量' },
16 ],
17 sortLegend: {
18 customOrder: ['数量-count', '销售额-sales', '利润-profit'],
19 },
20 }
21 return <VChartRender vseed={vseed} />
22})