Vue2 添加數(shù)據(jù)可視化支持的方法步驟
安裝
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啟動前可以有多項(xiàng)配置，用以針對具體開發(fā)環(huán)境進(jìn)行調(diào)整或加強(qiáng)，上面我們加強(qiáng)了選擇器功能，因此，你可能還需要安裝sizzle:
npm install --save sizzle
使用
現(xiàn)在，就可以對照api使用這個庫了，舉例子：
比如修改entry.js里面的方法：
1.首先在開頭導(dǎo)入：
import clay from './clay.js';
2.在需要的地方使用：
el: clay('#root')[0],
使用組件
首先，我們?nèi)ソM件庫中復(fù)制一個組件過來，組件倉庫地址：
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
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue使用自定義的icon圖標(biāo)的方法,非常不錯，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-05-05
這篇文章主要介紹了 詳解在vue使用weixin-js-sdk常見使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
vue+epubjs實(shí)現(xiàn)電子書閱讀器的基本功能
這篇文章主要為大家詳細(xì)介紹了如何使用vue+epubjs實(shí)現(xiàn)電子書閱讀器的基本功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11
defineProperty和Proxy基礎(chǔ)功能及性能對比
這篇文章主要為大家介紹了defineProperty和Proxy基礎(chǔ)功能及性能對比，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
Vue數(shù)據(jù)更新頁面卻沒有更新的幾種情況以及解決方法
我們在開發(fā)過程中會碰到數(shù)據(jù)更新,但是頁面卻沒有更新的情況,下面這篇文章主要給大家介紹了關(guān)于Vue數(shù)據(jù)更新頁面卻沒有更新的幾種情況以及解決方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
這篇文章主要為大家介紹了解決安裝arco-design-pro-vue失敗的問題方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
van-dialog彈窗異步關(guān)閉功能-校驗(yàn)表單實(shí)現(xiàn)
有時候我們需要通過彈窗去處理表單數(shù)據(jù)，在原生微信小程序配合vant組件中有多種方式實(shí)現(xiàn)，其中UI美觀度最高的就是通過van-dialog嵌套表單實(shí)現(xiàn)，這篇文章主要介紹了van-dialog彈窗異步關(guān)閉-校驗(yàn)表單,需要的朋友可以參考下2023-11-11
最近有個項(xiàng)目需求就是在客戶端的右上角要實(shí)時展示提醒消息,下面這篇文章主要給大家介紹了關(guān)于Vue通知提醒框(Notification)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue路由傳參接收以及傳參對象為對象時的問題及解決，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
element el-tree組件的動態(tài)加載、新增、更新節(jié)點(diǎn)的實(shí)現(xiàn)
這篇文章主要介紹了element el-tree組件的動態(tài)加載、新增、更新節(jié)點(diǎn)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02