在 在vue中使用antV-G2展示柱状图 中介绍了如何在vue中使用antV-G2展示柱状图，但是相关的图表参数和chart对象的方法，没有做深度深度介绍。本文针对antV-G2中柱状图之组件参数设置详解做了深度介绍。如果只是想简单的在vue中使用antV-G2的柱状图，则可以通过以下链接去学习：在vue中使用antV-G2展示柱状图_情天可视化的博客-CSDN博客

介绍

G2 是一套基于图形语法理论的可视化底层引擎，以数据驱动，提供图形语法与交互语法，具有高度的易用性和扩展性。使用 G2，你可以无需关注图表各种繁琐的实现细节，一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。

一、安装 antV-G2

通过 npm 安装

npm install @antv/g2 --save

成功安装完成之后，即可使用 import 或 require 进行引用。

import { Chart } from '@antv/g2';

浏览器引入

既可以通过将脚本下载到本地也可以直接引入在线资源：

<!-- 引入在线资源，选择你需要的 g2 版本以替换 version 变量 -->
<script src="https://gw.alipayobjects.com/os/lib/antv/g2/{{version}}/dist/g2.min.js"></script>
<!-- 引入本地脚本 -->
<script src="./g2.js"></script>

使用 script 标签引入 G2 资源时，挂载在 window 上的变量名为 G2，所以在上述实例中需要加上 G2 的前缀。如下：

const chart = new G2.Chart({
  /* your options */
});

二、在vue中使用antV-G2展示柱状图

创建 div 图表容器

//html布局
<template>
<div class="container" id="container"></div>
</template>

//对应的CSS样式
<style lang="scss">
body{ background: #222;}
.container{width:800px; height: 800px; margin: 100px auto;}
</style>

在data(){}中准备好将要展示的图表数据

data(){
    return {
        chart:null,//图表对象
        showData:[//图表中将要显示的数据
                    {
                        "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
                    }
                ],
    }
},

创建chart对象,以及相关参数详解

//创建chart
createChart(){
    this.chart = new Chart({
        container: 'container',//chart容器id
        autoFit: false,//图表是否自适应容器宽高，默认为 false
        width: 800,//图标宽度
        height: 400,//图表高度
        padding: [40, 40, 40, 40],//图表内边距,依次为:上，右，下，左
        // defaultInteractions:"ellipsis-text",//配置图表默认交互，仅支持字符串形式。G2 默认支持的交互有 'tooltip', 'legend-filter', 'legend-active', 'continuous-filter', 'ellipsis-text'
        pixelRatio:window.devicePixelRatio,//设置设备像素比，默认取浏览器的值 window.devicePixelRatio
        renderer:"canvas",//指定渲染引擎，默认使用 canvas。可选：'canvas' | 'svg'
        theme:"dark",//配置主题，目前 g2 默认有 dark 主题模式，如需要自定义配置，可以先通过 registerTheme 注册主题，再设置主题 key。
        visible:true,//chart 是否可见，默认为 true，设置为 false 则会隐藏。
    });
},

chart对象常用方法

名称

功能

参数

返回值

chart.forceFit()

自动根据容器大小 resize 画布无void
chart.changeSize(width, height)改变图表大小，同时重新渲染。

width：图表宽度

height：图表高度

Chart对象
chart.changeVisible(visible)显示或隐藏图表。visible：是否可见，true 表示显示，false 表示隐藏Chart对象
chart.animate(status)开启或者关闭动画。示例：具体见下面 设置动画参数详解status 动画状态，true 表示开始，false 表示关闭View对象
chart.data(data)

绑定数据。示例：

chart.data([
  { city: '杭州', sale: 100 },
  { city: '上海', sale: 110 },
]);

json数组View对象
chart.changeData(data)更新数据，自动重新渲染，不需要手动调用 render() 方法。json数组void
chart.getData()获得数据无json数组
chart.filter(field, condition)

设置数据筛选规则。示例：

// 删除 'city' 字段对应的筛选规则。
view.filter('city', (value: any, datum: Datum) => value !== '杭州');
// condition 为空，则表示删除过滤条件
view.filter('city', null);
view.filterData()
将 data 数据进行过滤。

field：过滤字段

condition：筛选规则

View对象
chart.scale(field,option)设置度量字段。示例：具体见下面 设置坐标轴参数详解

field：度量字段

Option：设置参数

View对象

chart.axis(field,option)

配置某个字段对应的坐标轴样式。示例：具体见下面 设置坐标轴参数详解

field：字段名称

Option：设置参数

View对象

chart.legend(field,option)

配置图例样式。示例：具体见下面 设置图例参数详解

field：字段名称

Option：设置参数

View对象

chart.tooltip(option)

配置 Tooltip（提示信息）组件。示例：具体见下面 设置提示框信息样式参数详解Option：设置参数View对象

chart.showTooltip(point)

显示 point 坐标点（画布坐标点）对应的 tooltip。

chart.hideTooltip()

隐藏 tooltip。

设置展示数据 showData

//设置数据
setChartData(){
    this.chart.data(this.showData);
},

设置坐标轴参数详解

//设置坐标轴
setChartAxis(){
    this.chart.scale("sales", {//Y轴 字段是 度量
        nice: false,//是否自动调整 min、max 。默认为false
        min: 10,//度量最小值，
        max: 200,//度量最大值，如果不需要指定最大值可以设置max=null，或者不要填该参数
    });
    //设置Y轴
    //this.chart.axis("sales",false);//不需要Y轴，可以设置false
    this.chart.axis("sales", {//Y轴样式
                grid:{
                    line:{
                    type:"line",
                    style:{
                        // fill:'#ff0000',
                        stroke:"#fff",
                        opacity:0.3,
                        lineDash:[1,3],//虚线
                    }
                    },
                },
                label:{
                    style:{
                    fill:"#fff",//文字颜色
                    fontFamily: "Microsoft YaHei",//文字字体
                    fontWeight: 400,//文字粗细
                    fontSize: 12,//文字大小
                    }
                },
                line:{
                    style:{
                    stroke:"#fff",//坐标轴颜色
                    }
                },
                tickLine: {
                    style:{
                    stroke:"#fff",//刻度线颜色
                    }
                },
                subTickLine:{
                    style:{
                    stroke:"#fff",//小刻度颜色
                    }
                }
            });

    //设置X轴
    //this.chart.axis("year",false);//不需要Y轴，可以设置false
    this.chart.axis("year", {//X轴样式

        label: {
            formatter: (val) => {
            return val;
            // return +val * 100 + '%';
            },
            style:{
            fill:"#fff",//文字颜色
            fontFamily: "Microsoft YaHei",//文字字体
            fontWeight: 400,//文字粗细
            fontSize: 12,//文字大小
            }
        },
        line:{
            style:{
            stroke:"#fff",//坐标轴颜色
            }
        },
        tickLine: {
            style:{
            stroke:"#fff",//刻度线颜色
            }
        },
        subTickLine:{
            style:{
            stroke:"#fff",//小刻度颜色
            }
        }
    });
},

设置提示框信息样式参数详解

//设置提示框信息样式
setChartTooltip(){
    this.chart.tooltip({
        showMarkers: false,
        domStyles:{
            'g2-tooltip':{
                background:"rgba(00, 00, 00,0.5)",//背景RGBA形式的值
                color:"#ffffff",//文字颜色
                boxShadow:"0px 0px 5px #000000",//阴影大小 阴影颜色 
            },
        },
        customItems: (items) => {//自定义显示的内容格式
            // console.log("items")
            // console.log(items)
            items[0].name="sales";
            return items;
        },
    });
},

设置图表样式

this.chart.interaction('element-active');//设置图表样式

设置图表柱子相关属性【柱子样式】

//设置图表柱子相关属性【柱子样式】
setChartStyle(){
    var line=this.chart.interval({
    background: {
        style: {
        radius: 0,//圆角
        fill:"#2681ff",//柱背景色
        },
    },
    });
    
    line.state({
    // selected:{
    //   style:{
    //     stroke:'red',
    //   }
    // }
    active:{
        style:{
        stroke:"#2681ff",//鼠标经过 边框颜色
        }
    }
    })
    .position("year"+"*"+"sales")//X轴 * Y轴
    //.color("sales", (val) => {//X轴 上柱颜色
     //   // if (val === '10-30分' || val === '30+分') {
    //    // return '#ff4d4f';
    //    // }
    //    return "#2681ff";//柱填充色
    //});
    .color("year", ["#2681ff","#00ff44","#2611ff","#26aa99"]);//参数1：year字段为X轴，参数2：颜色数组，柱体的颜色会循环的从颜色数组中取出来

    //柱子上是否显示值标签
    //line.label(false);//不需要显示，可以设置false
    line.label("sales", {//标签值
            content: (originData) => {
                return originData["sales"]+"万";//设置值标签最终显示的内容
            },
            style: {
                fill: "#fff",
                fontFamily: "Microsoft YaHei",
                fontWeight: 400,
                fontSize: 16,
                // fill: "#ffffff",
            },
            position:"top",//显示位置
        })
},

设置图例参数详解

//设置图例
setChartLegend(){

    // this.chart.legend(false);//设置为false，表示不显示图例

    this.chart.legend("sales", {
        position: "bottom",//图例位置："top" | "top-left" | "top-right" | "right" | "right-top" | "right-bottom" | "left" | "left-top" | "left-bottom" | "bottom" | "bottom-left" | "bottom-right"
        itemName:{
            style:{
                fill: "#fff",
                fontFamily: "Microsoft YaHei",
                fontWeight: 400,
                fontSize: 16,
            }
        },
        pageNavigator: {
            marker: {//分页器指示箭头配置项
                style: {
                    // 非激活，不可点击态时的填充色设置
                    inactiveFill: "#fff",//分页器：箭头颜色
                    inactiveOpacity: 1,//分页器：箭头透明度
                    // 默认填充色设置
                    fill: "#fff",//分页器：颜色
                    opacity: 1,//分页器：透明度
                    size: 12,//分页器：大小
                },
            },
            text: {//分页器指示文本配置项
                style: {
                    fill: "#fff",//分页器：文本颜色
                    fontSize: 12,//分页器：文本大小
                },
            },
        },
    });
},

设置动画参数详解

//设置动画
setChartAnimate(){
    
    // this.chart.animate(false);//设置为false，表示不使用动画效果

    this.chart.animate({
        // 初始化时的入场动画
        appear: {
            animation: 'fade-in', // 动画名称:'fade-in'|'fan-in'|'scale-inx'|'scale-iny'|'path-in'|'zoom-in'|'clip-in'
            easing: 'easeQuadIn', // 动画缓动效果
            delay: 100, // 动画延迟执行时间
            duration: 600 // 动画执行时间
        },
        // 更新时的出现动画
        enter: {
            animation: 'fade-in', //动画名称:'fade-in'|'fan-in'|'scale-inx'|'scale-iny'|'path-in'|'zoom-in'|'clip-in'
            easing: 'easeQuadIn', // 动画缓动效果
            delay: 100, // 动画延迟执行时间
            duration: 600 // 动画执行时间
        },
        // 更新时的动画
        leave: {
            animation: 'path-out', //动画名称:'fade-out'|'path-out'|'zoom-out'|'lineWidth-out'
            easing: 'easeQuadIn', // 动画缓动效果
            delay: 100, // 动画延迟执行时间
            duration: 600 // 动画执行时间
        },
        // 更新时的变化动画
        update: {
            animation: 'fade-in', //动画名称:'fade-in'|'fan-in'
            easing: 'easeQuadIn', // 动画缓动效果
            delay: 100, // 动画延迟执行时间
            duration: 600 // 动画执行时间
        },
    })
},

渲染图表

//渲染图表
this.chart.render();

三、效果预览

 四、完整vue代码文件

<template>
<div class="container" id="container"></div>
</template>
<script>
import { Chart } from '@antv/g2';

//柱状图
export default {
  components: {},
    name:"test",
    data(){
        return {
            chart:null,//图表对象
            showData:[//图表中将要显示的数据
                        {
                            "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
                        }
                    ],
        }
    },
    created(){
        
    },
    mounted(){
        this.init();
    },
    methods:{
        // 初始化
        init(){
            
            this.createChart();//创建chart
            this.setChartData();//设置字段和数据

            this.setChartAxis();//设置坐标轴和度量
            this.setChartTooltip();//设置提示信息

            this.chart.interaction('element-active');//设置图表样式

            this.setChartStyle();//设置图表柱子相关属性
            // this.chart.legend(false);//设置为false，表示不显示图例
            this.setChartLegend();//设置图例
            this.setChartAnimate();//设置动画
            
            

            //渲染图表
            this.chart.render();
            
        },
        //创建chart
        createChart(){
            this.chart = new Chart({
                container: 'container',//chart容器id
                autoFit: false,//图表是否自适应容器宽高，默认为 false
                width: 800,//图标宽度
                height: 400,//图表高度
                padding: [40, 40, 80, 40],//图表内边距,依次为:上，右，下，左
                // defaultInteractions:"ellipsis-text",//配置图表默认交互，仅支持字符串形式。G2 默认支持的交互有 'tooltip', 'legend-filter', 'legend-active', 'continuous-filter', 'ellipsis-text'
                pixelRatio:window.devicePixelRatio,//设置设备像素比，默认取浏览器的值 window.devicePixelRatio
                renderer:"canvas",//指定渲染引擎，默认使用 canvas。可选：'canvas' | 'svg'
                theme:"dark",//配置主题，目前 g2 默认有 dark 主题模式，如需要自定义配置，可以先通过 registerTheme 注册主题，再设置主题 key。
                visible:true,//chart 是否可见，默认为 true，设置为 false 则会隐藏。
            });
        },
        //设置数据
        setChartData(){
            this.chart.data(this.showData);
        },
        //设置坐标轴
        setChartAxis(){
            this.chart.scale("sales", {//Y轴 字段是 度量
                nice: false,//是否自动调整 min、max 。默认为false
                min: 10,//度量最小值，
                max: 200,//度量最大值，如果不需要指定最大值可以设置max=null，或者不要填该参数
            });
            //设置Y轴
            //this.chart.axis("sales",false);//不需要Y轴，可以设置false
            this.chart.axis("sales", {//Y轴样式
                        grid:{
                            line:{
                            type:"line",
                            style:{
                                // fill:'#ff0000',
                                stroke:"#fff",//网格线颜色
                                opacity:0.3,//网格线透明度
                                lineDash:[1,3],//虚线
                            }
                            },
                        },
                        label:{
                            style:{
                            fill:"#fff",///Y轴文字颜色
                            fontFamily: "Microsoft YaHei",///Y轴文字字体
                            fontWeight: 400,///Y轴文字粗细
                            fontSize: 12,///Y轴文字大小
                            }
                        },
                        line:{
                            style:{
                            stroke:"#fff",//坐标轴颜色
                            }
                        },
                        tickLine: {
                            style:{
                            stroke:"#fff",//刻度线颜色
                            }
                        },
                        subTickLine:{
                            style:{
                            stroke:"#fff",//小刻度颜色
                            }
                        }
                    });

            //设置X轴
            //this.chart.axis("year",false);//不需要Y轴，可以设置false
            this.chart.axis("year", {//X轴样式

                label: {
                    formatter: (val) => {
                    return val;
                    // return +val * 100 + '%';
                    },
                    style:{
                    fill:"#fff",//文字颜色
                    fontFamily: "Microsoft YaHei",//文字字体
                    fontWeight: 400,//文字粗细
                    fontSize: 12,//文字大小
                    }
                },
                line:{
                    style:{
                    stroke:"#fff",//坐标轴颜色
                    }
                },
                tickLine: {
                    style:{
                    stroke:"#fff",//刻度线颜色
                    }
                },
                subTickLine:{
                    style:{
                    stroke:"#fff",//小刻度颜色
                    }
                }
            });
        },
        //设置提示框信息样式
        setChartTooltip(){
            this.chart.tooltip({
                showMarkers: false,
                domStyles:{
                    'g2-tooltip':{
                        background:"rgba(00, 00, 00,0.5)",//背景RGBA形式的值
                        color:"#ffffff",//文字颜色
                        boxShadow:"0px 0px 5px #000000",//阴影大小 阴影颜色 
                    },
                },
                customItems: (items) => {//自定义显示的内容格式
                    // console.log("items")
                    // console.log(items)
                    items[0].name="sales";
                    return items;
                },
            });
        },
        //设置图表柱子相关属性【柱子样式】
        setChartStyle(){
            var line=this.chart.interval({
            background: {
                style: {
                radius: 0,//圆角
                fill:"#2681ff",//柱背景色
                },
            },
            });
            
            line.state({
            // selected:{
            //   style:{
            //     stroke:'red',
            //   }
            // }
            active:{
                style:{
                stroke:"#2681ff",//鼠标经过 边框颜色
                }
            }
            })
            .position("year"+"*"+"sales")//X轴 * Y轴
            // .color("year", (val) => {//X轴 上柱颜色
            //     // if (val === '10-30分' || val === '30+分') {
            //     // return '#ff4d4f';
            //     // }
            //     return "#2681ff";//柱填充色
            // });
            .color("year", ["#2681ff","#00ff44","#2611ff","#26aa99"]);//参数1：year字段为X轴，参数2：颜色数组，柱体的颜色会循环的从颜色数组中取出来

            //柱子上是否显示值标签
            //line.label(false);//不需要显示，可以设置false
            line.label("sales", {//标签值
                    content: (originData) => {
                        return originData["sales"]+"万";//设置值标签最终显示的内容
                    },
                    style: {
                        fill: "#fff",
                        fontFamily: "Microsoft YaHei",
                        fontWeight: 400,
                        fontSize: 16,
                        // fill: "#ffffff",
                    },
                    position:"top",//显示位置
                })
        },
        //设置图例
        setChartLegend(){

            // this.chart.legend(false);//设置为false，表示不显示图例

            this.chart.legend("sales", {
                position: "bottom",//图例位置："top" | "top-left" | "top-right" | "right" | "right-top" | "right-bottom" | "left" | "left-top" | "left-bottom" | "bottom" | "bottom-left" | "bottom-right"
                itemName:{
                    style:{
                        fill: "#fff",
                        fontFamily: "Microsoft YaHei",
                        fontWeight: 400,
                        fontSize: 16,
                    }
                },
                pageNavigator: {
                    marker: {//分页器指示箭头配置项
                        style: {
                            // 非激活，不可点击态时的填充色设置
                            inactiveFill: "#fff",//分页器：箭头颜色
                            inactiveOpacity: 1,//分页器：箭头透明度
                            // 默认填充色设置
                            fill: "#fff",//分页器：颜色
                            opacity: 1,//分页器：透明度
                            size: 12,//分页器：大小
                        },
                    },
                    text: {//分页器指示文本配置项
                        style: {
                            fill: "#fff",//分页器：文本颜色
                            fontSize: 12,//分页器：文本大小
                        },
                    },
                },
            });
        },
        //设置动画
        setChartAnimate(){
            
            // this.chart.animate(false);//设置为false，表示不使用动画效果

            this.chart.animate({
                // 初始化时的入场动画
                appear: {
                    animation: 'fade-in', // 动画名称:'fade-in'|'fan-in'|'scale-inx'|'scale-iny'|'path-in'|'zoom-in'|'clip-in'
                    easing: 'easeQuadIn', // 动画缓动效果
                    delay: 100, // 动画延迟执行时间
                    duration: 600 // 动画执行时间
                },
                // 更新时的出现动画
                enter: {
                    animation: 'fade-in', //动画名称:'fade-in'|'fan-in'|'scale-inx'|'scale-iny'|'path-in'|'zoom-in'|'clip-in'
                    easing: 'easeQuadIn', // 动画缓动效果
                    delay: 100, // 动画延迟执行时间
                    duration: 600 // 动画执行时间
                },
                // 更新时的动画
                leave: {
                    animation: 'path-out', //动画名称:'fade-out'|'path-out'|'zoom-out'|'lineWidth-out'
                    easing: 'easeQuadIn', // 动画缓动效果
                    delay: 100, // 动画延迟执行时间
                    duration: 600 // 动画执行时间
                },
                // 更新时的变化动画
                update: {
                    animation: 'fade-in', //动画名称:'fade-in'|'fan-in'
                    easing: 'easeQuadIn', // 动画缓动效果
                    delay: 100, // 动画延迟执行时间
                    duration: 600 // 动画执行时间
                },
            })
        },
    },
}
</script>

<style lang="scss">
body{ background: #222;}
.container{width:800px; height: 800px; margin: 100px auto; background: cadetblue;}
</style>

数据可视化工具推荐

基于VUE实现拖拽制作数据可视化大屏

基于SpringBoot+Vue3+mysql开发，支持多种数据源：excel、api接口、mysql、oracle、SqlServer等多种类型的数据源，支持数据模型转换，图形化编辑界面：拖拽即可完成大屏制作和数据配置，无需编程就能轻松搭建数据大屏。私有化部署：使用私有化部署的方式，保障贵公司的数据安全，数据大屏支持加密发布

界面展示

  1. 大屏编辑界面 

    (https://www.51qingtian.com)
  2. 可视化大屏 

    ​

    (https://www.51qingtian.com)
  3. 数据模型 

    ​

    (https://www.51qingtian.com)
  4. 数据源 

    ​

    (https://www.51qingtian.com)

模板展示

  1. 健身数据报告

​

(https://www.51qingtian.com)

  1. 智慧园区数据统计中心

​

(https://www.51qingtian.com)

  1. 交通安全主题

​

(https://www.51qingtian.com)

  1. 财务数据大屏

​

(https://www.51qingtian.com)

  1. 智慧医疗大数据可视化大屏

​

(https://www.51qingtian.com)

官网

  1. 情天数据可视化 www.51qingtian.com
# vue.js # javascript # 前端
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支：2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区