Vue使用antV G2製做看板

工做中須要製做一個看板，選型選用antV G2進行開發。

因爲項目前端是使用Vue，因而研究了antVG2在Vue中的使用。

1.安裝antv/g2

在IDEA下面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獲取數據，能夠使該看板更加靈活，有更好的複用性。