基于g2的viserjs
程序员文章站
2022-03-02 15:22:07
...
包名称 viser-vue
npm install viser-vue
Viser 基于 G2
Viser-Graph 基于 G6
偏向的图标类型不一样
但都支持 React, Vue 和 AngularJS 等等
核心价值
开发时,具有良好的体验。
设计思路
利用 组件来 展示图表。
包括 React, Vue 和 AugularJS 的组件。
在 G2 之上,
衍生了一套语法变种。
具备更强的可视化能力。
拿 viser-vue 举例
安装完包
npm install viser-vue
npm install @antv/data-set //智能数据(CSV, DSV, GeoJSON)转换 成json
//供viser-vue 使用 以及封装了一些
//求和 求平均的 函数
//https://github.com/antvis/data-set/blob/master/docs/overview.md
后
//在 main.js 中引入
import Viser from 'viser-vue'
Vue.use(Viser)
//要使用的.vue组件中
<template>
<div>
<v-chart :forceFit="true" :height="height" :data="data" :scale="scale">
<v-tooltip :showTitle="false" data-key="item*percent"/>
<v-axis/>
<v-legend data-key="item"/>
<v-pie position="percent" color="item" :vStyle="pieStyle" :label="labelConfig"/>
<v-coord type="theta" :radius="0.75" :innerRadius="0.6"/>
</v-chart>
</div>
</template>
//Viser 中所有的子组件分为几类:
//容器组件:Chart, View, FacetView, Facet, LiteChart;
//标准组件:Coord, Tooltip, Legend, Guide, Axis, Series;
//图形组件:Pie, Sector, Line, SmoothLine, DashLine, Area, StackArea, //SmoothArea, Bar, StackBar, DodgeBar, Interval, StackInterval, //DodgeInterval, Point, JitterPoint, Funnel, Pyramid, Schema, Box, Candle, //Polygon, Contour, Heatmap, Edge, Sankey。
<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;//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>
这是一个
环形饼图
发呆:9% 红色
学习:40% 蓝色
听歌:21% 某种灰色?
锻炼:17% 绿色
游戏:13% 橙色
中间为空圆