G2 基本使用 折线图 柱状图 饼图 基本配置

G2的基本使用

  1.浏览器引入   <script src="https://gw.alipayobjects.com/os/lib/antv/g2/3.4.10/dist/g2.min.js">script>

       2.通过 npm 安装   npm install @antv/g2 --save

  3.创建 div 图表容器 <div id="c1">div>

  4. 编写图表绘制代码

    (1)创建 Chart 图表对象,指定图表所在的容器 ID、指定图表的宽高、边距等信息;

    (2)载入图表数据源;

    (3)使用图形语法进行图表的绘制;

    (4)渲染图表。(这部分代码用 ,可以放在页面代码的任意位置(最好的做法是放在  之前))

  5示例:

    (1)折线图(单线)

      G2 基本使用 折线图 柱状图 饼图 基本配置_第1张图片

      

        

        
     
     
    (2)折线图(双线)
      
      

      

      
    (3)折线图(多线)
      

     G2 基本使用 折线图 柱状图 饼图 基本配置_第2张图片

          
(4)基础柱状图
  

G2 基本使用 折线图 柱状图 饼图 基本配置_第3张图片

  


 
  

转载于:https://www.cnblogs.com/nmxs/p/10760610.html

你可能感兴趣的:(G2 基本使用 折线图 柱状图 饼图 基本配置)