vue仪表盘，使用antv/G2实现简单的仪表盘效果

效果图：

 以下代码就可以展示出效果图中的简易仪表，数据还需使用者自己处理一下，一些简要注释都在代码中

不了解其中的一些参数，可访问https://antv.alipay.com/zh-cn/g2/3.x/demo/gauge/color.html

Dashboard.vue：

<template>
    <div id="mountNode" class='dashboard' @click="score">

    </div>
</template>

<script type="text/ecmascript-6">
    import G2 from '@antv/g2'
    export default {
        name: 'Dashboard',
        data() {
            return {
                chart: null,
                personInfo: null,  //数据
            }
        },
        props:{
            show: String,  //定义传值的类型
            basic: Boolean, //无需理会，本人项目中需要的
            idenId: Boolean  //无需理会，本人项目中需要的
        },
        created() {
        },
        mounted() {
            this.getScore();
        },

        methods:{
            getScore() {
               //获取单个分数或者对象数据传入仪表方法中
               _this.drawChart(_this.personInfo);
                
            },
            //仪表
            drawChart(personInfo) {
                var _this = this;
                var Shape = G2.Shape;// 自定义Shape 部分
                
                Shape.registerShape('point', 'pointer', {
                    //绘制指针，不需要的可以去掉
                    drawShape: function drawShape(cfg, group) {
                        var center = this.parsePoint({ // 获取极坐标系下画布中心点
                            x: 0,
                            y: 0
                        });
                    }，
                    group.addShape('line', {
                      attrs: {
                        x1: center.x,
                        y1: center.y,
                        x2: cfg.x,
                        y2: cfg.y,
                        stroke: cfg.color,
                        lineWidth: 5,
                        lineCap: 'round'
                      }
                    });
                    return group.addShape('circle', {
                      attrs: {
                        x: center.x,
                        y: center.y,
                        r: 9.75,
                        stroke: cfg.color,
                        lineWidth: 4.5,
                        fill: '#fff'
                      }
                    });
                });

                //数据
                var data = [{
                    value: personInfo.user_score
                }];
                //chart初始化
                var chart = new G2.Chart({
                    container: 'mountNode', //标签id
                    forceFit: true,
                    height: '180',
                    padding: [0, 0, 30, 0]
                });
                chart.source(data);

                chart.coord('polar', {
                    startAngle: -29 / 30 * Math.PI, //开始角度
                    endAngle: -1 / 30 * Math.PI,  //结束角度
                    radius: 0.9
                });
                //刻度分数值设置
                chart.scale('value', {
                    ticks: [ 300, 350, 400, 450, 500,550, 600,650,700 ], //分数值
                    tickInterval: 1,
                    nice: false
                });

                chart.axis('1', false);
                chart.axis('value', {
                    zIndex: 2,
                    line: null,
                    //表盘中样式设置
                    label: {
                        offset: -15,
                        textStyle: {
                            fontSize: 12,
                            fill: '#fff',
                            textAlign: 'center',
                            textBaseline: 'middle'
                        }
                    },
                    subTickCount: 4,
                    //副刻度线的设置
                    subTickLine: {
                        length: -8,
                        stroke: '#fff',
                        strokeOpacity: 1
                    },
                    //刻度线的设置
                    tickLine: {
                        length: -17,
                        stroke: '#fff',
                        strokeOpacity: 1
                    },
                    grid: null
                });
                chart.legend(false);
             chart.point().position('value*1').shape('pointer').color('#1890FF').active(false);

                // 绘制仪表盘背景
                chart.guide().arc({
                    zIndex: 0,
                    top: false,
                    start: [0, 1],
                    end: [9, 1],
                    style: { // 底灰色
                        stroke: '#FEA7AC',
                        lineWidth: 10
                    }
                });
                // 绘制指标
                chart.guide().arc({
                    zIndex: 1,
                    start: [300, 1],
                    end: [ personInfo.user_score, 1],
                    style: {
                        stroke: '#FFEBEC',
                        lineWidth: 10
                    }
                });
                // 绘制指标数字
                chart.guide().html({
                    position: ['50%', '80%'],
                    html:  `${_this.isShow(personInfo)}`
                });

                chart.render();
            },
            //显示的刻度中的一些html元素，如：中间的分数
            isShow(personInfo){
                var html='';
                //判断无需理会，直接取其中的一段即可
                if(this.show=='home'){
                    html=
                       ` <div style="width: 300px;color: #fff;text-align: center;">
                        <p style="font-size: 12px;">BETA</p>
                        <p style="font-size: 38px;font-weight: bold;"> ${personInfo.user_score}</p>
                        <p style="font-size: 15px;" class="abc">分</p>
                        </div>`;

                }else {
                    html= ` <div style="width: 300px;color: #fff;text-align: center;">
                        <p style="font-size: 19px;font-weight: bold;">分：${personInfo.user_score}</p>
                        <p style="margin-top:8px;font-size: 19px;font-weight: bold;">度：${personInfo.user_amount}</p>
                        </div>`;
                }
                return html;
            }
        }

    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">

</style>

附一个《关于vue antV G2-3.X组件化》的介绍链接：http://www.php.cn/js-tutorial-406358.html