We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
柱状图代码 import { Column } from '@antv/g2plot';
const data = [ { type: '家具家电', sales: 38, }, { type: '粮油副食', sales: 52, }, { type: '生鲜水果', sales: 61, }, { type: '美容洗护', sales: 145, }, { type: '母婴用品', sales: 48, }, { type: '进口食品', sales: 38, }, { type: '食品饮料', sales: 38, }, { type: '家庭清洁', sales: 38, }, ];
const columnPlot = new Column('container', { data, xField: 'type', yField: 'sales', label: { // 可手动配置 label 数据标签位置 position: 'middle', // 'top', 'bottom', 'middle', // 配置样式 style: { fill: '#FFFFFF', opacity: 0.6, }, }, xAxis: { label: { autoHide: true, autoRotate: true, }, }, meta: { type: { alias: '类别', }, sales: { alias: '销售额', }, }, });
columnPlot.render();
折线图代码 import { Line } from '@antv/g2plot';
fetch('https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json') .then((res) => res.json()) .then((data) => { const line = new Line('container', { data: [ { "Date": "2010-01", "scales": 1998 }, { "Date": "2010-02", "scales": 1850 }, { "Date": "2010-03", "scales": 1720 }, { "Date": "2010-04", "scales": 1818 }, { "Date": "2010-05", "scales": 1920 }, { "Date": "2010-06", "scales": 1802 }, { "Date": "2010-07", "scales": 1945 }, { "Date": "2010-08", "scales": 1856 }, { "Date": "2010-09", "scales": 2107 }, { "Date": "2010-10", "scales": 2140 }, { "Date": "2010-11", "scales": 2311 }, { "Date": "2010-12", "scales": 1972 } ], padding: 'auto', xField: 'Date', yField: 'scales', xAxis: { "label": { "autoRotate": true, "autoHide": true, } } });
line.render();
});
The text was updated successfully, but these errors were encountered:
No branches or pull requests
柱状图代码
import { Column } from '@antv/g2plot';
const data = [
{
type: '家具家电',
sales: 38,
},
{
type: '粮油副食',
sales: 52,
},
{
type: '生鲜水果',
sales: 61,
},
{
type: '美容洗护',
sales: 145,
},
{
type: '母婴用品',
sales: 48,
},
{
type: '进口食品',
sales: 38,
},
{
type: '食品饮料',
sales: 38,
},
{
type: '家庭清洁',
sales: 38,
},
];
const columnPlot = new Column('container', {
data,
xField: 'type',
yField: 'sales',
label: {
// 可手动配置 label 数据标签位置
position: 'middle', // 'top', 'bottom', 'middle',
// 配置样式
style: {
fill: '#FFFFFF',
opacity: 0.6,
},
},
xAxis: {
label: {
autoHide: true,
autoRotate: true,
},
},
meta: {
type: {
alias: '类别',
},
sales: {
alias: '销售额',
},
},
});
columnPlot.render();
折线图代码
import { Line } from '@antv/g2plot';
fetch('https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json')
.then((res) => res.json())
.then((data) => {
const line = new Line('container', {
data: [
{
"Date": "2010-01",
"scales": 1998
},
{
"Date": "2010-02",
"scales": 1850
},
{
"Date": "2010-03",
"scales": 1720
},
{
"Date": "2010-04",
"scales": 1818
},
{
"Date": "2010-05",
"scales": 1920
},
{
"Date": "2010-06",
"scales": 1802
},
{
"Date": "2010-07",
"scales": 1945
},
{
"Date": "2010-08",
"scales": 1856
},
{
"Date": "2010-09",
"scales": 2107
},
{
"Date": "2010-10",
"scales": 2140
},
{
"Date": "2010-11",
"scales": 2311
},
{
"Date": "2010-12",
"scales": 1972
}
],
padding: 'auto',
xField: 'Date',
yField: 'scales',
xAxis: {
"label": {
"autoRotate": true,
"autoHide": true,
}
}
});
});
The text was updated successfully, but these errors were encountered: