在vue中使用antV-G2展示分组条形图

最新推荐文章于 2024-02-28 14:32:14 发布
最新推荐文章于 2024-02-28 14:32:14 发布
阅读量769 收藏 1
点赞数
分类专栏： antV-G2 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hu5201714/article/details/128007219
版权

  介绍

在vue中使用antV-G2展示分组条形图

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": "1956 年",
                    "sales": 61,
                    "group": "分组1"
                },
                {
                    "year": "1957 年",
                    "sales": 145,
                    "group": "分组1"
                },
                {
                    "year": "1958 年",
                    "sales": 48,
                    "group": "分组1"
                },
                {
                    "year": "1959 年",
                    "sales": 38,
                    "group": "分组1"
                },
                {
                    "year": "1956 年",
                    "sales": 41,
                    "group": "分组2"
                },
                {
                    "year": "1957 年",
                    "sales": 45,
                    "group": "分组2"
                },
                {
                    "year": "1958 年",
                    "sales": 68,
                    "group": "分组2"
                },
                {
                    "year": "1959 年",
                    "sales": 48,
                    "group": "分组2"
                }
                ],
    }
},

创建chart

//创建chart
createChart(){
    this.chart = new Chart({
        container: 'container',//chart容器id
        autoFit: false,//图表是否自适应容器宽高，默认为 false
        width: 800,//图标宽度
        height: 400,//图表高度
        padding: [40, 80, 80, 140],//图表内边距,依次为:上，右，下，左
        // 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 则会隐藏。
    });
},

设置展示数据 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",///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",//小刻度颜色
            }
        }
    });
    
    //设置条形图
    this.chart.coordinate().transpose();
},

设置提示框信息样式

//设置提示框信息样式
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("year", (val) => {//X轴 上柱颜色
    //     // if (val === '10-30分' || val === '30+分') {
    //     // return '#ff4d4f';
    //     // }
    //     return "#2681ff";//柱填充色
    // });
    .color("group", ["#2681ff","#00ff44","#2611ff","#26aa99"])//参数1：year字段为X轴，参数2：颜色数组，柱体的颜色会循环的从颜色数组中取出来
    .adjust([
            {
            type: 'dodge',
            marginRatio: 0,
            },
        ]);
    //柱子上是否显示值标签
    //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:"right",//显示位置
        })
},

设置图例

//设置图例
setChartLegend(){

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

    this.chart.legend("group", {
        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": "1956 年",
                        "sales": 61,
                        "group": "分组1"
                    },
                    {
                        "year": "1957 年",
                        "sales": 145,
                        "group": "分组1"
                    },
                    {
                        "year": "1958 年",
                        "sales": 48,
                        "group": "分组1"
                    },
                    {
                        "year": "1959 年",
                        "sales": 38,
                        "group": "分组1"
                    },
                    {
                        "year": "1956 年",
                        "sales": 41,
                        "group": "分组2"
                    },
                    {
                        "year": "1957 年",
                        "sales": 45,
                        "group": "分组2"
                    },
                    {
                        "year": "1958 年",
                        "sales": 68,
                        "group": "分组2"
                    },
                    {
                        "year": "1959 年",
                        "sales": 48,
                        "group": "分组2"
                    }
                    ],
        }
    },
    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();
            //添加点击事件
            this.addClickEvent();
            
        },
        //创建chart
        createChart(){
            this.chart = new Chart({
                container: 'container',//chart容器id
                autoFit: false,//图表是否自适应容器宽高，默认为 false
                width: 800,//图标宽度
                height: 400,//图表高度
                padding: [20, 80, 60, 140],//图表内边距,依次为:上，右，下，左
                // 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",//小刻度颜色
                    }
                }
            });
            
            //设置条形图
            this.chart.coordinate().transpose();
        },
        //设置提示框信息样式
        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("group", ["#2681ff","#00ff44","#2611ff","#26aa99"])//参数1：year字段为X轴，参数2：颜色数组，柱体的颜色会循环的从颜色数组中取出来
            .adjust([
                    {
                    type: 'dodge',
                    marginRatio: 0,
                    },
                ]);
            //柱子上是否显示值标签
            //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:"right",//显示位置
                })
        },
        //设置图例
        setChartLegend(){

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

            this.chart.legend("group", {
                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 // 动画执行时间
                },
            })
        },
        //添加点击事件
        addClickEvent(){
            this.chart.on('element:click', (ev) => {
                var data=ev.data.data;
                console.log(data);
                alert(JSON.stringify(data));
            });
        }
    },
}
</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
情天可视化
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Axure 常用的数据图表组件库（柱形图+折线图+饼图+雷达图+仪表盘+地图图表+其他图表）
05-10
Axure 常用数据图表组件库
antV g2在vue项目中的运用
qq_42183923的博客
11-22 1448
antV g2 的简单运用 G2 是一套基于图形语法理论的可视化底层引擎，以数据驱动，提供图形语法与交互语法，具有高度的易用性和扩展性。使用 G2，你可以无需关注图表各种繁琐的实现细节，一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。 1，安装 npm install @antv/g2 --save 成功安装完成之后，即可使用 import 或 require 进行引用。 import { Chart } from '@antv/g2'; 在绘图前我们需要为 G2 准备一个
vue项目中使用antvX6新手教程，附demo案例讲解（可拖拽流程图、网络拓扑图）
最新发布
wzy_PROTEIN的博客
02-28 4288
用户可以自己拖拽节点，节点之间可以随意连线，保存拓扑图数据后传给后端，然后在另一个页面拿到之前的数据进行渲染展示。
在vue中使用antV-G2展示柱状图之组件参数设置详解
黄俊的博客
10-28 5596
在vue中使用antV-G2展示柱状图_情天可视化的博客-CSDN博客G2 是一套基于图形语法理论的可视化底层引擎，以数据驱动，提供图形语法与交互语法，具有高度的易用性和扩展性。使用 G2，你可以无需关注图表各种繁琐的实现细节，一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。
VUE学习第二天
weixin_45281192的博客
10-10 138
基本指令 v-bind指令 常用于动态绑定HTML元素的属性，例如id、class、href、src等属性。改变任一方数据后都会实时更新 其中可以分为单个语法式和对象语法式还有数组语法格式”绑定类名” v-if条件指令 指令主要职责就是当表达式值改动时，相应的将某些行为应用到DOM上，以v-if为例v-if指条件性渲染，为true时渲染D OM，否则不进行渲染： v-show渲染指令 v-...
vue 数组按日期分组显示数据
CCR的笔记本
04-10 1976
转载： https://www.cnblogs.com/wangrong-0823/p/12788544.html?ivk_sa=1024320u 做页面之前我有搜索了别人做的页面，看了微信支付账单的记录，我想我也可以通过按不同的时间去显示不同数据，查看了几个链接，最属意的链接放上https://www.cnblogs.com/fozero/p/11254572.html。 因为这种数据一般是从后台拿来的，所以前端就不需要去处理，但是如果后台传进来的不是以时间分割，而是直接是好几十组的数组对象，比如： th
实用的Vue.js折线图表插件
10-14
单的折线图插件，基于vue.js插件实现的曲线折线图demo，代码简单，可以统计分析数据变化趋势。
在Vue中使用Antv G2
sanmi8276的博客
05-18 1381
1.安装依赖 可以通过 npm 添加依赖 npm i @antv/[email protected] @antv/[email protected] vue-g2 --save 2.引入依赖 在 main.js 中写入以下内容： import Vue from 'vue' import 'vue-g2' import App from './App.vue' Vue.config.productionTip = false new Vue({ render: h => h(App) }).$moun
Vue使用antV G2简单实例
12-01 6050
工作中需要制作一个看板，选型选用antV G2进行开发。 由于项目前端是使用Vue，于是研究了antVG2在Vue中的使用。 1.安装antv/g2 在WebStrom下面Terminal中输入 npm install @antv/g2 --save 安装完成后为如下状态 2.创建一个Vue文件，引入antV/g2 import G2 from '@antv/g2'; 3.创建一个函数，函数内部创建一个Chart对象，并在挂载时调用（这里我创建了两个函数，创建Chart对象所需的参数
antv G2在Vue中基本使用
Noctis99的博客
02-08 416
v
vue实现消息列表按列表中某个值分组并展示
qq_37254846的博客
03-21 2736
由于聊天消息是按照日期分组展示的，所以对于接收到的消息列表在展示之前必须先按照分组处理 处理函数如下： 使用forEach对messagelist遍历如果当前日期没有出现就创建新的分组，并把当前值设为分组名，该条消息压入分组，若已存在，直接压组 // 给消息列表分组 groupMessage() { const list = {} // 按照日期对消息列表分组 this.messagelist.forEach((e, i, arr) => {
Vue中v-for的数据分组实例
08-27
下面小编就为大家分享一篇Vue中v-for的数据分组实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue组件封装echart折线图
08-30
直接定义vue数据和承载的DIV,即可实现复用。使用Vue组件封装Echart柱状图，直接引用组件js，并且在需要展示的地方，进行Vue数据传值，支持多坐标轴。本案例非Webpack打包，直接引用JS即可。适用于部分页面使用Vue功能，或者想尝试Vue功能的同学。该组件使用方法比较简单，也可以自行修改样式扩展功能，但是需要自行查看echart的api配置文档。
统计折线图-柱状图-饼图纯html-charts插件
03-31
统计折线图-柱状图-饼图纯html-charts插件 第三方引入charts图表库，原生html、js、cs，在线生成数据图表 纯js方法组装数据，设置到图表模型。生成图表 可以在折线图-柱状图之间转换 可以将生成好的图表下载到本地 可以将此模块放置到Vue的项目里，可以兼容 在table表格内填写数据。刷新后自动生成图表 table表格可以增加行列，及增加tr、td标签
vue+chart.js 整合 绘制折线图
11-30
vue与chart整合，绘制折线图，提供查询结果覆盖原有页面，解决重画问题
vue多级复杂列表展开/折叠及全选/分组全选实现
10-17
主要介绍了vue多级复杂列表展开/折叠及全选/分组全选实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
在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 G2,以饼图为例讲解
01-18
npm install @antv/g2 –save template内容： <div id=pieChart></div> js部分： ​//引入G2组件 import G2 from @antv/g2; ​ export default { name:, //数据部分 data(){ return{ sourceData: [],//...
在Vue中使用antv的示例代码
10-15
主要介绍了在Vue中使用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进行数据可视化了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值