ECharts和Bootstrap框架

ECharts：

1.认识echarts？
ECharts，缩写来自 Enterprise Charts，商业级数据图表，是百度的一个开源的数据可视化工具，一个纯 Javascript 的图表库，能够在 PC 端和移动设备上流畅运行，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的 Canvas 库 ZRender，ECharts 提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

2.特点：
1.ECharts 属于开源软件，并且我们提供了非常炫酷的图形界面，特色是地图，另外还提供了柱状图、折线图、饼图、气泡图及四象限图等；
2.ECharts 使用简单，在官网中为我们封装了 JS，只要会引用就会得到完美的展示效果；
3.ECharts 种类多，ECharts 实现简单，各类图形都有；相应的模板，还有丰富的 API 及文档说明，非常详细；
4.ECharts 兼容性好，基于HTML5，有着良好的动画渲染效果。

3.如何引入echarts文件：
ECharts 的引入方式变简单了，因为从 ECharts 3 开始就不用使用 AMD 的方式引入，代码也不再内置 AMD 加载器，所以 ECharts 的引入方式就可以像 JavaScript 库一样用 script 标签引入即可。
下面是echarts 引入的代码：

通过使用 echarts.init 方法来初始化一个 echarts 实例和使用 setOption 方法生成一个简单的柱状图，完整的代码如下：

bootstrap：
1.是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

2.为什么使用bootstrap？
（1）移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
（2）浏览器支持：所有的主流浏览器都支持 Bootstrap。
（3）容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
（4）响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 Bootstrap 响应式设计。
（5）它为开发人员创建接口提供了一个简洁统一的解决方案，包含了功能强大的内置组件，易于定制，提供了基于 Web 的定制，它是开源的。

3.内容：
（1）基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
（2）CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。
（3）JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。
（4）定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

  

    
我的第一个 Bootstrap 页面
    
重置窗口大小，查看响应式效果！
 
  
  

    

      
Column 1
      
学的不仅是技术，更是梦想！
      
再牛逼的梦想,也抵不住你傻逼似的坚持！
    
    

      
Column 2
      
学的不仅是技术，更是梦想！
      
再牛逼的梦想,也抵不住你傻逼似的坚持！
    
    

      
Column 3
 
      
学的不仅是技术，更是梦想！
      
再牛逼的梦想,也抵不住你傻逼似的坚持！