在vue中使用antV-G2展示折线图之组件参数设置详解

已于 2022-11-24 00:31:48 修改
阅读量4.6k 收藏 13
点赞数 6
分类专栏： antV-G2 文章标签： javascript 前端 vue.js
于 2022-11-11 17:31:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hu5201714/article/details/127810081
版权

 在 在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,
        showCrosshairs: true,
        crosshairs:{
            line:{
                style:{
                    stroke:"#fff",//辅助线颜色
                    lineWidth:1,//辅助线粗细
                },
            }
        },
        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.line();
    line.style({ 
        lineWidth:2,
    })
    .state({
        // selected:{
        //   style:{
        //     stroke:'red',
        //   }
        // }
        active:{
            style:{
            stroke:"#2681ff",//鼠标经过 折线颜色
            }
        }
    })
    .position("year"+"*"+"sales")//X轴 * Y轴
    .color("#2681ff")//折线颜色
    .shape("circle");//曲率

    //折线上是否显示值标签
    //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",//显示位置
        })
    //显示圆点--折线上的圆点
    this.chart
    .point()//获得圆点对象
    .size(4)//圆点大小
    .style({ 
        // strokeOpacity:1,
        fill: "#2681ff",//圆点颜色
        stroke:"#fff",//圆点边框颜色
        
        })
    .state({
        // selected:{
        //   style:{
        //     stroke:'red',
        //   }
        // }
        active:{
        style:{
            fill: "#3681ff",//鼠标经过 圆点颜色
            stroke:"#ff00ff",//鼠标经过 圆点边框颜色
        }
        }
    })
    .position("year"+"*"+"sales")
    .color("#2681ff")
    .shape('circle');
},

设置动画参数详解

//设置动画
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.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,
                showCrosshairs: true,
                crosshairs:{
                    line:{
                        style:{
                            stroke:"#fff",//辅助线颜色
                            lineWidth:1,//辅助线粗细
                        },
                    }
                },
                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.line();
            line.style({ 
                lineWidth:2,
            })
            .state({
                // selected:{
                //   style:{
                //     stroke:'red',
                //   }
                // }
                active:{
                    style:{
                    stroke:"#2681ff",//鼠标经过 折线颜色
                    }
                }
            })
            .position("year"+"*"+"sales")//X轴 * Y轴
            .color("#2681ff")//折线颜色
            .shape("circle");//曲率

            //折线上是否显示值标签
            //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",//显示位置
                })
            //显示圆点--折线上的圆点
            this.chart
            .point()//获得圆点对象
            .size(4)//圆点大小
            .style({ 
                // strokeOpacity:1,
                fill: "#2681ff",//圆点颜色
                stroke:"#fff",//圆点边框颜色
                
                })
            .state({
                // selected:{
                //   style:{
                //     stroke:'red',
                //   }
                // }
                active:{
                style:{
                    fill: "#3681ff",//鼠标经过 圆点颜色
                    stroke:"#ff00ff",//鼠标经过 圆点边框颜色
                }
                }
            })
            .position("year"+"*"+"sales")
            .color("#2681ff")
            .shape('circle');
        },
        //设置动画
        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
情天可视化
关注
  • 6
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Axure 常用的数据图表组件库（柱形图+折线图+饼图+雷达图+仪表盘+地图图表+其他图表）
05-10
Axure 常用数据图表组件库
AntV G2 折线图
忘川
01-05 2210
import { Chart } from '@antv/g2'; const data = [ { type: '1岁', value: 8400 }, { type: '2岁', value: 5300 }, { type: '3岁', value: 6200 }, { type: '4岁', value: 4200 }, { type: '5岁', value: 11200 }, ]; const chart = new Chart({ container: 'conta.
如何用AntV G2打造炫酷的雷达图？
最新发布
ScriptEcho的博客
05-17 648
开发这段代码的过程巩固了我在 G2Plot 中创建交互式雷达图的技能。未来，可以进一步拓展和优化此功能：**添加动画：**通过添加动画效果增强雷达图的视觉吸引力。**支持自定义主题：**允许用户自定义图表主题，例如颜色、字体和布局。**集成其他数据源：**支持从数据库或 API 加载数据，提高图表的多功能性。更多组件：获取更多Echos本文由ScriptEcho平台提供技术支持传送门。
antV g2在vue项目中的运用
qq_42183923的博客
11-22 1486
antV g2 的简单运用 G2 是一套基于图形语法理论的可视化底层引擎，以数据驱动，提供图形语法与交互语法，具有高度的易用性和扩展性。使用 G2，你可以无需关注图表各种繁琐的实现细节，一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。 1，安装 npm install @antv/g2 --save 成功安装完成之后，即可使用 import 或 require 进行引用。 import { Chart } from '@antv/g2'; 在绘图前我们需要为 G2 准备一个
在vue中使用antV-G2展示柱状图之组件参数设置详解
黄俊的博客
10-28 6124
在vue中使用antV-G2展示柱状图_情天可视化的博客-CSDN博客G2 是一套基于图形语法理论的可视化底层引擎，以数据驱动，提供图形语法与交互语法，具有高度的易用性和扩展性。使用 G2，你可以无需关注图表各种繁琐的实现细节，一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。
AntV | 蚂蚁数据可视化 G2Plot 快速入门
热门推荐
weixin_46703850的博客
11-12 1万+
AntV | 蚂蚁数据可视化 G2Plot 快速入门 G2Plot 是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库，基于图形语法理论搭建而成。
Antv/G2 柱状图
且听风吟的博客
08-15 645
Antv/G2 柱状图
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
01-18
AntV-G2官网推荐使用Viser,本文介绍针对Vue版本的viser-vue简单使用。 安装viser-vue yarn add viser-vue yarn add @antv/data-set main.js中引入 import Viser from ‘viser-vue’ Vue.use(Viser) 定义d2demo....
在Vue中使用antv的示例代码
10-15
接下来，我们有两个方法可以在Vue组件中使用AntV/G2： ### 方法一：在Vue原型中使用 1. **在`mounted`生命周期钩子中初始化图表**：在Vue组件的`template`中定义一个用于渲染图表的DOM元素，然后在`mounted`钩子中...
在vue项目中引用Antv G2,以饼图为例讲解
01-18
我就废话不多说了，...​//引入G2组件 import G2 from @antv/g2; ​ export default { name:, //数据部分 data(){ return{ sourceData: [],//声明一个数组 chart: {}, //全局定义chart对象 id: Math.random()
Vue中使用better-scroll实现轮播图组件
10-15
better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。这篇文章主要介绍了Vue中使用better-scroll实现轮播图组件的实例代码,需要的朋友可以参考下
vue-g2：基于Vue和AntVG2的可视化组件库
02-05
vue-g2 |基于和的可视化组件库在vue-cli中使用1.安装依赖可以通过npm添加依赖npm i @antv/g2@3.5.15 @antv/data-set@0.9.6 vue-g2 --save或者通过yarn添加依赖yarn add @antv/g2@3.5.15 @antv/data-set@0.9.6 vue-g...
封装antv/g2折线图所遇到的问题及解决办法
知无涯
01-05 9191
使用antv/g2的心得 普罗米修斯数据结构转化成图表可用数据源 封装折线图渐变编辑图 自定义legend 自定义tooltip 第一次点击lenged筛选图例，发生位移 双倍tooltip的解决办法 x轴为时间戳时需要注意的几点 ...
Vue中Echarts使用---条形图
m0_48607837的博客
07-28 314
【代码】Vue中Echarts使用---条形图。
「AntV」使用 AntV G2Plot 实现一个复杂的带有四象限自定义标注的统计散点图
知无涯
05-24 4167
使用散点图分析学生成绩的稳定性，平均分，标准差，四象限。数据标注，g2plot 图表。
vue中用echarts写条形图
qq_62449212的博客
07-11 1209
vue中用echarts实现条形图
使用@antv/g2plot实现文字权重分布划分图
Hhjian524的博客
10-30 213
使用@antv/g2plot实现文字权重分布划分图
「AntV」基于 AntV G2Plot 来实现一个 堆叠柱状图 加 折线图 的多图层案例
知无涯
06-19 3792
<template> <div> <div id="container" style="height: 500px; width: 800px"></div> </div> </template> <script> import { Mix } from '@antv/g2plot' export default { data() { return {} }, methods: {},
AntV可视化图表G2-柱状图
weixin_43279985的博客
08-17 2746
antV可视化柱状图
vue2使用ANTV G2
01-24
在Vue2中使用AntV G2，你可以按照以下步骤进行操作： 1. 安装AntV G2依赖： ```shell npm install @antv/g2 ``` 2. 在Vue组件中引入G2： ```javascript import G2 from '@antv/g2'; ``` 3. 在Vue组件的`mounted`生命周期钩子中创建G2图表： ```javascript mounted() { const chart = new G2.Chart({ container: 'chart-container', // 图表容器的id width: 600, // 图表宽度 height: 400, // 图表高度 // 其他配置项 }); // 绘制图表 chart.render(); } ``` 4. 在Vue组件的模板中添加图表容器： ```html <template> <div id="chart-container"></div> </template> ``` 这样就可以在Vue2中使用AntV G2进行数据可视化了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值