前言

本文的原文连接是: 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 版本：

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 = falsenew 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 企业级可视化解决方案，蚂蚁金服开发的相关推荐

C#支付宝当面付扫码支付开发，包括demo代码的修改和蚂蚁金服开发平台的配置
支付宝开发前配置: 第一步登陆蚂蚁金服开放平台服:支付宝扫码登陆登录之后看到一下界面,找到自主研发选项,点击开始入驻配置自己的个人信息: 到此为止我们所有应该做的配置基本上就完成了,但是我们要注意 ...
蚂蚁金服开发岗求职攻略.pdf
2020,可谓是招聘面试最难季.不少大厂,如腾讯.字节的招聘名额明显减少,面试门槛却一再拔高,如果不用心准备,很可能就被面试官怼得哑口无言.今天不谈其它,就说说我作为面试官面试的那些事儿. 从某电商项 ...
蚂蚁金服ATEC技术峰会：共探技术开放新生态
小蚂蚁说: 就在9月21日,蚂蚁金服ATEC(Ant Technology Exploration Conference)技术探索大会的"金融科技开放峰会"和"蚂蚁区块链 ...
从零到破万节点！支撑618大促背后的蚂蚁金服Kubernetes集群
2019年天猫618大促,蚂蚁金服首次在大促中对调度系统和技术栈全面应用Kubernetes,突破了Kubernetes单集群万节点的规模,总节点数达到数十万个,这是世界最大规模的 Kubernete ...
蚂蚁金服区块链+公益又有新动作，助力相互保险爱心救助账户
今日,信美人寿相互保险社上线了爱心救助账户.据信美方面表示,该账户也是国内首个运用区块链技术记账的相互保险. 据了解,信美人寿相互保险社(信美相互人寿)是国内首家人寿相互保险社,已于今年5月正式获准开 ...
一次蚂蚁金服的面试经历
没记错的话,在boss上有个蚂蚁的人找我要了简历,我给了他之后,其实也没啥可期待的,毕竟我16年毕业,大学也是一般的二本,现在工作的公司也属于没人听过的.但想不到一周之后(1月23)号有蚂蚁的人给我打 ...
蚂蚁金服ATEC峰会首次亮相云栖，CTO程立详解技术开放全战略
大数据文摘作品大数据文摘记者:龙牧雪魏子敏 "技术不是万能的,而开放是解决"不能"的唯一一条路径." 蚂蚁金服CTO程立在10月11日2017杭州云栖大会A ...
Kubernetes学习总结（3）——一年时间打造全球最大规模之一的Kubernetes集群，蚂蚁金服怎么做到的？
一.背景去年 6 月份,蚂蚁金服的 Kubernetes 开发团队刚刚下载 Kubernetes 代码,从零开始尝试在内部落地 Kubernetes 集群,并推动云原生实践.2019 年天猫 618 ...
《MIT科技评论》全球十大突破性技术之一，蚂蚁金服刷脸支付的算法和难点
<麻省理工科技评论>发布了2017年全球十大突破性技术榜单,其中刷脸支付上榜."在中国,人脸识别系统现在应用于授权支付.设备访问以及罪犯追踪."该项技术被认为是在&qu ...

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

前言

1，关于 AntV Viser

2，使用说明

3，总结

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

最新文章

热门文章