一入前端深似海，今后红尘是路人系列第六弹之走进数据可视化

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，到时托管代码上去后我也会再写一些博客对其配置作一个详细的讲解。

最后，若是小伙伴们喜欢的话，请推荐支持一把，也给我一点后期写做一点动力。