一入前端深似海，從此紅塵是路人系列第六彈之走進數據可視化

前言：

這篇文章我之前在開源中國就寫過一次，這次再次拿出來是因為前些日子我在新公司做的一個技術分享用的就是這個。這裡我也會做相對應的更新，希望可以幫助大家更多的了解數據可視化，了解數據可視化的開發是如何進行的。

一、開發模式

先上幾張關於單個組件配置及頁面承載組件的展示效果圖吧：

由於整體的開發模式是由MVC模式為主進行的開發，所以先簡單給小夥伴們介紹一下MVC模式吧

MVC 模式的英文名稱是 Model-View-Controller pattern，顧名思義，其主要部分為：

?模型（Model），整個模式中的數據層;

?視圖（View），模式中的數據展示層；

?控制器（Controller），處理並響應事件，監控模型變化，繼而修改視圖。

接下來我講帶領大家實現可視化組件拖拽載入

二、開發核心

1、主介面文件ec.js

var _MYCHART_ = _MYCHART_ || "" // echarts繪圖對象n , _OPTIONS_ = _OPTIONS_ || {}; // 存儲echarts數據全局對象n;(function($,doc,win){nvar EC = function(obj,opt){n this.obj = obj;n this.setting = {n echartObj: "", // 繪圖對象n option : null // 繪圖數據n };n $.extend(this.setting, opt);n // 初始化n this.init(this.setting);n};nEC.prototype = {n echarts : function(opt){n var self = this;n // 環境依賴n require.config({n paths:{n echarts : ./js/echarts/echartsn }n });n require([n echartsn ],function(ec) {n _MYCHART_ = ec.init(document.getElementById(opt.echartObj));n _MYCHART_.setOption(opt.option);n });n }n};nEC.prototype.init = function(opt){n this.echarts(opt);n}nwindow.EC = EC;nn})(jQuery,document,window);n

2、組件開發協議

a.組件公共樣式渲染協議

var _COMMON_ = {n // 標題n title : {n x:center,n y:top,n textStyle:{n fontSize:16,n color: #FFFn },n subtextStyle:{n fontSize:13n }n },n // 圖示n legend: {n show: true,n orient: vertical,n x: left,n y: top,n textStyle: {n color: #FFF,n fontSize: 13n },n },n // 提示框n tooltip: {n trigger: axis,n }nn }n

b.私有屬性渲染協議

// 餅圖n{n title : {n text: 組件配置測試版本,n subtext: 作者:強大大,n },n legend: {n data: [直接訪問, 郵件營銷, 聯盟廣告]n },n series: [n {n name: 訪問來源,n type: pie,n center: [50%, 50%],n radius: [30%, 45%],n itemStyle: {n normal: {n label: {n formatter: "{b}" + " : " + "{c} ( {d}% )",n },n labelLine: {n show: truen }n }n },n // 數據源n data: [n {n value: 335,n name: 直接訪問n },n {n value: 310,n name: 郵件營銷n },n {n value: 234,n name: 聯盟廣告n },n ]n }n ]n};nn// 折線圖n{n tooltip: {n show: truen },n title: {n text: 折線圖配置,n subtext: 作者:強大大n },n legend: {n data: [2015遷徙人數, 2016遷徙人數]n },n grid: {n x: 56,n y: 60,n x2: 60,n y2: 33,n },n xAxis: [{n type: category,n axisTick: {n show: falsen },n splitLine: false,n data: [1月, 2月, 3月, 4月, 5月, 6月, 7月, 8月, 9月, 10月, 11月, 12月],n axisLabel: {n textStyle: {n color: #b4effe,n fontSize: 10px,n margin: "15px"n }n }nt}],n yAxis: [{n type: value,n splitLine: false,n axisLabel: {n textStyle: {n color: #b4effe,n fontSize: 10px,n margin: "15px"n }n }nt}],nn series: [n {n name: 2015遷徙人數,n type: line,n data: [400, 600, 700, 1000, 1200, 1400, 1600, 1700, 1800, 1900, 2300, 2100]n t},{n name: 2016遷徙人數,n type: line,n data: [200, 400, 500, 900, 1000, 1200, 1300, 1400, 1500, 1600, 2000, 1800]nt }n ]nn}n

c.這裡如果需要開發自己獨立的組件，也有一套自己的渲染協議如下

// 文字數據集合卡片noption = {n type: textCard,n data: {n headerlines: 靜安區八號店,n maintitle: [n 小營業廳,n 小小營業廳n ],n subtitle: [n TX,n XTXn ],n times:{n tstartTime : 09:00,n tendTime : 18:00n }n }n}n// 一級標題noption = {nttype: titleContent,n common:1,ntdata: {ntttitle:2016年8月20日區域三4G發展量,nttinnerData:[Jason,Stencen,Steven]nt}n}n// 基本表格按鈕noption = {n type :button,n data: {n name:Hello,n style:btn-primary btn-lgn }n}nn// 表格noption = {n type :table,n data:{n tableHead:[標題1,標題二,標題三,標題四],n buttonIndex:[0,1,2],n option:[n [Hello7,World0,Wellcom0,Js0],n [Hello1,World1,Wellcom1,Js1],n [Hello2,World2,Wellcom2,Js2],n [Hello3,World3,Wellcom3,Js3]n ]n } nn}n

3、關於公共樣式的適配實現

var title = option.title || {}n , legend = option.legend || {}n , tooltip = option.tooltip || {};nn$.extend(title, _COMMON_.title);n$.extend(legend, _COMMON_.legend);n$.extend(tooltip, _COMMON_.tooltip);nnoption.title = title;noption.legend = legend;noption.tooltip = tooltip;n

4、關於組件拖拽的判定載入 (詳情參考dragEcharts.js)

// 定義全局對象params 做一個狀態判定nvar params = {n left: 0, // 左偏移值，默認為0n top: 0, // 右偏移值，默認為0n currentX: 0, // 當前X軸坐標，默認為0n currentY: 0, // 當前Y軸坐標，默認為0n flag: false // 是否可拖拽，默認為falsen};nn// 組件載入的判定實現nvar flag = false;nfor (var i=0; i<$(el).length; i++){n if ($(el).eq(i).find(el).length>0){n continue;n }n // $(#echartController)是承載組件的div，這裡就同意規定為這個名字吧，也容易看懂，算是一個自己的規則吧n var zoom = $(#echartController).css(zoom)n , left = $obj.eq(i).offset().left * zoomn , top = $obj.eq(i).offset().top * zoomn , scroT = $(document).scrollTop()n , zoomW = $obj.eq(i).width() * zoomn , zoomH = $obj.eq(i).height() * zoom;nn if (d>left && d<left+zoomW && c+scroT>top && c+scroT<top+zoomH) {n flag = true;n $(el).removeClass(add-active);n $(el).eq(i).addClass(add-active);n } else if (!flag && params.flag){n $(el).removeClass(add-active);n }n objID = $(el+.add-active).attr(id);n}n

三、組件調用

這裡調用需要在拖拽判定為true的時候執行，簡單執行如下

new EC($(#echartController), {n echartObj: objID,n option: optionn});n

具體操作如下（詳細還是參考dragEchart.js）

document.onmouseup = function(h) {n $(#drag).remove();n var i = h ? h : window.event;n var g = i.clientX - down_xAisn , f = i.clientY - down_yAis;n if((g!=0 || f!=0) && params.flag){n if(objID){n // 拖拽判定存在，則載入組件n new EC($(#echartController), {n echartObj: objID,n option: optionn });n _OPTIONS_[objID] = option;n console.log(_OPTIONS_)n }n }n else{n return false;n }n params.flag = false;n};n

那麼到這裡，一個組件的拖拽載入便完成了。這裡重點是對所有echarts組件載入的一個抽離及適配操作，還有就是這裡我並沒有寫出自己的組件應該如何進行開發，先上效果圖

大家可以先自己根據我上面定的協議進行一下思考。後期我也會把自己的組件開發寫到後期自己的文章當中去。

最後貼上demo的地址：https://github.com/xuqiang521/data-visualization

喜歡的朋友可以給個star，後期demo我會進行完善的。小夥伴們一起加油↖(^ω^)↗

推薦閱讀：