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写了一个类似php的print_r输出换行功能
Feb 18 Javascript
js判断生效时间不得大于失效时间的思路及代码
Apr 23 Javascript
JS Replace 全部替换字符的用法小结
Dec 24 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
Feb 07 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
May 05 Javascript
JS回调函数的应用简单实例
Sep 17 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
Nov 02 Javascript
window.open打开窗口被拦截的快速解决方法
Aug 04 Javascript
jQuery查找节点方法完整实例
Sep 13 Javascript
微信小程序 Template详解及简单实例
Jan 05 Javascript
如何在JavaScript中谨慎使用代码注释
Jun 21 Javascript
JS封装cavans多种滤镜组件
Feb 15 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
用PHP制作静态网站的模板框架(四)
2006/10/09 PHP
PhpMyAdmin出现export.php Missing parameter: what /export_type错误解决方法
2012/08/09 PHP
深入解析php中的foreach问题
2013/06/30 PHP
php登陆页的密码处理方式分享
2013/10/14 PHP
php查询mysql大量数据造成内存不足的解决方法
2015/03/04 PHP
php按单词截取字符串的方法
2015/04/07 PHP
自定义min版smarty模板引擎MinSmarty.class.php文件及用法
2016/05/20 PHP
phpstudy2020搭建站点的实现示例
2020/10/30 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
$()JS小技巧
2007/07/21 Javascript
鼠标滑上去后图片放大浮出效果的js代码
2011/05/28 Javascript
jquery使用append(content)方法注意事项分享
2014/01/06 Javascript
javascript轻量级模板引擎juicer使用指南
2014/06/22 Javascript
使用javascript实现简单的选项卡切换
2015/01/09 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
2016/01/29 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
2016/06/02 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
2019/03/19 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
ES6新增的数组知识实例小结
2020/05/23 Javascript
Python爬取Coursera课程资源的详细过程
2014/11/04 Python
Python微信公众号开发平台
2018/01/25 Python
Python环境下安装PyGame和PyOpenGL的方法
2020/03/25 Python
PyQt5 QDockWidget控件应用详解
2020/08/12 Python
python归并排序算法过程实例讲解
2020/11/04 Python
高级人员简历的自我评价分享
2013/11/03 职场文书
基层党员四风问题自我剖析材料
2014/09/29 职场文书
教师学习三严三实心得体会
2014/10/13 职场文书
保证书格式
2015/01/16 职场文书
会计工作岗位职责
2015/02/03 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书
Django如何与Ajax交互
2021/04/29 Python
如何理解PHP核心特性命名空间
2021/05/28 PHP
Appium中scroll和drag_and_drop根据元素位置滑动
2022/02/15 Python
Django中celery的使用项目实例
2022/07/07 Python