clear
Former-commit-id: e2bfcb0f40765724b17e13056e8293ec271efefb [formerly e2bfcb0f40765724b17e13056e8293ec271efefb [formerly e2bfcb0f40765724b17e13056e8293ec271efefb [formerly e2bfcb0f40765724b17e13056e8293ec271efefb [formerly 5793d72d458b7eeaf28a097d026168cebc9fc256 [formerly 9c8de3644bd40a55711e618742e29cce390e4c5f]]]]] Former-commit-id: 05ca3c8da65f8583c142720628aa6ea71d2dbf45 Former-commit-id: 7a4d2fba696e901db86071ea2810e9c932c976ad Former-commit-id: c18d3689200ca0e528fbf9bf171f6e1b50131bc3 [formerly 455e9952ca890cd8ad882250cfb9eabd944d44ee] Former-commit-id: 021fa8191681fe4f22e9a9f40389831a847e9066 Former-commit-id: 1022b7792417ce366901b9d5284762a015dd6d26 Former-commit-id: bed799410be508713cac76b7c8cf02d4457fe996 Former-commit-id: f6787cfaac3404132ad1011e2707e08484708ca9 Former-commit-id: 7a8a3baca9ef30393744fd56def6d608b51dcddd
This commit is contained in:
@@ -1,76 +0,0 @@
|
||||
# 图表 [ G2 ]
|
||||
|
||||
::: tip
|
||||
此文档仅对 `1.1.0` 及其以下版本有效,`1.1.1` 开始变更了图表库
|
||||
:::
|
||||
|
||||
## 介绍
|
||||
|
||||
D2Admin 集成了由蚂蚁金服出品的 **G2** 图表库
|
||||
|
||||
## 实现方式
|
||||
|
||||
`src/components/charts/register.js` 为注册图表组件的文件
|
||||
|
||||
`src/components/charts/G2` 为图表组件存放位置
|
||||
|
||||
`src/components/charts/G2/mixins/G2.js` 是图表最主要的文件,这是一个所有的图表组件都会使用的 mixin,这个 mixin 主要有以下用途
|
||||
|
||||
- 将 G2 和 DataSet 绑定到 data 上,方便组件使用,省去重复 `import G2 from '@antv/g2'` 等
|
||||
- 将 [G2 Chart类](http://antv.alipay.com/zh-cn/g2/3.x/api/chart.html#_Chart) 的属性全部暴露为 Vue 组件参数,这些参数会在初始化图表时用到
|
||||
- 提供了额外的设置参数,比如自动高度,自动初始化,初始化延时
|
||||
- 关闭 G2 的体验改进计划打点请求
|
||||
- data 上的 chart 对象
|
||||
- 自动初始化(或者不初始化)图表
|
||||
- `creatChart` 方法,根据参数设置生成 data 上的 chart 对象
|
||||
- `resize` 方法
|
||||
|
||||
在图表组件中使用这个 mixin 示例
|
||||
|
||||
``` vue
|
||||
<template>
|
||||
<!-- 如果需要开启自动高度功能 需要在这里设置 style="height: 100%;" -->
|
||||
<div ref="chart" style="height: 100%;"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 引入公用 mixin
|
||||
import G2 from '@/components/charts/G2/mixins/G2.js'
|
||||
export default {
|
||||
mixins: [
|
||||
G2
|
||||
],
|
||||
methods: {
|
||||
// 初始化图表
|
||||
init () {
|
||||
// mixin 中提供 creatChart 方法,这部分每个图表都一样
|
||||
this.creatChart()
|
||||
// 本组件的特殊设置 这部分每个图表不一样 你只需要改这部分内容
|
||||
this.chart.source(this.data)
|
||||
this.chart.coord().transpose()
|
||||
this.chart.interval().position('x*y')
|
||||
// 最后一步 渲染图表 这部分每个图表都一样
|
||||
this.chart.render()
|
||||
},
|
||||
// 数据源改变 重新渲染新的数据
|
||||
changeData () {
|
||||
this.chart.changeData(this.data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
上面的代码段展示了如何使用 mixin 快速制作一个图表组件,只需根据某个图表的个性化需要,在组件中重新定义 `init` 和 `changeData` 方法即可
|
||||
|
||||
你可以修改这个 mixin 去实现更多的功能,同时影响所有的图表组件
|
||||
|
||||
::: tip
|
||||
这只仅仅是作者个人对于图表封装的一个实现思路
|
||||
:::
|
||||
|
||||
## 为什么没有选择其他产品
|
||||
|
||||
G2 完全可以胜任一般的后台界面报表图表需求,而且官网文档清晰友好
|
||||
|
||||
如果你需要更酷炫的图表,也完全可以剔除集成的库,换用 百度的[echarts](http://echarts.baidu.com/) 或者超级强大的 [d3.js](https://d3js.org/)
|
||||
Reference in New Issue
Block a user