#AnnotationArea
#bar
bar
import { VSeedRender } from '@components'
export default () => {
const vseedConfig = {
"chartType": "bar",
"dataset": [
{
"date": "2019",
"profit": 10,
"sales": 20,
"count": 50
},
{
"date": "2020",
"profit": 30,
"sales": 60,
"count": 50
},
{
"date": "2021",
"profit": 30,
"sales": 60,
"count": 50
},
{
"date": "2022",
"profit": 50,
"sales": 100,
"count": 50
},
{
"date": "2023",
"profit": 40,
"sales": 80,
"count": 50
}
],
"annotationArea": {
"selector": [
"2021"
],
"text": "区域",
"textPosition": "topRight",
"textAlign": "right"
},
"dimensions": [
{
"id": "date",
"alias": "日期"
}
],
"measures": [
{
"id": "profit",
"alias": "利润"
},
{
"id": "sales",
"alias": "销售额"
},
{
"id": "count",
"alias": "数量"
}
]
}
return <VSeedRender vseed={vseedConfig} />
}#column
column
import { VSeedRender } from '@components'
export default () => {
const vseedConfig = {
"chartType": "columnParallel",
"dataset": [
{
"date": "2019",
"profit": 10,
"sales": 20,
"count": 50
},
{
"date": "2020",
"profit": 30,
"sales": 60,
"count": 50
},
{
"date": "2021",
"profit": 30,
"sales": 60,
"count": 50
},
{
"date": "2022",
"profit": 50,
"sales": 100,
"count": 50
},
{
"date": "2023",
"profit": 40,
"sales": 80,
"count": 50
}
],
"annotationArea": {
"selector": [
"2021"
],
"text": "区域"
},
"dimensions": [
{
"id": "date",
"alias": "日期"
}
],
"measures": [
{
"id": "profit",
"alias": "利润"
},
{
"id": "sales",
"alias": "销售额"
},
{
"id": "count",
"alias": "数量"
}
]
}
return <VSeedRender vseed={vseedConfig} />
}#line
line
import { VSeedRender } from '@components'
export default () => {
const vseedConfig = {
"chartType": "line",
"dataset": [
{
"date": "2019",
"profit": 10,
"sales": 20,
"count": 50
},
{
"date": "2020",
"profit": 30,
"sales": 60,
"count": 50
},
{
"date": "2021",
"profit": 30,
"sales": 60,
"count": 50
},
{
"date": "2022",
"profit": 50,
"sales": 100,
"count": 50
},
{
"date": "2023",
"profit": 40,
"sales": 80,
"count": 50
}
],
"annotationArea": {
"selector": [
"2021"
],
"text": "区域"
},
"dimensions": [
{
"id": "date",
"alias": "日期"
}
],
"measures": [
{
"id": "profit",
"alias": "利润"
},
{
"id": "sales",
"alias": "销售额"
},
{
"id": "count",
"alias": "数量"
}
]
}
return <VSeedRender vseed={vseedConfig} />
}