简单面积图

源码
import { Chart } from '@antv/g2';

const data = [
  { year: '1991', value: 15468 },
  { year: '1992', value: 16100 },
  { year: '1993', value: 15900 },
  { year: '1994', value: 17409 },
  { year: '1995', value: 17000 },
  { year: '1996', value: 31056 },
  { year: '1997', value: 31982 },
  { year: '1998', value: 32040 },
  { year: '1999', value: 33233 },
];
const chart = new Chart({
  container: 'container',
  autoFit: true,
});

chart.options({
  type: 'view',
  data: data,
  children: [
    {
      type: 'area',
      encode: {
        x: (d) => d.year,
        y: 'value',
        // 'area', 'smooth', 'hvh', 'vh', 'hv'
        shape: 'area',
      },
      style: { opacity: 0.2 },
      axis: { y: { labelFormatter: '~s', title: false } },
    },
    {
      type: 'line',
      encode: {
        x: 'year',
        y: 'value',
        // 'line', 'smooth', 'vh', 'hv', 'hvh'
        shape: 'line',
      },
    },
  ],
});

chart.render();
全站搜索
文档与示例输入关键词开始搜索

输入关键词,查找文档、API 与示例

选择打开Esc关闭