整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
eXt-UI是什么？
NeXt UI 工具包是一個(gè)基于 HTML5/JavaScript 的網(wǎng)絡(luò) Web 應(yīng)用程序工具包。它提供了一個(gè)以網(wǎng)絡(luò)為中心的拓?fù)?UI 組件，具有高性能和豐富的功能。NeXt 可以顯示大型復(fù)雜網(wǎng)絡(luò)拓?fù)洹⒕酆暇W(wǎng)絡(luò)節(jié)點(diǎn)、流量/路徑/隧道/組可視化，它包括不同的布局算法、地圖疊加和預(yù)設(shè)的用戶友好交互。
---轉(zhuǎn)載自NeXt-UI的GItHub地址簡(jiǎn)介https://github.com/NeXt-UI/next-bower
雖然NeXt-UI已經(jīng)停止更新了，但是思科仍然在官網(wǎng)上花了很大篇幅展示這個(gè)模塊，這也正是我們要學(xué)習(xí)這個(gè)模塊的理由.
好了，話不多說(shuō)，開始正文部分吧。
首先我們需要在cisco網(wǎng)頁(yè)上down下NeXt-UI的文件包 https://d1nmyq4gcgsfi5.cloudfront.net/fileMedia/025dc509-8f2a-474a-b6d8-75e73ecbd6ac/NeXt_trial.zip
文件的架構(gòu)大概就是上面的那個(gè)類型，然后我們開始構(gòu)建拓?fù)渌枰奈募?/p>
一、新建一個(gè)index.html文件***/NEXTUI/js/next/css/next.css 這一塊地址可以寫相對(duì)路徑也可以寫絕對(duì)路徑
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="***/NEXTUI/js/next/css/next.css">
<script type="text/javascript" src="***/NEXTUI/js/next/js/next.js"></script>
</head>
<body>
這是一個(gè)新的NeXt-UI文件
</body>
</html>
二、更改app.js的配置，這個(gè)是調(diào)用data.js的文件，一般無(wú)需更改
(function(nx){
// instantiate NeXt app
var app=new nx.ui.Application();
// configuration object for next
var topologyConfig={
// special configuration for nodes
"nodeConfig": {
"label": "model.name",
"iconType": "router"
},
// special configuration for links
"linkConfig": {
"linkType": "curve",
},
// if true, the nodes' icons are shown, otherwise a user sees a dot instead
"showIcon": true,
// automatically compute the position of nodes
"dataProcessor": "force",
"width": 1920,
"height": 1080,
};
// instantiate Topology class
var topology=new nx.graphic.Topology(topologyConfig);
// load topology data from app/data.js
topology.data(topologyData);
// bind the topology object to the app
topology.attach(app);
// app must run inside a specific container. In our case this is the one with id="topology-container"
app.container(document.getElementById("topology-container"));
})(nx);
三、更改data.js的路徑，這邊就是寫的設(shè)備的一些信息，主要分為三個(gè)部分nodes、links、nodeSet
ndoes:代表某一個(gè)設(shè)備，里面的內(nèi)容都是設(shè)備的相關(guān)信息。
links：代表哪幾個(gè)設(shè)備相關(guān)聯(lián)，分為source和target
nodeSet；代表哪幾個(gè)設(shè)備為一個(gè)分組。一個(gè)分組可以在頁(yè)面展示為一個(gè)設(shè)備，需要時(shí)可以展開
配置如下
var topologyData={
nodes: [
{
"id": 0,
"name": "New York",
"mgmt_ip": "1.1.1.1",
"icon": "switch"
},
{
"id": 1,
"name": "Los Angeles",
"mgmt_ip": "1.1.1.2",
"icon": "router"
},
{
"id": 2,
"name": "Houston",
"mgmt_ip": "1.1.1.3"
},
{
"id": 3,
"name": "Beijing",
"mgmt_ip": "1.1.1.4"
}
],
links: [
{
"source": 0,
"target": 1
},
{
"source": 0,
"target": 2
},
{
"source": 0,
"target": 3
},
{
"source": 3,
"target": 2
}
],
nodeSet: [
{
"id": 4,
"nodes": [1,2]
}
],
};
現(xiàn)在我們只需要打開index.html文件即可看到網(wǎng)絡(luò)拓?fù)鋱D了
后面我們可以講一下如何使用nornir+NeXt-UI來(lái)自動(dòng)繪制拓?fù)?/p>
撲社3月30日?qǐng)?bào)道 （文：竇悅怡）
據(jù)統(tǒng)計(jì)，2013年全球?qū)⒂?0億手機(jī)瀏覽器支持HTML5，同時(shí)HTML Web開發(fā)者數(shù)量將達(dá)到200萬(wàn)。毫無(wú)疑問(wèn)，HTML5將成為未來(lái)5-10年內(nèi)，移動(dòng)互聯(lián)網(wǎng)領(lǐng)域的主宰者。
同時(shí)，據(jù)IDC的調(diào)查報(bào)告統(tǒng)計(jì)，截至2012年5月，有79%的移動(dòng)開發(fā)商已經(jīng)決定要在其應(yīng)有程序中整合HTML5技術(shù)。
拓?fù)渖缌私獾剑?014年Html5技術(shù)以跨平臺(tái)應(yīng)用，融合視頻等技術(shù)優(yōu)勢(shì)，逐漸顯現(xiàn)其未來(lái)web開發(fā)的趨勢(shì)。
而且，HTML5自身的多設(shè)備跨平臺(tái)特點(diǎn)也有利于品牌的傳播，用戶可以通過(guò)Html5頁(yè)面應(yīng)用生成器，以移動(dòng)展示作為切入點(diǎn)，幫助用戶像操作PPT一樣展示自己的創(chuàng)意，用戶通過(guò)PC端制作，在線使用模板，便可利用圖文、音樂(lè)、動(dòng)畫和視頻等多種形式制作個(gè)性化微場(chǎng)景，然后進(jìn)行分享。
因此，一些基于H5移動(dòng)營(yíng)銷的創(chuàng)業(yè)型公司應(yīng)運(yùn)而生，易企秀便是其中之一。易企秀是一個(gè)社會(huì)化營(yíng)銷服務(wù)平臺(tái)。2018年1月，易企秀完成B+輪6400萬(wàn)元融資，由東方富海領(lǐng)投，易企秀老股東寬帶資本、中網(wǎng)創(chuàng)投、金慧豐繼續(xù)跟投，B輪總計(jì)1.24億元。
近期，拓?fù)渖绮稍L到了易企秀的創(chuàng)始人黃金，與他聊聊H5社會(huì)化營(yíng)銷這件事，以及易企秀的閉環(huán)生態(tài)布局背后的思考。
“外界對(duì)易企秀的定義有的是H5制作公司，有的是營(yíng)銷公司，您怎么看這種爭(zhēng)議？”采訪的開始，拓?fù)渖缃o黃金拋出這樣的問(wèn)題。
黃金很坦誠(chéng)地告訴拓?fù)渖纾琀5與營(yíng)銷是兩個(gè)概念，兩種分類，不過(guò)兩者很難界定開來(lái)。H5最初只是代表一種語(yǔ)言，現(xiàn)在已經(jīng)發(fā)展成一種展現(xiàn)形式；而營(yíng)銷是一個(gè)很寬泛的概念，無(wú)論是CRM營(yíng)銷，還是制作物料，以廣告形式展現(xiàn)推廣內(nèi)容，這些都是營(yíng)銷，在這種情況下兩者就存在交集了。
“這樣一來(lái)，很難界定易企秀到底是H5制作公司還是營(yíng)銷公司，但是我們最初的想法就是，先確定誰(shuí)是易企秀的用戶，他們最痛的點(diǎn)是什么，我們就為他們解決問(wèn)題。現(xiàn)在易企秀的用戶定義的很清楚，就是中小企業(yè)。”
拓?fù)渖缌私獾剑谶^(guò)去，企業(yè)專注于產(chǎn)品生產(chǎn)，在對(duì)外傳播渠道上是缺少能力的，而現(xiàn)在就不同了，微信類社交產(chǎn)品的發(fā)展，為企業(yè)營(yíng)銷提供了自我營(yíng)銷成長(zhǎng)的土壤。
在這樣的環(huán)境下，如果企業(yè)自己不提高對(duì)外營(yíng)銷能力，將市場(chǎng)營(yíng)銷的命脈托付于第三方服務(wù)公司，弱肉強(qiáng)食的商業(yè)環(huán)境下，這將會(huì)是這家公司的災(zāi)難。
但是，對(duì)于中小企業(yè)而言，要想做一個(gè)在線宣傳資料，需要很多專業(yè)的美工、設(shè)計(jì)師一起配合，同時(shí)整個(gè)制作包含域名、備案、上傳，復(fù)雜等環(huán)節(jié)，操作繁雜，成本高，效率低。
針對(duì)這些問(wèn)題，易企秀以H5技術(shù)為切入點(diǎn)，為中小企業(yè)提供包含場(chǎng)景制作、展示互動(dòng)、數(shù)據(jù)收集、客戶管理、二次營(yíng)銷的閉環(huán)營(yíng)銷服務(wù)。
其實(shí)，最初易企秀從H5制作起家，逐漸向企業(yè)內(nèi)容創(chuàng)意平臺(tái)，拓展到后端廣告渠道，推送廣告等業(yè)務(wù)，再通過(guò)后臺(tái)的SaaS系統(tǒng)收集用戶數(shù)據(jù)，沉淀數(shù)據(jù)庫(kù)，分析用戶的行為，進(jìn)行二次營(yíng)銷，達(dá)成一個(gè)閉環(huán)的營(yíng)銷服務(wù)模式。
黃金表示，一切業(yè)務(wù)布局的邏輯都是圍繞用戶的需求進(jìn)行拓展。一切圍繞用戶痛點(diǎn)來(lái)展開，先滿足痛點(diǎn)，產(chǎn)品功能可用。再改進(jìn)使用體驗(yàn)，讓用戶使用起來(lái)簡(jiǎn)單。最后滿足用戶的視覺(jué)享受，讓這個(gè)產(chǎn)品看起來(lái)很高大上。
“用戶需要什么，我們恰好能夠提供這些服務(wù)，進(jìn)而可以拓展相關(guān)業(yè)務(wù)；如果我們提供的服務(wù)，不是用戶所需要的，這就得不償失了，就會(huì)與用戶產(chǎn)生隔斷，始終跨越不過(guò)去。”
在產(chǎn)品布局上，易企秀采用的是一種雙邊模式，具體來(lái)說(shuō)就是，基于易企秀SaaS模式編輯器系統(tǒng)，一邊接入易企秀商城，商城里會(huì)對(duì)接各種素材模板，這些模板會(huì)有大量的素材供應(yīng)商、模板設(shè)計(jì)師提供。
另一邊接入的是企業(yè)端用戶，用戶既可以選擇適合自己宣傳模式的模板，也可以根據(jù)自己的需求，選擇合適的模板素材，在易企秀的編輯平臺(tái)進(jìn)行編輯。
據(jù)悉，在商城的素材供應(yīng)商選擇方面，易企秀都是選擇各個(gè)領(lǐng)域的領(lǐng)先平臺(tái)。例如，易企秀與方正、漢儀、騰祥、天音在線、松巴音樂(lè)、視覺(jué)中國(guó)、高品圖像、蚊子動(dòng)漫等十幾家涵蓋字體、圖片、音樂(lè)等全品類設(shè)計(jì)素材廠商。
黃金告訴拓?fù)渖纾灼笮銜?huì)專門設(shè)有素材審核人員，對(duì)素材供應(yīng)商提供的素材依據(jù)標(biāo)準(zhǔn)進(jìn)行審查，也會(huì)對(duì)為用戶提供服務(wù)的過(guò)程進(jìn)行監(jiān)控。
而素材選擇的標(biāo)準(zhǔn)主要有三點(diǎn)，第一，簡(jiǎn)單易用。用戶拿到模板后容易上手使用。第二，創(chuàng)新性。供應(yīng)商提供的素材必須有創(chuàng)新性，不能與庫(kù)的素材有雷同。第三，要保證素材的版權(quán)。
在具體的服務(wù)流程上，黃金戲稱是“建推管再”，打造閉環(huán)營(yíng)銷模式。首先，易企秀通過(guò)H5幫助用戶在線制作宣傳素材，以微信朋友圈的形式病毒式推廣，加強(qiáng)企業(yè)與消費(fèi)者的互動(dòng)性。其次，用戶通過(guò)易企秀提供的付費(fèi)流量（包涵朋友圈廣告、本地朋友圈廣告、公眾號(hào)廣告等社交類平臺(tái)流量），增加H5曝光量。
再次，易企秀把H5傳播后獲取的數(shù)據(jù)收集到自己的管理系統(tǒng)，進(jìn)行數(shù)據(jù)沉淀，再用數(shù)據(jù)化的技術(shù)手段對(duì)其進(jìn)行監(jiān)控、分析，以表單的形式反饋給用戶，指導(dǎo)他們進(jìn)行二次投放，進(jìn)而形成一個(gè)閉環(huán)模式。
這樣，易企秀不僅為用戶提供大量的案例、模板，設(shè)計(jì)器支持自由的拖拽，用戶可輕松上手，實(shí)現(xiàn)自己的營(yíng)銷創(chuàng)意。
用戶還可自定義場(chǎng)景中的動(dòng)態(tài)效果，注重交互體驗(yàn)。場(chǎng)景應(yīng)用推廣方面，他們提供了社會(huì)化分享渠道及效果追蹤，讓中小企業(yè)去自己發(fā)現(xiàn)哪些渠道效果好、哪些場(chǎng)景效果好，從而改善營(yíng)銷設(shè)計(jì)方案。
黃金坦言，目前易企秀只是完成了一個(gè)小閉環(huán)，初步建立一個(gè)小生態(tài)園，未來(lái)會(huì)在產(chǎn)品里加入更多的技術(shù)手段，使其編輯系統(tǒng)更加智能化、模版眾包化、服務(wù)輕量化。未來(lái)會(huì)開放編輯器能力，提供API接口，讓更多行業(yè)伙伴使用易企秀的編輯能力為用戶服務(wù)。
在盈利模式上，易企秀主要有三方面盈利來(lái)源，對(duì)于B端采取免費(fèi)+增值服務(wù)的模式，高級(jí)會(huì)員，易企秀會(huì)提供培訓(xùn)、審核，CDN加速等增值服務(wù)。
對(duì)于供應(yīng)商端，易企秀在產(chǎn)業(yè)鏈上游對(duì)接大量的正版素材源，包括字體、圖片、音樂(lè)等，企業(yè)可以按需購(gòu)買。
在產(chǎn)業(yè)鏈下游對(duì)接名片天下等印刷廠制作宣傳材料，為其進(jìn)行流量推廣，易企秀收取服務(wù)費(fèi)。此外在線上也可以幫助企業(yè)擴(kuò)大推廣范圍，提供精準(zhǔn)的數(shù)據(jù)分析，精準(zhǔn)營(yíng)銷等服務(wù)。
據(jù)悉，易企秀目前已有3000多萬(wàn)的企業(yè)用戶，累計(jì)設(shè)計(jì)師（秀客）10萬(wàn)名，供應(yīng)商幾十家，平臺(tái)營(yíng)收能力已經(jīng)進(jìn)入快速增長(zhǎng)期。
日常項(xiàng)目建設(shè)和實(shí)施過(guò)程中，經(jīng)常會(huì)遇到類似數(shù)據(jù)可視化的實(shí)現(xiàn)場(chǎng)景。對(duì)于數(shù)據(jù)可視化已經(jīng)從簡(jiǎn)單的統(tǒng)計(jì)圖表展現(xiàn)，擴(kuò)展到類似監(jiān)控大屏，拓?fù)鋱D，流程編排圖，集成架構(gòu)圖等方面的呈現(xiàn)。而這些往往不是簡(jiǎn)單的使用圖表就能夠解決的。
因此今天總結(jié)下對(duì)于數(shù)據(jù)可視化和圖形繪制方面的工具整理。
推薦首先閱讀知乎的關(guān)于有哪些可視化工具推薦的回答，內(nèi)容已經(jīng)相當(dāng)全面了
https://www.zhihu.com/question/19929609
要注意的是當(dāng)前主流的仍然是基于javasrcirpt開發(fā)的圖表庫(kù)，對(duì)于偏重的flex不應(yīng)該作為選擇的基礎(chǔ)。下面對(duì)一些選擇的思路做些簡(jiǎn)單的說(shuō)明。
首先可選的主流圖表庫(kù)包括了百度的Echart，Highchart，D3.js這三個(gè)。
這三個(gè)可視化圖表庫(kù)的使用客戶也相當(dāng)多，能夠應(yīng)對(duì)的常見可視化場(chǎng)景也足夠。對(duì)于百度的Echart又推出有新的V4.0版本，雖然支撐的圖表擴(kuò)展沒(méi)有大的變化，但是在性能上有明顯改進(jìn)。當(dāng)然從支持的圖表類型種類和開放性來(lái)談，最強(qiáng)大的還是D3.js，但是前面兩種已經(jīng)能夠基本滿足實(shí)際的圖表層面使用的需要。
對(duì)于百度Echart，對(duì)里面的關(guān)系圖做了詳細(xì)分析后，實(shí)際上沒(méi)有找到用來(lái)做網(wǎng)絡(luò)拓?fù)鋱D的工具，系統(tǒng)集成關(guān)系圖的組件。當(dāng)然百度Echart里面有的關(guān)系圖，桑基圖，地圖，熱力圖遷徙圖，矩陣圖，日歷圖，樹圖等功能已經(jīng)足夠強(qiáng)大。
采用百度Echart也很容易自己來(lái)實(shí)現(xiàn)類似監(jiān)控大屏這種前端應(yīng)用。
對(duì)于網(wǎng)絡(luò)關(guān)系圖，在可視化里面常見的一種類型，其中主流的應(yīng)該是Gephi，Gephi是一款開源免費(fèi)跨平臺(tái)基于JVM的復(fù)雜網(wǎng)絡(luò)分析軟件, 其主要用于各種網(wǎng)絡(luò)和復(fù)雜系統(tǒng)，動(dòng)態(tài)和分層圖的交互可視化與探測(cè)開源工具。其次是R語(yǔ)言中的iGraph和networkD3包，功能也足夠強(qiáng)大。還有就是基于python語(yǔ)言實(shí)現(xiàn)的networkx，是專門進(jìn)行網(wǎng)絡(luò)可視化呈現(xiàn)的一個(gè)小工具。
Gephi地址和例子參考：https://gephi.org/
對(duì)于商用的圖表和可視化工具當(dāng)然是Tableau，據(jù)Gartner魔力象限，2014年的測(cè)評(píng)，tableau可執(zhí)行速度最快，整體市場(chǎng)表現(xiàn)也在前列。在Tableau官方網(wǎng)站可以免費(fèi)下載到桌面試用版進(jìn)行試用。
如果僅僅是提供常用的畫圖API接口，自己完全根據(jù)需要繪制SVG渲染圖，對(duì)于這種場(chǎng)景你仍然可以選擇Echart和Highcharts來(lái)實(shí)現(xiàn)，在官方網(wǎng)站也有制作SVG渲染圖的例子。
當(dāng)然還有一類即經(jīng)常用于網(wǎng)管類，日志類監(jiān)控分析的前端圖表展示軟件，在ELK日志分析系統(tǒng) Logstash+ElasticSearch+Kibana4里面會(huì)使用Kibana4進(jìn)行前端圖表展現(xiàn)。
Grafana是另外一個(gè)基于JavaScript的前端展示工具，Grafana provides a powerful and elegant way to create, explore, and share dashboards and data with your team and the world。對(duì)于Grafana支持Graphite, Elasticsearch, Prometheus, InfluxDB, OpenTSDB and KairosDB各種數(shù)據(jù)采集源。
對(duì)于Grafana當(dāng)前和類似InfluxDB時(shí)序數(shù)據(jù)庫(kù)結(jié)合的很緊密，可以很容易是基于時(shí)序數(shù)據(jù)的可視化圖表展示，包括當(dāng)前在Kurbernetes里面用的很多的Prometheus監(jiān)控方案，仍然是基于時(shí)序數(shù)據(jù)庫(kù)和Grafana來(lái)實(shí)現(xiàn)資源性能監(jiān)控。
Grafana的官方地址：https://grafana.com/
最后說(shuō)下Processing，功能相當(dāng)強(qiáng)大，但是要有一定的開發(fā)基礎(chǔ)和學(xué)習(xí)門檻，Processing 在 2001 年誕生于麻省理工學(xué)院（MIT）的媒體實(shí)驗(yàn)室，主創(chuàng)者為 Ben Fry 和 Casey Reas，當(dāng)然還有來(lái)自 Carnegie Mellon、洛杉磯的加利福尼亞大學(xué)以及邁阿密大學(xué)等的貢獻(xiàn)。
具體例子可以參考：https://processing.org/examples/
數(shù)據(jù)可視化和圖表僅僅是前端呈現(xiàn)的工具，對(duì)于數(shù)據(jù)可視化最重要的還是首先要搞清楚你當(dāng)前有哪些數(shù)據(jù)，數(shù)據(jù)本身的結(jié)構(gòu)和數(shù)據(jù)間關(guān)系是如何的？其次搞清楚數(shù)據(jù)呈現(xiàn)的場(chǎng)景和模式，其次才是呈現(xiàn)問(wèn)題。
對(duì)于ESB服務(wù)總線，特別是涉及到兩級(jí)架構(gòu)集成的時(shí)候，采用類似拓?fù)鋱D的可視化思路來(lái)進(jìn)行集成架構(gòu)和部署架構(gòu)圖的可視化是一個(gè)可選的方案。基于拓?fù)鋱D可視化為關(guān)鍵字搜索，搜索到兩個(gè)可視化工具軟件，雖然都是付費(fèi)軟件，但是對(duì)于拓?fù)鋱D，部署架構(gòu)，集成關(guān)系圖等方面的展示能力還是相當(dāng)強(qiáng)。
TWaver工具：http://www.servasoft.com/
TWaver關(guān)注于數(shù)據(jù)的圖形展示，它是面向開發(fā)人員的，需要進(jìn)行二次開發(fā)。
TWaver的圖形組件庫(kù)中提供了拓?fù)浣M件、地圖組件、設(shè)備圖組件，以及表格、樹圖、屬性表、圖表等豐富的通用圖形界面組件，為電信運(yùn)營(yíng)支撐系統(tǒng)（OSS）的開發(fā)提供“一站式”的組件產(chǎn)品和解決方案，是快速設(shè)計(jì)、開發(fā)和部署OSS的利器。
可以看到TWaver本身的功能相對(duì)強(qiáng)大，完全可以勝任復(fù)雜的資源拓?fù)鋱D的設(shè)計(jì)，但是如果僅僅用于拓?fù)鋱D展示的話有點(diǎn)大材小用。
對(duì)于TWaver，實(shí)際上可以看到對(duì)于數(shù)據(jù)中心資源和資產(chǎn)的全三維可視化建模是另外一個(gè)做的相當(dāng)好的地方。這個(gè)軟件可以實(shí)現(xiàn)數(shù)據(jù)中心內(nèi)所有設(shè)備對(duì)象的虛擬仿真，以完全3D模式構(gòu)建整個(gè)數(shù)據(jù)中心環(huán)境，并將數(shù)據(jù)中心內(nèi)的監(jiān)控子系統(tǒng)，如視頻、動(dòng)環(huán)、門禁等，納入到可視化機(jī)房管理平臺(tái)中來(lái)，實(shí)時(shí)分析查看監(jiān)控信息。 軟件采用B/S架構(gòu)，無(wú)需安裝任何插件即可在瀏覽器中流暢漫游數(shù)據(jù)中心三維場(chǎng)景,實(shí)現(xiàn)數(shù)據(jù)中心級(jí)、機(jī)房級(jí)、機(jī)柜級(jí)、設(shè)備級(jí)和端口級(jí)管理和監(jiān)控。
類似下圖：
Qunee工具：http://qunee.com/
Qunee是一套基于HTML5的網(wǎng)絡(luò)圖組件。其使用HTML5 Canvas技術(shù)，繪制清新、流暢的網(wǎng)絡(luò)圖，可用于社交網(wǎng)絡(luò)圖、拓?fù)鋱D、流程圖、地圖等需求， JS組件封裝，藏繁瑣于簡(jiǎn)潔，輕松構(gòu)建優(yōu)雅的互聯(lián)網(wǎng)應(yīng)用與企業(yè)應(yīng)用，讓數(shù)據(jù)的在線可視化變得容易。
在網(wǎng)站上有詳細(xì)的例子可以參考，可以看到Qunee相對(duì)來(lái)說(shuō)輕量些，用于實(shí)現(xiàn)一些簡(jiǎn)單的網(wǎng)絡(luò)拓?fù)洌杉軜?gòu)圖展示完全可以滿足去。
類似上圖，可以很方便的通過(guò)Qunee提供的可視化設(shè)計(jì)工具實(shí)現(xiàn)。
基于這些可視化拓?fù)湓O(shè)計(jì)工具，結(jié)合ESB服務(wù)總線集成實(shí)際的集成場(chǎng)景來(lái)說(shuō)，初步考慮可以應(yīng)用的點(diǎn)包括如下。
1. 實(shí)現(xiàn)兩級(jí)架構(gòu)的拓?fù)鋱D效果展示和接口服務(wù)集成監(jiān)控。
布局原來(lái)一直太強(qiáng)調(diào)結(jié)合地圖進(jìn)行展示，實(shí)際上效果并不一定太好。這里可以直接自己定義布局模式，初步想法就是中心為集團(tuán)，四邊方框來(lái)線上各個(gè)省或子公司。形成完整的兩級(jí)集團(tuán)展示效果。這種展示方式也方便直接線上到大屏上去。
2. 對(duì)于當(dāng)前ESB平臺(tái)本身的資源和服務(wù)狀態(tài)監(jiān)控可視化
這套可視化工具很容易實(shí)現(xiàn)這點(diǎn)，我們只需要先可視化的設(shè)計(jì)出部署架構(gòu)布局，然后再將實(shí)際對(duì)數(shù)據(jù)庫(kù)，應(yīng)用中間件資源，包括服務(wù)運(yùn)行的各種狀態(tài)信息，異常信息直接顯示到整體部署邏輯架構(gòu)圖上即可。這樣可以更加可視化的監(jiān)控到資源當(dāng)前的運(yùn)行狀態(tài)和異常發(fā)生情況。
3. 服務(wù)集成架構(gòu)展示
在最早我們做自研ESB產(chǎn)品的時(shí)候，采用Flash實(shí)現(xiàn)了一個(gè)集成架構(gòu)的展示效果，但是整體效果并不是很好。而通過(guò)這套可視化工具，可以用來(lái)實(shí)現(xiàn)這種集成架構(gòu)的效果展示。同時(shí)可以展示出兩級(jí)架構(gòu)的集成效果。即可以分層展開效果。
集成架構(gòu)不需要提前進(jìn)行設(shè)計(jì)，而是需要在后臺(tái)提取了集成關(guān)系后，自動(dòng)進(jìn)行拓?fù)渖珊妥詣?dòng)化布局。集成架構(gòu)中的連線可以用來(lái)表示當(dāng)前系統(tǒng)間的接口服務(wù)連通性和接口服務(wù)調(diào)用流量等信息。但是上圖實(shí)際上離我們需要的集成架構(gòu)圖可視化設(shè)計(jì)仍然有具體，具體見后面集成架構(gòu)圖設(shè)計(jì)部分的一些思考。
4. 端到端流程監(jiān)控可視化設(shè)計(jì)
基于服務(wù)間的集成關(guān)系和調(diào)用先后順序來(lái)實(shí)現(xiàn)端到端的流程監(jiān)控，這個(gè)我在博客前面多次提到，也一直在尋找比較好的前端設(shè)計(jì)工具來(lái)做。比如對(duì)我們已有的流程平臺(tái)流程建模工具前端進(jìn)行適度改進(jìn)來(lái)支持等。
對(duì)于這類需求也可以用前面提到的工具來(lái)實(shí)現(xiàn)，先進(jìn)行端到端監(jiān)控流程圖的設(shè)計(jì)，然后在進(jìn)行運(yùn)行展示。其中最主要的還是在運(yùn)行態(tài)的各類信息，比如運(yùn)行狀態(tài)，數(shù)量，是否有異常等是否很容易疊加到已有的設(shè)計(jì)圖上。只要能夠解決這個(gè)問(wèn)題，那么就能夠很好的應(yīng)用到端到端流程監(jiān)控的可視化設(shè)計(jì)中。
對(duì)于集成架構(gòu)圖的繪制一直是我關(guān)注的一個(gè)點(diǎn)，也看了類似百度Echart，D3和HighChart等，基本都沒(méi)有發(fā)現(xiàn)適合用來(lái)做類似集成架構(gòu)圖繪制的工具。同時(shí)集成架構(gòu)圖往往都不是自動(dòng)繪制，而需要提前進(jìn)行集成架構(gòu)的圖形布局設(shè)計(jì)，布局好后才能夠用JS去繪制。
因此更多我們需要的是一個(gè)JS繪圖工具庫(kù)，能夠匯總線條，矩陣，圓等基礎(chǔ)圖形形狀即可。我們可以看下一個(gè)簡(jiǎn)單的集成架構(gòu)圖，經(jīng)過(guò)設(shè)計(jì)排版后布局可能如下：
對(duì)于這類圖可以看到實(shí)際上各類可視化圖表庫(kù)并不太容易實(shí)現(xiàn)。原來(lái)我們采用過(guò)Flash來(lái)進(jìn)行集成架構(gòu)圖的繪制，但是Flash相對(duì)偏重不太合適。因此還是需要找一個(gè)JS繪圖庫(kù)來(lái)實(shí)現(xiàn)這種簡(jiǎn)單的集成架構(gòu)圖的繪制工作。
基于這個(gè)思路我們?cè)诰W(wǎng)上找了下比較好的一些JS繪制工具庫(kù)。
jsPlumb開源流程圖繪制工具庫(kù)
那么如果你應(yīng)該使用它取決于你想用jsPlumb做什么。該框架適用于必須繪制圖表的Web應(yīng)用程序，例如類似于Visio的應(yīng)用程序或工作流程設(shè)計(jì)器等。由于圖表項(xiàng)目和連接的所有參數(shù)都是非常精細(xì)可控的，因此您可以繪制您可以想到的任何類型的圖表。
該開源庫(kù)的GitHub地址為：https://github.com/wangduanduan/jsplumb-chinese-tutorial
在該地址也有詳細(xì)的中文使用教程，根據(jù)教程的一些截圖可以看到，該工具庫(kù)很適合用來(lái)繪制我們上面的集成架構(gòu)圖，因?yàn)檫@種圖本身也就是形狀和線條的一些簡(jiǎn)單組合，而且來(lái)拖拽功能都不需要。
當(dāng)然基于該工具庫(kù)，我們也可以用來(lái)實(shí)現(xiàn)更加復(fù)雜的集成架構(gòu)圖，即將兩個(gè)業(yè)務(wù)系統(tǒng)間的所有關(guān)鍵集成接口全部以連線的方式表示出來(lái)。這種集成架構(gòu)圖也是無(wú)法自動(dòng)生成，需要首先進(jìn)行整體部版設(shè)計(jì)，然后再通過(guò)jsPlumb工具庫(kù)進(jìn)行繪制即可。
如果要連接多條線條，需要整個(gè)節(jié)點(diǎn)作為source或者target， 并且將錨點(diǎn)設(shè)置成Continuous，那么錨點(diǎn)就會(huì)隨著節(jié)點(diǎn)的位置改變而改變自己的位置。這個(gè)功能特性可以很方便我進(jìn)行多線條設(shè)置。
注意在這個(gè)網(wǎng)址，https://jsplumbtoolkit.com/community/doc/anchors.html， 這個(gè)工具庫(kù)是存在License費(fèi)用的，因此如果這個(gè)工具庫(kù)用于商業(yè)用途，按道理會(huì)涉及到License的購(gòu)買問(wèn)題。
一篇關(guān)于該工具庫(kù)的使用參考：https://www.cnblogs.com/xcj26/p/9870734.html
另外一個(gè)用該工具庫(kù)實(shí)現(xiàn)的流程設(shè)計(jì)器和表單設(shè)計(jì)器： http://formdesign.leipi.org/
付費(fèi)JS繪制工具庫(kù)：GoJS
GoJS是一套基于JavaScript的付費(fèi)圖形繪制工具庫(kù)，地址：https://gojs.net/latest/index.html
這套工具庫(kù)有免費(fèi)版本，也有收費(fèi)版本，收費(fèi)版本比jsPlumb工具庫(kù)來(lái)說(shuō)就強(qiáng)大了很多，特別是動(dòng)態(tài)Port圖和動(dòng)態(tài)分組圖，這兩個(gè)用來(lái)繪制我們集成架構(gòu)圖，應(yīng)用架構(gòu)圖等都相當(dāng)有用。
所有Demo演示地址參考：https://gojs.net/latest/samples/regrouping.html
JointJS工具庫(kù)
這個(gè)也是常用的繪圖工具庫(kù)，地址在：https://www.jointjs.com/
這個(gè)庫(kù)官方介紹的例子都感覺(jué)比較重，而實(shí)際其它搜索到的一些使用介紹來(lái)看，用于簡(jiǎn)單從集成架構(gòu)圖，流程圖類繪制還是沒(méi)有太大問(wèn)題的。基本還是標(biāo)準(zhǔn)的新建畫板，畫布，然后進(jìn)行各種圖形的定義和繪制。
jointJS是一個(gè)基于svg的圖形化工具庫(kù)，在畫布上畫出支持拖動(dòng)的svg圖形，而且可以導(dǎo)出JSON，也能通過(guò)JSON配置導(dǎo)入直接生成圖形。由于這個(gè)工具庫(kù)是基于SVG的，因此也不太推薦使用。
一篇使用參考：https://segmentfault.com/a/1190000015972176
Quick V 是一套數(shù)據(jù)可視化大屏展示方案。在大數(shù)據(jù)時(shí)代，Quick V 將數(shù)據(jù)全面、直觀地呈現(xiàn)在用戶眼前，幫助管理者在面臨業(yè)務(wù)復(fù)雜度的急劇變化時(shí)，即刻擁有海量有序的決策支持信息，滿足會(huì)議展覽、業(yè)務(wù)監(jiān)控、風(fēng)險(xiǎn)預(yù)警、地理信息分析等多種業(yè)務(wù)的展示需求。
參考：http://www.uileader.com/quickui_display.html
大家可以先看下上面這個(gè)大屏可視化效果，感覺(jué)整體還是做的相當(dāng)不錯(cuò)。這個(gè)工具本身商用收費(fèi)，比較好的就是對(duì)于我們常見的大屏監(jiān)控已經(jīng)固化為各種模板，基本都可以直接使用。
基于百度Echart自己實(shí)現(xiàn)可配置的監(jiān)控大屏
在前面我也談到，實(shí)際上對(duì)于監(jiān)控大屏實(shí)現(xiàn)，當(dāng)前我們完全可以采用百度Echart來(lái)定制實(shí)現(xiàn)，而這篇文章主要想談下如何對(duì)監(jiān)控大屏可視化做到靈活可配置。
首先我們看到監(jiān)控大屏可視化，實(shí)際上跟我們前面談到的自定義報(bào)表相當(dāng)類似，其核心仍然是單面板設(shè)計(jì)，多面板組合。基于這個(gè)思路我們逐一展開進(jìn)行描述。
在講自定義報(bào)表的時(shí)候，我們單面板設(shè)計(jì)數(shù)據(jù)集和實(shí)際的數(shù)據(jù)呈現(xiàn)是耦合在一起的，而實(shí)際上更好的思路是數(shù)據(jù)集和數(shù)據(jù)呈現(xiàn)進(jìn)行分離。基于這個(gè)思路，逐一展開講關(guān)鍵功能點(diǎn)實(shí)現(xiàn)。
數(shù)據(jù)集設(shè)計(jì)
數(shù)據(jù)源定義，對(duì)于數(shù)據(jù)源定義，最好也進(jìn)行獨(dú)立，一個(gè)報(bào)表前端呈現(xiàn)本身也可能涉及到多個(gè)數(shù)據(jù)源。數(shù)據(jù)集設(shè)計(jì)，即返回一個(gè)二維的數(shù)據(jù)集合，可以有多列。我們需要通過(guò)配置的方式來(lái)實(shí)現(xiàn)，即首先選擇數(shù)據(jù)源，然后自定義Sql語(yǔ)句，然后返回具體的數(shù)據(jù)集對(duì)象。在sql過(guò)程中我們可以對(duì)字段標(biāo)題名稱等進(jìn)行轉(zhuǎn)義。
更加解耦的方法是數(shù)據(jù)集可以直接選擇具體的WS服務(wù)，由服務(wù)返回一個(gè)二維的數(shù)據(jù)集對(duì)象。這種方式可以進(jìn)一步實(shí)現(xiàn)報(bào)表平臺(tái)和底層數(shù)據(jù)庫(kù)的解耦。
單面板設(shè)計(jì)
單面板設(shè)計(jì)簡(jiǎn)單來(lái)說(shuō)就是將前端的呈現(xiàn)方式，究竟是折線圖，餅圖還是雷達(dá)圖等，和后端的數(shù)據(jù)集進(jìn)行綁定。在這個(gè)過(guò)程中重點(diǎn)是要確認(rèn)具體的圖表呈現(xiàn)的一些關(guān)鍵配置，包括X，Y軸顯示，圖表名稱，圖例是否顯示等關(guān)鍵配置，都需要在單面板設(shè)計(jì)的是配置完成。
單面板設(shè)計(jì)完成后，最好提供預(yù)覽功能按鈕，可以馬上體驗(yàn)到單面板展示的效果。
大屏設(shè)計(jì)
對(duì)于大屏設(shè)計(jì)，實(shí)際上里面有幾個(gè)關(guān)鍵點(diǎn)，首先就是大屏展示需要有一個(gè)CSS模板，這個(gè)模板決定了所有的單面板圖表的配色風(fēng)格，包括具體的底色，前端的色系選擇等。選擇模板就是確保最終的大屏展示各個(gè)單面板風(fēng)格能夠完全保持一致。
大屏版面設(shè)計(jì)，仍然采用標(biāo)準(zhǔn)的Grid布局模式即可，可以看到所有的大屏展示基本都采用Grid布局模式。每個(gè)單面板你唯一要確定的就是橫向跨幾行，縱向跨幾列即可。類似上面的圖，我們采用4*4Grid進(jìn)行布局，中間的地圖展示則是橫向跨3行，縱向跨兩列。
大屏整體的展示動(dòng)態(tài)刷新能力
在以上設(shè)計(jì)完成后，我們整個(gè)大屏展示效果也就出來(lái)了。在該大屏設(shè)計(jì)中我們沒(méi)有考慮動(dòng)態(tài)查詢功能。但是大屏監(jiān)控仍然需要?jiǎng)討B(tài)進(jìn)行刷新。因此在設(shè)計(jì)大屏的時(shí)候需要具備動(dòng)態(tài)刷新能力，為了考慮后續(xù)具備一定的擴(kuò)展性，我們需要能夠?qū)㈥P(guān)鍵的一些變量參數(shù)傳遞到圖表展示中。
最關(guān)鍵的參數(shù)就是當(dāng)前時(shí)間，當(dāng)前的時(shí)間需要能夠傳遞到每一個(gè)數(shù)據(jù)集Sql中，方便我們根據(jù)時(shí)間進(jìn)行數(shù)據(jù)過(guò)濾。同時(shí)對(duì)于大屏我們需要配置定時(shí)刷新頻率，基于該頻率對(duì)展示內(nèi)容進(jìn)行動(dòng)態(tài)刷新。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
