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 相关文章推荐
javascript中关于break,continue的特殊用法与介绍
May 24 Javascript
jquery图片切换实例分析
Apr 15 Javascript
JavaScript统计网站访问次数的实现代码
Nov 18 Javascript
require.js+vue开发微信上传图片组件
Oct 27 Javascript
AngularJS实现表格的增删改查(仅限前端)
Jul 04 Javascript
AngularJS 的$timeout服务示例代码
Sep 21 Javascript
详解vue添加删除元素的方法
Jun 30 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
Sep 21 Javascript
postman自定义函数实现 时间函数的思路详解
Apr 17 Javascript
vue登录页面cookie的使用及页面跳转代码
Jul 10 Javascript
使用localStorage替代cookie做本地存储
Sep 25 Javascript
关于uniApp editor微信滑动问题
Jan 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代码
2010/08/08 PHP
解决PHP在DOS命令行下却无法链接MySQL的技术笔记
2010/12/29 PHP
php的memcached客户端memcached
2011/06/14 PHP
PHP定时执行计划任务的多种方法小结
2011/12/19 PHP
php获得文件大小和文件创建时间的方法
2015/03/13 PHP
php获取、检查类名、函数名、方法名的函数方法
2015/06/25 PHP
php使用imagecopymerge()函数创建半透明水印
2018/01/25 PHP
PHP设计模式之适配器模式原理与用法分析
2018/04/25 PHP
javascript代码加载优化方法
2011/01/30 Javascript
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
js获取checkbox值的方法
2015/01/28 Javascript
js淡入淡出焦点图幻灯片效果代码分享
2015/09/08 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
JavaScript获取当前url根目录(路径)
2016/06/17 Javascript
JS获取鼠标选中的文字
2016/08/10 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
快速解决vue在ios端下点击响应延时的问题
2018/08/27 Javascript
Vue使用Proxy监听所有接口状态的方法实现
2019/06/07 Javascript
Vue.js实现大转盘抽奖总结及实现思路
2019/10/09 Javascript
node.js express框架实现文件上传与下载功能实例详解
2019/10/15 Javascript
python解析发往本机的数据包示例 (解析数据包)
2014/01/16 Python
Python中多线程thread与threading的实现方法
2014/08/18 Python
python实现的文件夹清理程序分享
2014/11/22 Python
python 删除大文件中的某一行(最有效率的方法)
2017/08/19 Python
Python实现一个服务器监听多个客户端请求
2018/04/12 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
PyTorch: 梯度下降及反向传播的实例详解
2019/08/20 Python
在python中利用try..except来代替if..else的用法
2019/12/19 Python
EJB与JAVA BEAN的区别
2016/08/29 面试题
安全责任书模板
2014/07/22 职场文书
2014年乡镇妇联工作总结
2014/12/02 职场文书
海洋天堂观后感
2015/06/05 职场文书
2016年第16个全民国防教育日宣传活动总结
2016/04/05 职场文书
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android
SpringBoot实现quartz定时任务可视化管理功能
2021/08/30 Java/Android