前言

本文的原文连接是: https://blog.csdn.net/freewebsys/article/details/88283869
未经博主允许不得转载。
博主地址是：http://blog.csdn.net/freewebsys

1，关于 AntV Viser

AntV
AntV 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。
https://antv.alipay.com/zh-cn/index.html

Viser
Viser-Graph 为 React, Vue 和 Angular 提供了 3 个不同的分发版本。我们同时提供了 npm 安装和 umd 引入两种方式来使用 Viser。
https://viserjs.github.io/docs.html

BizCharts
是基于 G2 封装的 React 图表库，具有 G2、React 的全部优点，可以让用户以组件的形式组合出无数种图表
https://viserjs.github.io/docs.html#/viser-graph/guide/installation

2，使用说明

G2 可视化图形语法
G2 是一套基于可视化编码的图形语法，以数据驱动，具有高度的易用性和扩展性，用户无需关注各种繁琐的实现细节，一条语句即可构建出各种各样的可交互的统计图表。
https://antv.alipay.com/zh-cn/g2/3.x/index.html

G6 图可视化引擎
G6 是一个简单、易用、完备的图可视化引擎，它在高定制能力的基础上，提供了一系列设计优雅、便于使用的图可视化解决方案。能帮助开发者搭建属于自己的图图分析应用或是图编辑器应用。
https://antv.alipay.com/zh-cn/g6/2.x/index.html

F2 移动端可视化方案
F2 是一个专注于移动，开箱即用的可视化解决方案，完美支持 H5 环境同时兼容多种环境（Node, 小程序，Weex），完备的图形语法理论，满足你的各种可视化需求，专业的移动设计指引为你带来最佳的移动端图表体验。
https://antv.alipay.com/zh-cn/f2/3.x/index.html

L7 地理空间数据可视化
L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视化能力。L7 的目标是提供一套地理空间数据可视化框架，易用易扩展，支持海量数据的高性能和 3D 高质量渲染，安全可靠（无地图法务风险）的地理空间数据可视化解决方案。
https://antv.alipay.com/zh-cn/l7/1.x/index.html

项目演示：
https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html

移动端展示：
https://github.com/antvis/awesome-f2-charts

在终端使用如下命令来安装 npm 版本：

扫描二维码关注公众号，回复： 5768725 查看本文章

https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

vue create viser-demo
yarn add viser-vue

同时支持 3 个框架。react vue angular 。

需要在 main.js 里面增加代码：

import Vue from 'vue'
import App from './App.vue'

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

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

然后在 HelloWorld app 里面进行配置：

<template>
  <div>
    <v-chart :forceFit="true" :height="height" :data="data" :scale="scale">
      <v-tooltip />
      <v-axis />
      <v-line position="year*value" />
      <v-point position="year*value" shape="circle" />
    </v-chart>
  </div>
</template>

<script>
const data = [
  { year: '1991', value: 3 },
  { year: '1992', value: 4 },
  { year: '1993', value: 3.5 },
  { year: '1994', value: 5 },
  { year: '1995', value: 4.9 },
  { year: '1996', value: 6 },
  { year: '1997', value: 7 },
  { year: '1998', value: 9 },
  { year: '1999', value: 13 },
];

const scale = [{
  dataKey: 'value',
  min: 0,
},{
  dataKey: 'year',
  min: 0,
  max: 1,
}];

export default {
  data() {
    return {
      data,
      scale,
      height: 400,
    };
  }
};
</script>

3，总结

特别需要注意引入包：

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

然后就可以参考官方的demo了。
https://viserjs.github.io/demo.html#/viser/bar/basic-column

因为这边水平有限，不会使用 react，还是喜欢用 vuejs。所以一直研究 vuejs ，也做不出NB的系统。
主要是做个应用功能开发。这个就足够了。还是非常好的框架。ant 和 antv 都慢慢的开始支持 3个框架了。
非常不错。喜欢用哪个就用哪个。

本文的原文连接是:
https://blog.csdn.net/freewebsys/article/details/88283869

博主地址是：http://blog.csdn.net/freewebsys

nodejs（10）：AntV，Viser 企业级可视化解决方案，蚂蚁金服开发的

前言

1，关于 AntV Viser

2，使用说明

3，总结

猜你喜欢