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); }); }

 

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