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

1、開發模式

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





因爲總體的開發模式是由MVC模式爲主進行的開發，因此先簡單給小夥伴們介紹一下MVC模式吧

MVC 模式的英文名稱是 Model-View-Controller pattern，顧名思義，其主要部分爲：
•模型（Model），整個模式中的數據層;
•視圖（View），模式中的數據展現層；
•控制器（Controller），處理並響應事件，監控模型變化，繼而修改視圖。

接下來我將以一個雙餅圖組件爲例子，帶着小夥伴們一塊兒走進主流的數據可視化開發。

2、開發核心

一、組件接口封裝

var _MYCHART_;  // 全局echart繪圖對象
;(function($,doc,win){
var EC = function(obj,config){
  this.obj = obj;
  this.setting = {};
  $.extend(this.setting,config);
  // 初始化
  this.init(this.setting);
};
EC.prototype = {
  echarts : function(options){
    // 環境依賴配置
    require.config({
      paths:{ 
        'echarts' : './js/echarts'
      }
    });
    require([
      'echarts'
    ],function(ec) {
      _MYCHART_ = ec.init(document.getElementById(options.echartObj));
      _MYCHART_.setOption(options.option);
    }); 
  }
};
EC.prototype.init = function(options){
  this.echarts(options);
}
window.EC = EC;
})(jQuery,document,window);

二、數據層的抽離

你們知道echarts或者用過的，都應該知道下面這個代碼是echarts對可視化組件作的一個數據層的抽離控制

var option = {
  title : {
    text: '組件配置',
    subtext: '做者:qiangdada',
    x:'center',
    y:0,
    textStyle:{
      fontSize:16,
      show:false
    },
    subtextStyle:{
      fontSize:13
    }
  },
  tooltip: {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
    show: true,
    orient: 'vertical',
    x: 10,
    y: 0,
    data: ['直接訪問', '郵件營銷', '聯盟廣告'],
    textStyle: {
      color: 'auto',
      fontSize: 13
    },
  },
  series: [
    {
      name: '訪問來源',
      type: 'pie',
      center: ['50%', '50%'],
      radius: ['30%', '45%'],
      itemStyle: {
        normal: {
          label: {
            formatter: "{b}" + " : " + "{c} ( {d}% )",
          },
          labelLine: {
            show: true
          }
        }
      },
      data: [
        {
          value: 335,
          name: '直接訪問'
        },
        {
          value: 310,
          name: '郵件營銷'
        },
        {
          value: 234,
          name: '聯盟廣告'
        }
      ]
    }
  ]
}

三、可視化組件的展現

這裏很簡單，只須要簡單的new一個EC對象就能夠進行展現了

new EC($('body'),{
  echartObj:'echarts', // 組件繪圖對象
  option:option   // 組件繪圖數據
});

3、組件的展現

這裏只須要頁面中有一個擁有寬高的盒子即可以承載echarts組件，從而進行展現，這裏爲了方便我就先把樣式寫在標籤吧。

<div id="echarts" style="width: 500px;height: 400px;"></div>

這3步走完正常的頁面展現以下：
沒錯，組件已經能夠展現了。接下來的配置展現步驟，包括代碼都比較繁瑣。這裏我就不詳細說明了，到時候我會將這個demo託管github，我的github地址爲https://github.com/xuqiang521。你們能夠關注一下我博客或者我github，到時託管代碼上去後我也會再寫一些博客對其配置作一個詳細的講解。

最後，若是小夥伴們喜歡的話，請推薦支持一把，也給我一點後期寫做一點動力。