Vue2 添加数据可视化支持的方法步骤


Posted in Javascript onJanuary 02, 2019

安装

npm install clay-core --save

首先,通过npm安装数据可视化库clay.js,具体的api你可以查阅文档:

https://yelloxing.github.io/clay-core/doc/#/quickstart/environment

这是一个非嵌入的库。

初始化

新建文件src/clay.js/index.js

import render from 'clay-core';
import Sizzle from 'sizzle';

let clay = render(window);
clay.config("$sizzleProvider", () => (selector, context) => Sizzle(selector, context));

export default clay;

clay.js启动前可以有多项配置,用以针对具体开发环境进行调整或加强,上面我们加强了选择器功能,因此,你可能还需要安装sizzle:

npm install --save sizzle

使用

现在,就可以对照api使用这个库了,举例子:

比如修改entry.js里面的方法:

1.首先在开头导入:

import clay from './clay.js';

2.在需要的地方使用:

el: clay('#root')[0],

使用组件

首先,我们去组件库中复制一个组件过来,组件仓库地址:

https://github.com/yelloxing/clay-component

复制到clay.js文件夹中,因为组件基于浏览器开发,而不是模块开发,因此,你需要在组件开发加入:

import clay from "./index.js";

然后,clay.vue是使用方法:

clay("svg")
 .attr("width", 800)
 .attr("height", 700)

 // 使用组件
 .use("circleTree", {
  // 数据
  data: program.data,

  // 结点名称
  name: orgItem => orgItem.name,

  // 树的圆心和半径
  cx: 350,
  cy: 350,
  r: 300,

  // 树结构配置
  root: initTree => initTree,
  child: parentTree => parentTree.children,
  id: treedata =>
   treedata.name + (treedata.value ? "_" + treedata.value : "")
 });

本篇最终项目文件Github地址:github.com/yelloxing/vue.quick/tree/V5

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS获得QQ号码的昵称,头像,生日的简单实例
Dec 04 Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 Javascript
实例讲解避免javascript冲突的方法
Jan 03 Javascript
jquery中取消和绑定hover事件的实现代码
Jun 02 Javascript
JS中如何实现Laravel的route函数详解
Feb 12 Javascript
利用jQuery解析获取JSON数据
Apr 08 jQuery
vue项目实战总结篇
Feb 11 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
Aug 29 Javascript
cnpm加速Angular项目创建的方法
Sep 07 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
Feb 10 Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 Javascript
js制作提示框插件
Dec 24 Javascript
如何在Vue.js中实现标签页组件详解
Jan 02 #Javascript
如何使用less实现随机下雪动画详解
Jan 02 #Javascript
详解Vue2 添加对scss的支持
Jan 02 #Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
Jan 02 #Javascript
JS中数据结构之栈
Jan 01 #Javascript
微信小程序自定义导航栏
Dec 31 #Javascript
JavaScript ES6中的简写语法总结与使用技巧
Dec 30 #Javascript
You might like
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
9个javascript语法高亮插件 推荐
2009/07/18 Javascript
学习面向对象之面向对象的术语
2010/11/30 Javascript
ajax中get和post的说明及使用与区别
2012/12/23 Javascript
javascript拖拽上传类库DropzoneJS使用方法
2013/12/05 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
node.js中module.exports与exports用法上的区别
2016/09/02 Javascript
angular ng-repeat数组中的数组实例
2017/02/18 Javascript
基于bootstrap实现收缩导航条
2017/03/17 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
angularJS开发注意事项
2018/05/26 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
2019/01/18 jQuery
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
2019/11/18 jQuery
如何配置vue.config.js 处理static文件夹下的静态文件
2020/06/19 Javascript
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
使用Python神器对付12306变态验证码
2016/01/05 Python
Python3实现发送QQ邮件功能(html)
2017/12/15 Python
python 自定义异常和异常捕捉的方法
2018/10/18 Python
Python读取mat文件,并保存为pickle格式的方法
2018/10/23 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
python操作文件的参数整理
2019/06/11 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
Python使用正则表达式实现爬虫数据抽取
2020/08/17 Python
使用html5 canvas创建太空游戏的示例
2014/05/08 HTML / CSS
英国领先的互联网葡萄酒礼品商:Vintage Wine & Port
2019/05/24 全球购物
Nip + Fab官网:英国美容品牌
2019/08/26 全球购物
拉飞逸官网:Lafayette 148 New York
2020/07/15 全球购物
办公室文秘自我评价
2013/09/21 职场文书
基层工作经历证明
2014/01/13 职场文书
党的群众路线教育实践活动心得体会
2014/03/03 职场文书
小学校长个人总结
2015/03/03 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
2016年春季运动会广播稿
2015/08/19 职场文书
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
2021/04/01 PHP
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL