Vue使用antV G2制作看板

工作中需要制作一個看板，選型選用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對象所需的參數定義在data(){}中，后面會說）

test:function () {
        const data = this.basicColumnChartProp.data;
        // Step 1: 創建 Chart 對象
        const chart = new G2.Chart({
            container: this.basicColumnChartProp.container, // 指定圖表容器 ID
            width : this.basicColumnChartProp.width, // 指定圖表寬度
            height : this.basicColumnChartProp.height // 指定圖表高度
        });
        // Step 2: 載入數據源
        chart.source(data);
        // Step 3：創建圖形語法，繪制柱狀圖，由 genre 和 sold 兩個屬性決定圖形位置，genre 映射至 x 軸，sold 映射至 y 軸
        chart.interval().position('genre*sold').color('genre')
        // Step 4: 渲染圖表
        chart.render();
    },
    basicBarChart:function () {
        let data = this.basicBarChartProp.data;
        let chart = new G2.Chart({
            container: this.basicBarChartProp.container,
            width:this.basicBarChartProp.width,
            height:this.basicBarChartProp.height
        });
        chart.source(data);
        chart.axis('country', {
            label: {
                offset: 12
            }
        });
        chart.coord().transpose();
        chart.interval().position('country*population');
        chart.render();
    }
},
//在掛載時調用兩個函數
mounted() {
    this.test();
    this.basicBarChart();
},

4.在data塊中聲明圖表所需參數

data(){
    return{
        title:'地區貨品跟進看板',
        basicColumnChartProp:{
            data:[{ genre: 'Sports', sold: 275 },
                { genre: 'Strategy', sold: 115 },
                { genre: 'Action', sold: 120 },
                { genre: 'Shooter', sold: 350 },
                { genre: 'Other', sold: 150 }],
            container:'c1', //圖表所綁定的div id
            width:600,
            height:300
        },
        basicBarChartProp:{
            container:'mountNode', //圖表所綁定的div id
            width:500,
            height:300,
            data:[
                {
                    country: '巴西',
                    population: 18203
                }, {
                    country: '印尼',
                    population: 23489
                }, {
                    country: '美國',
                    population: 29034
                }, {
                    country: '印度',
                    population: 104970
                }, {
                    country: '中國',
                    population: 131744
                }
            ]
        }
    }
},

5.在模板<template>中創建div

<template>
  <div>
    <div><h1 style="color: white">{{title}}</h1></div>
    <span>
      <div id="c1"></div>
      <div id="mountNode"></div>
    </span>
  </div>
</template>

6.我想將單個Vue組件的背景設置成黑色，這利用了兩個鈎子函數beforeCreate ()，beforeDestroy ()

beforeCreate () {
    document.querySelector('body').setAttribute('style', 'background:#000000')
},
beforeDestroy () {
    document.querySelector('body').removeAttribute('style')
}

設置好路由，打開網頁，看其效果

完整代碼如下：

<template>
  <div>
    <div><h1 style="color: white">{{title}}</h1></div>
    <span>
      <div id="c1"></div>
      <div id="mountNode"></div>
    </span>
  </div>
</template>

<script>
    import G2 from '@antv/g2';
    export default {
        name: "spectaculars",
        data(){
            return{
                title:'地區貨品跟進看板',
                basicColumnChartProp:{
                    data:[{ genre: 'Sports', sold: 275 },
                        { genre: 'Strategy', sold: 115 },
                        { genre: 'Action', sold: 120 },
                        { genre: 'Shooter', sold: 350 },
                        { genre: 'Other', sold: 150 }],
                    container:'c1',
                    width:600,
                    height:300
                },
                basicBarChartProp:{
                    container:'mountNode',
                    size:{'width':500,'height':300},
                    data:[
                        {
                            country: '巴西',
                            population: 18203
                        }, {
                            country: '印尼',
                            population: 23489
                        }, {
                            country: '美國',
                            population: 29034
                        }, {
                            country: '印度',
                            population: 104970
                        }, {
                            country: '中國',
                            population: 131744
                        }
                    ]
                }
            }
        },
        methods:{
            test:function () {
                const data = this.basicColumnChartProp.data;
                // Step 1: 創建 Chart 對象
                const chart = new G2.Chart({
                    container: this.basicColumnChartProp.container, // 指定圖表容器 ID
                    width : this.basicColumnChartProp.width, // 指定圖表寬度
                    height : this.basicColumnChartProp.height // 指定圖表高度
                });
                // Step 2: 載入數據源
                chart.source(data);
                // Step 3：創建圖形語法，繪制柱狀圖，由 genre 和 sold 兩個屬性決定圖形位置，genre 映射至 x 軸，sold 映射至 y 軸
                chart.interval().position('genre*sold').color('genre')
                // Step 4: 渲染圖表
                chart.render();
            },
            basicBarChart:function () {
                let data = this.basicBarChartProp.data;
                let chart = new G2.Chart({
                    container: this.basicBarChartProp.container,
                    width:this.basicBarChartProp.size.width,
                    height:this.basicBarChartProp.size.height
                });
                chart.source(data);
                chart.axis('country', {
                    label: {
                        offset: 12
                    }
                });
                chart.coord().transpose();
                chart.interval().position('country*population');
                chart.render();
            }
        },
        mounted() {
            this.test();
            this.basicBarChart();
        },
        beforeCreate () {
            document.querySelector('body').setAttribute('style', 'background:#000000')
        },
        beforeDestroy () {
            document.querySelector('body').removeAttribute('style')
        }
    }
</script>

<style scoped>

</style>

這里我要說一下，為什么要將圖表的參數寫到data中

將來展示的可能不止一兩個圖表，可以將這些圖表的創建，寫到一個js文件中，然后導入到Vue組件中，

若數據寫在圖表創建的過程中，也就是說寫在js文件中，那樣當數據變化時，或者根據需求要更改圖表格式時，就要修改js文件，萬一其他的模塊也用到該組件呢？所以這樣不利於其復用。

寫入js文件中，引入Vue控件中，將圖表的參數定義在Vue空間中，並通過axios獲取數據，可以使該看板更加靈活，有更好的復用性。