Vue使用Viser

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

最近产品经理发现antV的图表非常漂亮，想在项目里使用，看了下文档antV适用于Vue的分支叫Viser，Viser的官方文档写的有点随意，在此给出Vue中使用Viser的方法如下：

1.安装Viser相关包

npm install viser-vue
npm install @antv/data-set

2.在项目的main.js中引入Viser

import Viser from 'viser-vue'
Vue.use(Viser)

与引入ElementUI等框架相同，这里不需要额外引入CSS样式

3.vue文件中书写代码

官方饼图案例文档

<template>
<div>
<v-chart :forceFit="true" :height="height" :data="data" :scale="scale">
<v-tooltip :showTitle="false" dataKey="item*percent" />
<v-axis />
<v-legend dataKey="item" />
<v-pie position="percent" color="item" :v-style="pieStyle" :label="labelConfig" />
<v-coord type="theta" />
</v-chart>
</div>
</template><script>
const DataSet = require('@antv/data-set'); const sourceData = [
{ item: '事例一', count: 40 },
{ item: '事例二', count: 21 },
{ item: '事例三', count: 17 },
{ item: '事例四', count: 13 },
{ item: '事例五', count: 9 }
]; const scale = [{
dataKey: 'percent',
min: 0,
formatter: '.0%',
}]; const dv = new DataSet.View().source(sourceData);
dv.transform({
type: 'percent',
field: 'count',
dimension: 'item',
as: 'percent'
});
const data = dv.rows; export default {
data() {
return {
data,
scale,
height: 400,
pieStyle: {
stroke: "#fff",
lineWidth: 1
},
labelConfig: ['percent', {
formatter: (val, item) => {
return item.point.item + ': ' + val;
}
}],
};
}
};
</script>