Antv/G2 饼图-Toy模板网

这篇具有很好参考价值的文章主要介绍了Antv/G2 饼图。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue2 antv/g2 基础饼图</title>
    <style>
        #app {
            margin: 50px auto;
            text-align: center;
        }
    </style>
</head>
<!--vue-->
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<!-- 引入G2在线资源 -->
<script src="https://gw.alipayobjects.com/os/lib/antv/g2/3.4.10/dist/g2.min.js"></script>
<body>
    <div id="app">
        <h2>{{ msg }}</h2>
        <div id="chartcontainer"></div>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                msg: '',
                chart: null, // 创建一个chart变量
                list: [{
                    item: '事例一',
                    count: 40,
                    percent: 0.4
                }, {
                    item: '事例二',
                    count: 21,
                    percent: 0.21
                }, {
                    item: '事例三',
                    count: 17,
                    percent: 0.17
                }, {
                    item: '事例四',
                    count: 13,
                    percent: 0.13
                }, {
                    item: '事例五',
                    count: 9,
                    percent: 0.09
                }]
            },
            mounted() {
                this.msg = 'vue2 antv/g2 基础饼图'
                // 初始化chart
                const chart = new G2.Chart({
                    container: 'chartcontainer',
                    forceFit: true,
                    height: 300
                })
                chart.source(this.list, {
                    percent: {
                        formatter: function formatter(val) {
                        val = val * 100 + '%';
                        return val;
                        }
                    }
                })
                chart.coord('theta', {
                    radius: 0.75
                });
                chart.tooltip({
                    showTitle: false,
                    itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
                });
                chart.intervalStack().position('percent').color('item')
                .label('percent', {
                    formatter: function formatter(val, item) {
                      return item.point.item + ': ' + val;
                  }
                })
                .tooltip('item*percent', function(item, percent) {
                    percent = percent * 100 + '%';
                        return {
                             name: item,
                             value: percent
                    }
                })
                .style({
                    lineWidth: 1,
                    stroke: '#fff'
                })
                this.chart = chart // 将chart变量赋值为vue中的chart, 后面可以直接使用this.chart调用图表对象
                this.chart.render()
            }
        })
    </script>
</body>
</html>