1. 前言
在实际项目中使用到了antv g2做数据可视化，免不了需要调用后端接口获取数据源重新渲染图表的情况，故此篇主要是讲解获取到后端数据后如何重新渲染图表
2. 使用g2
- vue项目中安装
npm install @antv/g2 --save
- vue项目引入
import { Chart } from '@antv/g2'
针对特定场景图表建议封装为组件
3. 方式
- dataset状态 设置一个状态然后用监听状态改变渲染页面，setState('name', 'value'),监听状态改变事件即可，这里主要将第二种方式，dataset状态打算放下一篇讲解
- chart.changeData 这里我以饼图为例 关键代码
第一步：
const chart = new Chart({
container: this.$props.id,
autoFit: true,
height: this.$props.height
})
chart.data(pieData)
第二步：
_instanceChart(chart = {}) {
this.$emit('handleChange', chart)
},
父组件1-1：监听handleChange
<d-pie
:id="'pie1'"
:data="toDoWorkData"
:is-change-data="isChangeToDoWorkData"
ref="work"
@handleChange="handleWorkDataChange"/>
父组件1-2： 拿到子组件图表实例
handleWorkDataChange(data) {
this.workChart = data
}
第三步：在初始化图表最后加入
this._instanceChart(chart)
第四步：父组件中调用，这样可以做到动态感知
getToDoWorkList() {
const { $message } = this
getToDoWork()
.then((res) => {
if (res.code === 200) {
this.toDoWorkData = res.data
......
// 重新渲染图表
// 考虑顺序问题：先加载数据还是先初始化图表
// 1) 如先加载数据再渲染图表则直接赋值，否则按以下方式
this.workChart.changeData(this.toDoWorkData)
// TODO - 设置默认选中一项，参数：数组索引
......
} else {
$message.info(res.msg)
}
})
.catch((error) => {
$message.error(`load todowork error: ${error.message}`)
})
},
第五步：设置默认项 或动态随机选中 （非必要）
代码1：默认项
setDefaultSelectedElements(eleIndex = 0) {
// if (!this.$props.isOpenAnimate && this.$props.data.length !== 0) {
// this.interval.elements[eleIndex].setState('selected', true)
// }
this.interval.elements[eleIndex].setState('selected', true)
}
代码2： 动态
clearTimeout(this.t)
// TODO 非空判断
var _len = this.$props.data.length
var eleIndex = Math.floor(Math.random() * _len)
// 设置其它元素为false,非激活状态
for (var i = 0; i < _len; i++) {
if (eleIndex !== i) {
this.interval.elements[i].setState('selected', false)
continue
}
this.interval.elements[eleIndex].setState('selected', true)
}
this.t = setTimeout(this.animate, this.$props.intervalTime)
结束
4. 总结
本人初学antv g2，可能官方有更好的实现方式，在此做个记录，欢迎学习交流。持续学习中......
