VUE-012-圖表 v-charts 學習（一）餅圖展示狀態

軟件質量平台中需要輸出各種各樣的圖表數據，以 v-charts 中的餅圖為例，記錄圖表使用實現過程。

 

v-charts ：https://github.com/ElemeFE/v-charts

　　docs       ：https://v-charts.js.org/#/

 

　　本文使用完全引用的方式，以 v-charts 實現餅圖圖表輸出為例，演示步驟：

　　1、使用如下 npm 命令，進行 v-charts 安裝

npm i v-charts echarts -S

　　控制台輸出如下所示：

 

　　2、在 main.js 中完全引入 v-charts，如下所示：

import VCharts from 'v-charts';

Vue.use(VCharts);

 

 　　3、在對應的頁面中使用 ve-pie 餅圖元素，如下所示： 

<ve-pie :data="chartData" :settings="chartSettings" ></ve-pie>

 

 　　4、配置餅圖的基本設置，如下所示：

  data() {
    return {
      chartSettings: { type: 'pie' },
      chartData: {
        columns: ['key', 'value'],
        rows: []
      }
    };
  }

 

 　　5、在獲取數據后，綁定餅圖的數據源 chartData.rows，使得每次更新數據后，即可及時更新餅圖信息，如下所示：

getSuiteResultStatusPieData() {
  this.listLoading = true;

  this.reportApi.getSuiteResultStatusPieData(this.form).then(res => {
    this.chartData.rows = res.data.pie;
    this.listLoading = false;
    
    this.$message({
      type: 'success',
      message: res.data.msg
    });
  })
  .catch(e => {
    console.log(e);
  });
}

 

 　　6、獲取數據后，餅圖展示如下所示：