Vue2 添加數(shù)據(jù)可視化支持的方法步驟
安裝
npm install clay-core --save
首先，通過(guò)npm安裝數(shù)據(jù)可視化庫(kù)clay.js，具體的api你可以查閱文檔：
https://yelloxing.github.io/clay-core/doc/#/quickstart/environment
這是一個(gè)非嵌入的庫(kù)。
初始化
新建文件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啟動(dòng)前可以有多項(xiàng)配置，用以針對(duì)具體開發(fā)環(huán)境進(jìn)行調(diào)整或加強(qiáng)，上面我們加強(qiáng)了選擇器功能，因此，你可能還需要安裝sizzle:
npm install --save sizzle
使用
現(xiàn)在，就可以對(duì)照api使用這個(gè)庫(kù)了，舉例子：
比如修改entry.js里面的方法：
1.首先在開頭導(dǎo)入：
import clay from './clay.js';
2.在需要的地方使用：
el: clay('#root')[0],
使用組件
首先，我們?nèi)ソM件庫(kù)中復(fù)制一個(gè)組件過(guò)來(lái)，組件倉(cāng)庫(kù)地址：
https://github.com/yelloxing/clay-component
復(fù)制到clay.js文件夾中，因?yàn)榻M件基于瀏覽器開發(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,
// 結(jié)點(diǎn)名稱
name: orgItem => orgItem.name,
// 樹的圓心和半徑
cx: 350,
cy: 350,
r: 300,
// 樹結(jié)構(gòu)配置
root: initTree => initTree,
child: parentTree => parentTree.children,
id: treedata =>
treedata.name + (treedata.value ? "_" + treedata.value : "")
});
本篇最終項(xiàng)目文件Github地址：github.com/yelloxing/vue.quick/tree/V5
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue自定義指令directive的使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue過(guò)濾器（filter）實(shí)現(xiàn)及應(yīng)用場(chǎng)景詳解
vue結(jié)合el-table實(shí)現(xiàn)表格行拖拽排序(基于sortablejs)
vue項(xiàng)目拍照或上傳圖片并實(shí)現(xiàn)轉(zhuǎn)化為base64格式
Vue3中ref和reactive的區(qū)別及說(shuō)明
vue項(xiàng)目使用js監(jiān)聽瀏覽器關(guān)閉、刷新、后退事件實(shí)現(xiàn)方法
vue項(xiàng)目fetch本地PAG格式文件404 NotFound的解決
