VUE-012-图表 v-charts 学习(一)饼图展示状态
2023-09-11 14:18:59 时间
软件质量平台中需要输出各种各样的图表数据,以 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、获取数据后,饼图展示如下所示:
相关文章
- JS框架_(Vue.js)带有星期日期的数字时钟
- Vue - @import css 加载第三方css
- VUE - vue.runtime.esm.js?6e6d:619 [Vue warn]: Do not use built-in or reserved HTML elements as component i
- vue:自定义验证form表单中的数组
- vue 自定义指令input表单的数据验证
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- vue.js3:用pinia做状态管理(vue@3.2.37 / pinia@2.0.16)
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- linux(fedora 32):安装node/vue的运行环境(node v14.15.0)
- [Vue] Get up and running with vue-router
- vue.js3:用pinia做状态管理(vue@3.2.37 / pinia@2.0.16)
- vue指令:v-pre原样输出,不解析插值表达式
- Vue入门教程:node安装vue命令行工具及启动项目
- vue:export default 和 export 区别(difference between Vue 'export default' and 'new Vue')
- vue脚手架基础demo
- 192:vue+openlayers: 选择feature,弹窗操作,删除所选feature
- 182:vue+openlayers 使用d3实现地图区块呈现不同颜色的效果
- 返回顶部vue、监听页面滚动(整理)
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例
- 【三十天精通 Vue 3】 第十天 Vue 状态管理详解
- 关于“import {ref,onMounted} from “vue“