在vue中怎么封装G2图表

本篇内容介绍了“在Vue中怎么封装G2图表”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

vue封装G2图表

<template>    <div id="id"></div></template>

<script>import G2 from '@antv/g2'import { DataSet } from '@antv/data-set'export default {    name: 'pie',    data () {        return {            chart: null        };    },    props:{        gtwopiedata:{            type: Array        },        // gtwopiecolor:{        //     type: Array        // },    },    methods:{        g2pie(){            if(this.chart){     // 如果存在的话就删除图表再重新生成                this.chart.destroy()            }            var startAngle = - Math.PI / 2 - Math.PI / 4;            var data = this.gtwopiedata.data;            var ds = new DataSet();            var dv = ds.createView().source(data);            dv.transfORM({                type: 'percent',                field: 'value',                dimension: 'type',                as: 'percent'            });            this.chart = new G2.Chart({                container: 'id',                forceFit: true,                height: this.gtwopiedata.height,                padding: 'auto'            });            this.chart.source(dv);            this.chart.legend(false);            this.chart.coord('theta', {                radius: 0.75,                innerRadius: 0.5,                startAngle: startAngle,                endAngle: startAngle + Math.PI * 2            });            this.chart.intervalStack().position('value').color('type', this.gtwopiedata.color).opacity(1).label('percent', {                offset: -20,                textStyle: {                    fill: 'white',                    fontSize: 12,                    shadowBlur: 2,                    shadowColor: 'rgba(0, 0, 0, .45)'                },                formatter: function formatter(val) {                    return parseInt(val * 100) + '%';                }            });            this.chart.guide().html({                position: ['50%', '50%'],                html: '<div class="g2-guide-html"><p class="title">'+this.gtwopiedata.title+'</p></div>'            });            this.chart.render();            //draw label            var OFFSET = 20;            var APPEND_OFFSET = 50;            var LINEHEIGHT = 60;            var coord = this.chart.get('coord'); // 获取坐标系对象            var center = coord.center; // 极坐标圆心坐标            var r = coord.radius; // 极坐标半径            var canvas = this.chart.get('canvas');            var canvasWidth = this.chart.get('width');            var canvasHeight = this.chart.get('height');            var labelGroup = canvas.addGroup();            var labels = [];            // addPieLabel(this.chart);            var halves = [[], []];            var data = dv.rows;            var angle = startAngle;                    for (var i = 0; i < data.length; i++) {                var percent = data[i].percent;                var targetAngle = angle + Math.PI * 2 * percent;                var middleAngle = angle + (targetAngle - angle) / 2;                angle = targetAngle;                var edgePoint = this.getEndPoint(center, middleAngle, r);                var routerPoint = this.getEndPoint(center, middleAngle, r + OFFSET);                //label                var label = {                    _anchor: edgePoint,                    _router: routerPoint,                    _data: data[i],                    x: routerPoint.x,                    y: routerPoint.y,                    r: r + OFFSET,                    fill: '#bfbfbf'                };                // 判断文本的方向                if (edgePoint.x < center.x) {                    label._side = 'left';                    halves[0].push(label);                } else {                    label._side = 'right';                    halves[1].push(label);                }            } // end of for                    var maxCountForOneSide = parseInt(canvasHeight / LINEHEIGHT, 10);            halves.forEach(function(half, index) {                // step 2: reduce labels                if (half.length > maxCountForOneSide) {                    half.sort(function(a, b) {                    return b._percent - a._percent;                    });                    half.splice(maxCountForOneSide, half.length - maxCountForOneSide);                }                            // step 3: distribute position (x and y)                half.sort(function(a, b) {                    return a.y - b.y;                });                // antiCollision(half, index);                var startY = center.y - r - OFFSET - LINEHEIGHT;                var overlapping = true;                var totalH = canvasHeight;                var i = void 0;                            var maxY = 0;                var minY = Number.MIN_VALUE;                var boxes = half.map(function(label) {                    var labelY = label.y;                    if (labelY > maxY) {                    maxY = labelY;                    }                    if (labelY < minY) {                    minY = labelY;                    }                    return {                    size: LINEHEIGHT,                    targets: [labelY - startY]                    };                });                if (maxY - startY > totalH) {                    totalH = maxY - startY;                }                            while (overlapping) {                    boxes.forEach(function(box) {                    var target = (Math.min.apply(minY, box.targets) + Math.max.apply(minY, box.targets)) / 2;                    box.pos = Math.min(Math.max(minY, target - box.size / 2), totalH - box.size);                    });                                // detect overlapping and join boxes                    overlapping = false;                    i = boxes.length;                    while (i--) {                    if (i > 0) {                        var previousBox = boxes[i - 1];                        var box = boxes[i];                        if (previousBox.pos + previousBox.size > box.pos) {                        // overlapping                        previousBox.size += box.size;                        previousBox.targets = previousBox.targets.concat(box.targets);                                    // overflow, shift up                        if (previousBox.pos + previousBox.size > totalH) {                            previousBox.pos = totalH - previousBox.size;                        }                        boxes.splice(i, 1); // removing box                        overlapping = true;                        }                    }                    }                }                            // step 4: normalize y and adjust x                i = 0;                boxes.forEach(function(b) {                    var posInCompositeBox = startY; // middle of the label                    b.targets.forEach(function() {                    half[i].y = b.pos + posInCompositeBox + LINEHEIGHT / 2;                    posInCompositeBox += LINEHEIGHT;                    i++;                    });                });                            // (x - cx)^2 + (y - cy)^2 = totalR^2                half.forEach(function(label) {                    var rPow2 = label.r * label.r;                    var dyPow2 = Math.pow(Math.abs(label.y - center.y), 2);                    if (rPow2 < dyPow2) {                        label.x = center.x;                    } else {                        var dx = Math.sqrt(rPow2 - dyPow2);                        if (!index) {                            // left                            label.x = center.x - dx;                        } else {                            // right                            label.x = center.x + dx;                        }                    }                    // drawLabel(label);                    var _anchor = label._anchor,                    _router = label._router,                    fill = label.fill,                    y = label.y;                                var labelAttrs = {                        y: y,                        fontSize: 12, // 字体大小                        fill: '#808080',                        text: label._data.type + '\n' + label._data.value,                        textBaseline: 'bottom'                    };                    var lastPoint = {                        y: y                    };                                if (label._side === 'left') {                        // 具体文本的位置                        lastPoint.x = APPEND_OFFSET;                        labelAttrs.x = APPEND_OFFSET; // 左侧文本左对齐并贴着画布最左侧边缘                        labelAttrs.textAlign = 'left';                    } else {                        lastPoint.x = canvasWidth - APPEND_OFFSET;                        labelAttrs.x = canvasWidth - APPEND_OFFSET; // 右侧文本右对齐并贴着画布最右侧边缘                        labelAttrs.textAlign = 'right';                    }                                // 绘制文本                    var text = labelGroup.addShape('Text', {                        attrs: labelAttrs                    });                    labels.push(text);                    // 绘制连接线                    var points = void 0;                    if (_router.y !== y) {                        // 文本位置做过调整                        points = [[_anchor.x, _anchor.y], [_router.x, y], [lastPoint.x, lastPoint.y]];                    } else {                        points = [[_anchor.x, _anchor.y], [_router.x, _router.y], [lastPoint.x, lastPoint.y]];                    }                                labelGroup.addShape('polyline', {                        attrs: {                            points: points,                            lineWidth: 1,                            stroke: fill                        }                    });                });            });            canvas.draw();            // this.chart.on('afterpaint', function() {            //   addPieLabel(this.chart);            // });        },        // g2获取饼图点位置        getEndPoint(center, angle, r) {            return {                x: center.x + r * Math.cos(angle),                y: center.y + r * Math.sin(angle)            };        }    },    watch: {        gtwopiedata: function (val, oldVal) {    // 监听数据，当发生变化时，触发回调函数绘制图表，使用mounted无法正常绘制            // if(this.dothisfun){                this.g2pie(val);            //     this.dothisfun = false            // }        }    },    // mounted(){    //     this.g2pie();    // }}</script>

<style scoped>    #id{        width: 100%;        height: 100%;    }</style>

本来是想将生成的方法封装到js文件中的，但是不知道为什么，import G2 进入js文件之后，vue便会卡在92%无法继续热更新，node的cpu占用率也会饱满，所以只好封装在.vue文件中，以子组件的形式被父组件调用。

本处需要注意的第一个问题，即为data中定义的chart，如果不定义，直接用let chart = new G2.chart()，也确实能够正常生成图表，但是当数据更新的时候，便会重新渲染生成新的图表，此时页面上会同时存在多个图表，所以需要提前定义chart，并使用this.chart = new G2.chart()。

本处需要注意的第二个问题，即为使用mounted钩子函数运行此函数时，因为并未检测到数据变化，所以不会生成有效图表，所以需要使用watch监听数据变化，当发生变化的时候，执行方法渲染图表。 

vue引入G2图表

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

线上示例

特性

• ???? 完善的图形语法：数据到图形的映射，能够绘制出所有的图表；

• ???? 全新的交互语法：通过触发和反馈机制可以组合出各种交互行为，对数据进行探索；

• ???? 强大的 View 模块：可支持开发个性化的数据多维分析图形；

• ???? 双引擎渲染：Canvas 或 SVG 任意切换；

• ???? 可视化组件体系：面向交互、体验优雅；

• ✨全面拥抱 typescript：提供完整的类型定义文件；

介绍一下在vue中使用G2

安装G2依赖：

npm instal @antv/g2

在绘图前我们需要为 G2 准备一个 DOM 容器：

<div id="c1"></div>

执行代码：

    import * as G2 from '@antv/g2';      export default {    mounted() {           const data = [                { genre: 'Sports', sold: 275 },                { genre: 'Strategy', sold: 115 },                { genre: 'Action', sold: 120 },                { genre: 'Shooter', sold: 350 },                { genre: 'Other', sold: 150 },            ];            // Step 1: 创建 Chart 对象            const chart = new G2.Chart({                container: 'c1', // 指定图表容器 ID                width: 600, // 指定图表宽度                height: 300, // 指定图表高度            });            // Step 2: 载入数据源            chart.data(data);            // Step 3：创建图形语法，绘制柱状图            chart.interval().position('genre*sold');            // Step 4: 渲染图表            chart.render();    }  }

效果展示：

“在vue中怎么封装G2图表”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！