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

2023-11-05

介绍

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',
        autoFit: false,
        width: 800,
        height: 400,
        padding: [40, 40, 40, 40],
    });
},

设置展示数据 showData

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

设置坐标轴

//设置坐标轴
setChartAxis(){
    this.chart.scale("sales", {//Y轴 字段是 度量
        nice: true,
    });
    //设置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";//柱填充色
    });

    //柱子上是否显示值标签
    //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.legend(false);//设置为false，表示不显示图例

设置动画

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

渲染图表

//渲染图表
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 {
            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.chart.animate(false);//设置为false，表示不使用动画效果

            //渲染图表
            this.chart.render();
        },
        //创建chart
        createChart(){
            this.chart = new Chart({
                container: 'container',
                autoFit: false,
                width: 800,
                height: 400,
                padding: [40, 40, 40, 40],
            });
        },
        //设置数据
        setChartData(){
            this.chart.data(this.showData);
        },
        //设置坐标轴
        setChartAxis(){
            this.chart.scale("sales", {//Y轴 字段是 度量
                nice: true,
            });
            //设置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;
                },
            });
        },
        //设置图表柱子相关属性【柱子样式】
        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";//柱填充色
            });

            //柱子上是否显示值标签
            //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",//显示位置
                })
        },
        //设置图例
    },
}
</script>

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

数据可视化工具推荐

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

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

界面展示

大屏编辑界面 (https://www.51qingtian.com)
可视化大屏 (https://www.51qingtian.com)
数据模型 (https://www.51qingtian.com)
数据源 (https://www.51qingtian.com)

模板展示

健身数据报告

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

智慧园区数据统计中心

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

交通安全主题

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

财务数据大屏

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

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

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

官网

情天数据可视化 www.51qingtian.com

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)