传统html引用g2plot图表的示例

作者: 上海_前端_求内推 | 来源:发表于2022-08-18 17:56 被阅读0次

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
<script type="text/javascript" src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js"></script>
    </head>
    <body>
            <div id="canvas"></div>
    </body>
    <script type="text/javascript">
        const data = [
          { year: '1991', value: 3 },
          { year: '1992', value: 4 },
          { year: '1993', value: 3.5 },
          { year: '1994', value: 5 },
          { year: '1995', value: 4.9 },
          { year: '1996', value: 6 },
          { year: '1997', value: 7 },
          { year: '1998', value: 9 },
          { year: '1999', value: 13 },
        ];
        const linePlot = new G2Plot.Line('canvas', {
          data,
          xField: 'year',
          yField: 'value',
        });
        
        linePlot.render();
    </script>
</html>