- 关于 viser.js 的按需引入
i. npm install viser-vue
npm install @antv/g2 --save （因为使用使用数据源需要，不然数据会出不来。）
ii. 在main.js 中执行如下代码：
import Viser from 'viser-vue';
Vue.use(Viser);
iii. 剩下就是组件填充代码（以下以折线图为例子）
<template>
<v-chart :forceFit="true" :height="height" :data="data" :scale="scale">
<v-tooltip />
<v-axis dataKey="date" :label="label" />
<v-legend />
<v-line position="date*value" color="option" />
<v-point position="date*value" color="option" shape="circle" />
</v-chart>
</template>
<script>
data() {
return {
data: [],
scale: [],
height: 450,
}
},
created() {
/*接口获取图表数据（数据格式尽量按照文档例子来，例如数据是数组对象
[{ total: 1, number: 3, text: '甲' }，
{ total: 2, number: 1 }],
少了text字段， 以折线图为例，它的连线就会中断。前后端分离建议前端先在本地定义好数据格式，如果text 字段为空，后端数据就传 text: '' ）*/
// 调用后台接口获取数据sourceData
},
methods: {
getMoneySourceData(sourceData, tickCount) {
const DataSet = require('@antv/data-set'); // viser.js 使用G2, G3 数据源
const dv = new DataSet.View().source(sourceData);
dv.transform({
type: 'rename', /* 由于页面需求需要用到坐标轴label是中文所以暂时找到这种方法,如果有其他方法欢迎评论交流 */
map: {
total: '总收入',
cash: '现金充值',
order: '现金预约下单',
coupon: '现金购买卡券'
} });
dv.transform({
type: 'fold',
fields: ['总收入', '现金充值', '现金预约下单' , '现金购买卡券'],
key: 'option',
value: 'value' });
this.data = dv.rows;
this.scale = [{
dataKey: 'date',
tickCount: tickCount // 这个是由于业务需求坐标轴刻度需要可以根据时间跨度来切换。
}];
}
}
</script>
** G2文档（viser.js以G2为底层，两个文档需要交替看） ：**
** www.yuque.com/antv/g2-doc…**
viser.js 官方文档:
** www.yuque.com/rs385i/yzbt…**
** viser.js 官方例子：**
