欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

基于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% 橙色
中间为空圆