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)渲染图表。(这部分代码用 <script></script>，可以放在页面代码的任意位置（最好的做法是放在 </body> 之前）)

　　5示例：

　　　　（1）折线图(单线)

　　　　　　　<body>
　　　　　　　　<div id="appearance"></div>
　　　　　　　　<script> 
    　　　　　　　var 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}];
    　　　　　　　　var chart = new G2.Chart({
        　　　　　　　　container: \'appearance\', // 指定 图表容器ID
        　　　　　　　　forceFit: true,    // 是否自动缩放
       　　　　　　 　　height: 500,  // 图表的高度
    　　　　　　　　});
    　　　　　　　　chart.source(data);   // 载入数据源
    　　　　　　　　chart.scale(\'value\', {    // 度量
        　　　　　　　　min: 0  // Y轴显示的最小值
    　　　　　　　　});
    　　　　　　　　chart.scale(\'year\', {  // 度量
       　　　　　　　　 range: [0, 1]      // 数值范围区间
    　　　　　　　　});
    　　　　　　　　chart.tooltip({ // 提示信息
        　　　　　　　　crosshairs: { 
           　　　　　　　　 type: \'line\' // 提示信息类型
       　　　　　　　　 }
   　　　　　　　　 });
    　　　　　　　　chart.line().position(\'year*value\');   // 几何标记类型   线，  position:二维坐标系内设至 x轴 y轴
   　　　　　　　　 chart.point().position(\'year*value\').size(4).shape(\'circle\').style({  // 几何标记类型   点，  二维坐标系内设置 x轴 y轴    大小   图形形状
        　　　　　　　　stroke: \'#fff\',
        　　　　　　　　lineWidth: 1
    　　　　　　　　});
    　　　　　　　　chart.render();  // 渲染
　　　　　　</script>
　　　　　</body>

　　　　　
　　　　（2）折线图(双线)

　<div id="appearance"></div>
　　　　　　<script>
    　　　　// 在一行中保存多个城市的数据，需要将数据转换成
    　　　　// {month: \'Jan\', city: \'Tokyo\', temperature: 3.9}
    　　　　var data = [{month: \'Jan\', Tokyo: 7.0, London: 3.9}, {month: \'Feb\', Tokyo: 6.9, London: 4.2}, {
        　　　　month: \'Mar\', Tokyo: 9.5, London: 5.7}, {month: \'Apr\', Tokyo: 14.5, London: 8.5}, {month: \'May\',
        　　　　Tokyo: 18.4, London: 11.9}, {month: \'Jun\', Tokyo: 21.5, London: 15.2}, {month: \'Jul\', Tokyo: 25.2,
        　　　　London: 17.0}, {month: \'Aug\', Tokyo: 26.5, London: 16.6}, {month: \'Sep\', Tokyo: 23.3, London: 14.2
        　　　　}, {month: \'Oct\', Tokyo: 18.3, London: 10.3}, {month: \'Nov\', Tokyo: 13.9, London: 6.6}, {month: \'Dec\',
        　　　　Tokyo: 9.6, London: 4.8}];
    　　　　var ds = new DataSet(); // 创建DataSet 对象
    　　　　var dv = ds.createView().source(data);// 创建数据实例
    　　　　　　// fold 方式完成了行列转换，如果不想使用 DataSet 直接手工转换数据即可
    　　　　dv.transform({
        　　　　type: \'fold\',
        　　　　fields: [\'Tokyo\', \'London\'], // 展开字段集
        　　　　key: \'city\', // key字段
        　　　　value: \'temperature\' // value字段
    　　　　});
    　　　　var chart = new G2.Chart({
        　　　　container: \'appearance\',
        　　　　forceFit: true,
       　　　　 height: 500
    　　　　});
   　　　　 chart.source(dv, {
        　　　　month: {
            　　　　range: [0, 1]
       　　　　 }
    　　　　});
    　　　　chart.tooltip({
        　　　　crosshairs: {
            　　　　type: \'line\'
       　　　　 }
    　　　　});
    　　　　chart.axis(\'temperature\', {
        　　label: {
            　　formatter: function formatter(val) { // 格式化
                　　return val + \'°C\';
           　　 　　}
        　　　　}
    　　　　});
    　　　　chart.line().position(\'month*temperature\').color(\'city\').shape(\'smooth\');
    　　　　chart.point().position(\'month*temperature\').color(\'city\').size(4).shape(\'circle\').style({
        　　　　stroke: \'#fff\',
       　　　　 lineWidth: 1
    　　　　});
    　　　　chart.render();
　　　　　　</script>

　　　　（3）折线图(多线)

<script>
    var data = [{date: \'2018/8/1\', type: \'download\', value: 4623}, {date: \'2018/8/1\', type: \'register\', value: 2208}, {
        date: \'2018/8/1\', type: \'bill\', value: 182}, {date: \'2018/8/2\', type: \'download\', value: 6145}, {date: \'2018/8/2\',
        type: \'register\', value: 2016}, {date: \'2018/8/2\', type: \'bill\', value: 257}, {date: \'2018/8/3\', type: \'download\',
        value: 508}, {date: \'2018/8/3\', type: \'register\', value: 2916}, {date: \'2018/8/3\', type: \'bill\', value: 289}, {
        date: \'2018/8/4\', type: \'download\', value: 6268}, {date: \'2018/8/4\', type: \'register\', value: 4512}, {date: \'2018/8/4\',
        type: \'bill\', value: 428}, {date: \'2018/8/5\', type: \'download\', value: 6411}, {date: \'2018/8/5\', type: \'register\',
        value: 8281}, {date: \'2018/8/5\', type: \'bill\', value: 619}, {date: \'2018/8/6\', type: \'download\', value: 1890}, {
        date: \'2018/8/6\', type: \'register\', value: 2008}, {date: \'2018/8/6\', type: \'bill\', value: 87}, {date: \'2018/8/7\',
        type: \'download\', value: 4251}, {date: \'2018/8/7\', type: \'register\', value: 1963}, {date: \'2018/8/7\', type: \'bill\',
        value: 706}, {date: \'2018/8/8\', type: \'download\', value: 2978}, {date: \'2018/8/8\', type: \'register\', value: 2367}, {
        date: \'2018/8/8\', type: \'bill\', value: 387}, {date: \'2018/8/9\', type: \'download\', value: 3880}, {date: \'2018/8/9\',
        type: \'register\', value: 2956}, {date: \'2018/8/9\', type: \'bill\', value: 488}, {date: \'2018/8/10\', type: \'download\',
        value: 3606}, {date: \'2018/8/10\', type: \'register\', value: 678}, {date: \'2018/8/10\', type: \'bill\', value: 507}, {
        date: \'2018/8/11\', type: \'download\', value: 4311}, {date: \'2018/8/11\', type: \'register\', value: 3188}, {date: \'2018/8/11\',
        type: \'bill\', value: 548}, {date: \'2018/8/12\', type: \'download\', value: 4116}, {date: \'2018/8/12\', type: \'register\',
        value: 3491}, {date: \'2018/8/12\', type: \'bill\', value: 456}, {date: \'2018/8/13\', type: \'download\', value: 6419}, {
        date: \'2018/8/13\', type: \'register\', value: 2852}, {date: \'2018/8/13\', type: \'bill\', value: 689}, {date: \'2018/8/14\',
        type: \'download\', value: 1643}, {date: \'2018/8/14\', type: \'register\', value: 4788}, {date: \'2018/8/14\', type: \'bill\',
        value: 280}, {date: \'2018/8/15\', type: \'download\', value: 445}, {date: \'2018/8/15\', type: \'register\', value: 4319}, {
        date: \'2018/8/15\', type: \'bill\', value: 176}];
    var chart = new G2.Chart({
        container: \'appearance\',
        forceFit: true,
        height: 500,
        padding: [100, 20, 30, 45] // 上右下左
    });
    chart.source(data);
    chart.tooltip({// 提示信息
        follow: true,
        crosshairs: \'y\',
    });
    chart.source(data, {
        \'date\': {// 显示的条数
            tickCount: 15
        }
    });
    chart.axis(\'date\', {// 坐标轴
        label: {
            textStyle: {
                fill: \'#aaaaaa\'
            }
        }
    });
    chart.axis(\'value\', {
        label: {
            textStyle: {
                fill: \'#aaaaaa\'
            },
            formatter: function formatter(text) {// 格式化参数值
                return text.replace(/(\d)(?=(?:\d{3})+$)/g, \'$1,\');
            }
        }
    });
    chart.legend(false);// 图例禁用
    chart.line().position(\'date*value\').color(\'type\');
    chart.render();
</script>

（4）基础柱状图

<div id="appearance"></div>
<script>
    var data = [{year: \'1951 年\', sales: 38}, {year: \'1952 年\', sales: 52}, {year: \'1956 年\',
        sales: 61}, {year: \'1957 年\',  sales: 145}, {year: \'1958 年\', sales: 48}, {year: \'1959 年\',
        sales: 38}, {year: \'1960 年\', sales: 38}, {year: \'1962 年\', sales: 38}];
    var chart = new G2.Chart({
        container: \'appearance\',
        forceFit: true,
        height: window.innerHeight
    });
    chart.source(data);
    chart.scale(\'sales\', {
        tickInterval: 20  // 用于指定坐标轴各个标度点的距离
    });
    chart.interval().position(\'year*sales\');
    chart.render();
</script>