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

 

 　　六、获取数据后，饼图展现以下所示：