我这里是把js文件下载下来了,所以是引入本地文件,你们也可以通过引入在线资源
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试</title> <style type="text/css"> #container{ width: 800px; margin: 100px auto; } </style> <script src="g2.js"></script> </head> <body> <div id="container"></div> <script type="text/javascript"> // 定义数据源 var data = [ {time: "2013", amount: 120}, {time: "2014", amount: 240}, {time: "2015", amount: 300}, {time: "2016", amount: 180}, {time: "2017", amount: 150}, ]; // 创建图表对象 var chart = new G2.Chart({ id: "container", forceFit: true,//宽度自适应,也可以直接调整 height: 280, }); // 载入数据源 chart.source(data, { time: { alias: "时间" //定义别名 }, amount: { alias: "销售量" } }); // 绘制图像,这里time*amount也就是time是X轴,如果是amount*time,那么amount就是X轴 // 这里的interval是几何标记,也就是你可以通过设置几何标记从而确定你要展示的图标类型 chart.interval().position("time * amount").color("time"); //渲染图像到网页 chart.render(); </script> </body> </html>