1export const BaseConfigLegend = memo(() => {
2 const vseed: VSeed = {
3 chartType: 'columnParallel',
4 legend: {
5 enable: false,
6 },
7 dataset: [
8 { date: '2019', profit: 10, sales: 20 },
9 { date: '2020', profit: 30, sales: 60 },
10 { date: '2021', profit: 30, sales: 60 },
11 { date: '2022', profit: 50, sales: 100 },
12 { date: '2023', profit: 40, sales: 80 },
13 ],
14 }
15 return <VChartRender vseed={vseed} />
16})1{
2 position?:
3 | 'top' | 'topLeft' | 'topRight' | 'tl' | 'tr'
4 | 'right' | 'rightTop' | 'rightBottom' | 'rt' | 'rb'
5 | 'bottom'| 'bottomLeft'| 'bottomRight' | 'bl' | 'br'
6 | 'left' | 'leftTop' | 'leftBottom' | 'lt' | 'lb'
7}1export const BaseConfigLegendPosition = memo(() => {
2 const vseed: VSeed = {
3 chartType: 'columnParallel',
4 legend: {
5 enable: true,
6 position: 'bl',
7 },
8 dataset: [
9 { date: '2019', profit: 10, sales: 20 },
10 { date: '2020', profit: 30, sales: 60 },
11 { date: '2021', profit: 30, sales: 60 },
12 { date: '2022', profit: 50, sales: 100 },
13 { date: '2023', profit: 40, sales: 80 },
14 ],
15 }
16 return <VChartRender vseed={vseed} />
17})export const BaseConfigLegendMaxSize = memo(() => {
const vseed: VSeed = {
chartType: 'columnParallel',
legend: {
enable: true,
position: 'rt',
maxSize: 2,
},
dataset: [
{ date: '2019', region: 'east', city: 'A', profit: 1, sales: 2, discount: 0.5 },
{ date: '2019', region: 'east', city: 'B', profit: 3, sales: 6, discount: 0.5 },
{ date: '2019', region: 'east', city: 'C', profit: 3, sales: 6, discount: 0.5 },
{ date: '2019', region: 'east', city: 'D', profit: 5, sales: 10, discount: 0.5 },
{ date: '2019', region: 'east', city: 'E', profit: 4, sales: 8, discount: 0.5 },
{ date: '2020', region: 'north of east', city: 'A', profit: 1, sales: 2, discount: 0.5 },
{ date: '2020', region: 'north of east', city: 'B', profit: 3, sales: 6, discount: 0.5 },
{ date: '2020', region: 'north of east', city: 'C', profit: 3, sales: 6, discount: 0.5 },
{ date: '2020', region: 'north of east', city: 'D', profit: 5, sales: 10, discount: 0.5 },
{ date: '2020', region: 'north of east', city: 'E', profit: 4, sales: 8, discount: 0.5 },
],
}
return <VChartRender vseed={vseed} />
})export const BaseConfigLegendMaxSize = memo(() => {
const vseed: VSeed = {
chartType: 'columnParallel',
legend: {
enable: true,
border: false,
position: 'rt',
maxSize: 2,
},
dataset: [
{ date: '2019', region: 'east', city: 'A', profit: 1, sales: 2, discount: 0.5 },
{ date: '2019', region: 'east', city: 'B', profit: 3, sales: 6, discount: 0.5 },
{ date: '2019', region: 'east', city: 'C', profit: 3, sales: 6, discount: 0.5 },
{ date: '2019', region: 'east', city: 'D', profit: 5, sales: 10, discount: 0.5 },
{ date: '2019', region: 'east', city: 'E', profit: 4, sales: 8, discount: 0.5 },
{ date: '2020', region: 'north of east', city: 'A', profit: 1, sales: 2, discount: 0.5 },
{ date: '2020', region: 'north of east', city: 'B', profit: 3, sales: 6, discount: 0.5 },
{ date: '2020', region: 'north of east', city: 'C', profit: 3, sales: 6, discount: 0.5 },
{ date: '2020', region: 'north of east', city: 'D', profit: 5, sales: 10, discount: 0.5 },
{ date: '2020', region: 'north of east', city: 'E', profit: 4, sales: 8, discount: 0.5 },
],
}
return <VChartRender vseed={vseed} />
})1export const BaseConfigLegendLabel = memo(() => {
2 const vseed: VSeed = {
3 chartType: 'columnParallel',
4 legend: {
5 enable: true,
6 position: 'rt',
7 labelFontSize: 12,
8 labelFontColor: '#000',
9 labelFontWeight: 'bold',
10 },
11 dataset: [
12 { date: '2019', profit: 10, sales: 20 },
13 { date: '2020', profit: 30, sales: 60 },
14 { date: '2021', profit: 30, sales: 60 },
15 { date: '2022', profit: 50, sales: 100 },
16 { date: '2023', profit: 40, sales: 80 },
17 ],
18 }
19 return <VChartRender vseed={vseed} />
20})1export const BaseConfigLegendLabel = memo(() => {
2 const vseed: VSeed = {
3 chartType: 'columnParallel',
4 legend: {
5 enable: true,
6 position: 'rt',
7 labelFontSize: 12,
8 labelFontColor: '#000',
9 labelFontWeight: 'bold',
10 },
11 dataset: [
12 { date: '2019', profit: 10, sales: 20 },
13 { date: '2020', profit: 30, sales: 60 },
14 { date: '2021', profit: 30, sales: 60 },
15 { date: '2022', profit: 50, sales: 100 },
16 { date: '2023', profit: 40, sales: 80 },
17 ],
18 }
19 return <VChartRender vseed={vseed} />
20})1export const BaseConfigLegendLabel = memo(() => {
2 const vseed: VSeed = {
3 chartType: 'columnParallel',
4 legend: {
5 enable: true,
6 position: 'rt',
7 labelFontSize: 12,
8 labelFontColor: '#000',
9 labelFontWeight: 'bold',
10 },
11 dataset: [
12 { date: '2019', profit: 10, sales: 20 },
13 { date: '2020', profit: 30, sales: 60 },
14 { date: '2021', profit: 30, sales: 60 },
15 { date: '2022', profit: 50, sales: 100 },
16 { date: '2023', profit: 40, sales: 80 },
17 ],
18 }
19 return <VChartRender vseed={vseed} />
20})