基于g2的viserjs

包名称 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% 橙色
中间为空圆