G2 | web

# G2

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.js"></script>
  </head>
  <body>
    <div id="g2-chart"></div>
    <script>
      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 chartDom = document.getElementById('g2-chart');
      const plot = new G2Plot.Line(chartDom, {
        title: {
          visible: true,
          text: 'g2折线图示例',
        },
        data,
        xField: 'year',
        yField: 'value',
        description: {
          visible: true,
          text: '折线图用于表示连续时间跨度内的数据，它通常用于显示某变量随时间的变化模式。',
        },
        point: {
          visible: true
        },
        label: {
          visible: true
        },
        color: '#FE740C',
        point: {
          visible: true,
          size: 5,
          color: 'white',
          style: {
            stroke: '#FE740C',
            lineWidth: 2,
            fillOpacity: 0.6,
          },
        },
        yAxis: {
          formatter: (v) => {
            return v + 'k';
          },
        },
      });
      plot.render();
    </script>
  </body>
</html>
← arcgis L7 →