Vue2 添加數(shù)據(jù)可視化支持的方法步驟
更新時間：2019年01月02日 14:14:05 作者：心葉
這篇文章主要介紹了Vue2 添加數(shù)據(jù)可視化支持的方法步驟,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
安裝
npm install clay-core --save
首先，通過npm安裝數(shù)據(jù)可視化庫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啟動前可以有多項配置，用以針對具體開發(fā)環(huán)境進行調(diào)整或加強，上面我們加強了選擇器功能，因此，你可能還需要安裝sizzle:
npm install --save sizzle
使用
現(xiàn)在，就可以對照api使用這個庫了，舉例子：
比如修改entry.js里面的方法：
1.首先在開頭導入：
import clay from './clay.js';
2.在需要的地方使用：
el: clay('#root')[0],
使用組件
首先，我們?nèi)ソM件庫中復制一個組件過來，組件倉庫地址：
https://github.com/yelloxing/clay-component
復制到clay.js文件夾中，因為組件基于瀏覽器開發(fā)，而不是模塊開發(fā)，因此，你需要在組件開發(fā)加入：
import clay from "./index.js";
然后，clay.vue是使用方法：
clay("svg")
.attr("width", 800)
.attr("height", 700)
// 使用組件
.use("circleTree", {
// 數(shù)據(jù)
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
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue自定義指令directive的使用方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
在Vue中使用過濾器（Filters）來渲染數(shù)據(jù)是一種很有趣的方式,下面這篇文章主要給大家介紹了關于Vue過濾器（filter）實現(xiàn)及應用場景的相關資料,需要的朋友可以參考下
2021-06-06 
vue結合el-table實現(xiàn)表格行拖拽排序(基于sortablejs)
這篇文章主要介紹了vue結合el-table實現(xiàn)表格行拖拽排序(基于sortablejs),本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2024-01-01 
vue項目拍照或上傳圖片并實現(xiàn)轉(zhuǎn)化為base64格式
這篇文章主要介紹了vue項目拍照或上傳圖片并實現(xiàn)轉(zhuǎn)化為base64格式方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-11-11 
在Vue3中,ref主要用于基本數(shù)據(jù)類型和單個數(shù)據(jù)管理,需要用.value訪問,reactive適用于對象和多數(shù)據(jù)管理,直接訪問屬性,ref支持解構保持響應性,reactive解構后失去響應性,選擇合適的方法可以使代碼更優(yōu)化
2024-11-11 
vue項目使用js監(jiān)聽瀏覽器關閉、刷新、后退事件實現(xiàn)方法
用vue做的項目,有個需求就是關閉瀏覽器的時候,需要往后臺提交有個接口,來看看這個賬號有沒有下線,這篇文章主要給大家介紹了關于vue項目使用js監(jiān)聽瀏覽器關閉、刷新、后退事件的實現(xiàn)方法,需要的朋友可以參考下
2024-06-06 
這篇文章主要介紹了Vue2.0父子組件傳遞函數(shù)的教程詳解,需要的朋友可以參考下
2017-10-10 
vue項目fetch本地PAG格式文件404 NotFound的解決
這篇文章主要介紹了vue項目fetch本地PAG格式文件404 NotFound的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10 
本篇文章主要介紹了Vue.js組件，組件系統(tǒng)是Vue.js其中一個重要的概念，具有一定的參考價值，有需要的可以了解一下。
2016-12-12