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

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

 

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

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

 

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

　　一、使用以下 npm 命令，進行 v-charts 安裝

npm i v-charts echarts -S

　　控制檯輸出以下所示：

 

　　二、在 main.js 中徹底引入 v-charts，以下所示：

import VCharts from 'v-charts';

Vue.use(VCharts);

 

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

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

 

 　　四、配置餅圖的基本設置，以下所示：

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

 

 　　五、在獲取數據後，綁定餅圖的數據源 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);
  });
}

 

 　　六、獲取數據後，餅圖展現以下所示：