1.官网
https://viserjs.github.io/demoHome.html
2.可视化数据图表
3.比如饼图：
https://viserjs.github.io/demo.html#/viser/pie/basic-pie
4.
右侧有vue中应用的代码。如何在本地部署并应用制作成浏览器的图表？
===================
重点介绍
===================
5.在root下根目录下，安装viser-vue
<code>npm install viser-vue/<code>
6.安装数据集
<code>npm install @antv/data-set/<code>
7.碰巧需要升级npm
<code>npm install -g npm/<code>
8.全局安装
<code>npm install vue-cli -g/<code>
9.选定路径，新建vue项目
比如我在root的根目录下新建一个相关文件夹：xgj-vue
<code>mkdir xgj-vue
cd xgj-vue #并进入该文件夹
vue init webpack sun #然后新建一个项目叫sun
#一直yes/<code>
10.注意 这里要在sun下进行安装和运行哦!!!然后：
<code>cd sun
npm install
npm run dev/<code>
================
下面很重要
================
11.该项目的main.js中引入Viser
比如：本机：file:///root/xgj-vue/sun/src找到main.js，注意将文件位置加入下面：
代码复制进去，一般加在import后面，上面几行
<code>import Viser from 'viser-vue'
Vue.use(Viser)/<code>
12.file:///root/xgj-vue/sun/src/router现在这个目录下
将index.js，修改一下：
<code>import Vue from 'vue'
import Router from 'vue-router'
//import HelloWorld from '@/components/HelloWorld'
import pie from '@/components/pie'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'pie',
component: pie
}
]
})/<code>
#也就是将原来的注释掉，并将helloworld改为pie，保存。
建议备份一下
13.然后，在
file:///root/xgj-vue/sun/src/components
新建一个pie.vue
将下面的代码复制进去：
https://viserjs.github.io/demo.html#/viser/pie/basic-pie
14.npm run dev #运行看看，复制到浏览器看看
再来一个玫瑰图看看
15
============
这次换一个图：复制备份。
===========
15.1
https://viserjs.github.io/demo.html#/viser/pie/donut-rose
15.2
file:///root/xgj-vue/sun/src/components
下，新建一个rose.vue，将上述代码复制进去
15.3 main.js #不用修改
15.4
file:///root/xgj-vue/sun/src/router
再复制一份index(pie).js
然后在index.js中修改成：
<code>import Vue from 'vue'
import Router from 'vue-router'
import rose from '@/components/rose'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'rose',
component: rose
}
]
})/<code>
然后
npm run dev
复制：到浏览器打开
http://localhost:8080
图
閱讀更多 易三一世 的文章
