用Echars进行数据可视化

1、Echarts实践5分钟上手写ECharts的第一个图表前端工程之模块化1.模块化是一种处理复杂系统分解成为更好的可管理模块的方式，它可以把系统代码划分为一系列职责单一，高度解耦且可替换的模块，系统中某一部分的变化将如何影响其它部分就会变得显而易见，系统的可维护性更加简单易得。2.前端开发领域(JavaScript、CSS、Template)并没有为开发者们提供以一种简洁、有条理地的方式来管理模块的方法。3.CommonJS(致力于设计、规划并标准化 JavaScript API)的诞生开启了“ JavaScript 模块化的时代”。CommonJS 的模块提案为在服务器端的 JavaScri

2、pt 模块化做出了很大的贡献，但是在浏览器下的 JavaScript 模块应用很有限。4.随之而来又诞生了其它前端领域的模块化方案，像 requireJS、SeaJS 等，然而这些模块化方案并不是十分适用 ，并没有从根本上解决模块化的问题。RequireJS 与 SeaJSRequireJSAMD规范（异步模块定义）依赖提前加载requirejs.config(baseUrl: js/lib,paths: app: ./app);requirejs(jquery, canvas, app/sub,function ($, canvas, sub) );SeaJSCMD规范（通用模块定义）依赖懒

3、加载seajs.config( base: ./sea-modules/, alias: jquery: jquery/jquery/1.10.1/jquery.js )seajs.use(./static/hello/src/main)模块化单文件引入1.新建新建一个一个echarts.html文件，为文件，为ECharts准备一个具备大小（宽高）的准备一个具备大小（宽高）的Dom。2.新建新建标签引入模块化单文件标签引入模块化单文件echarts.js。3.新建新建标签中为模块加载器配置标签中为模块加载器配置echarts和所需图表的路径（相对路径为和所需图表的路径（相对路径为从当前页面链

4、接到从当前页面链接到echarts.js），引入图表文件见），引入图表文件见引入引入ECharts2 。4.标签内动态加载标签内动态加载echarts和所需图表，回调函数中可以初始化图表并驱和所需图表，回调函数中可以初始化图表并驱动图表的生成，动图表的生成，option见见API & Doc5.浏览器中打开浏览器中打开echarts.html，就可，就可看到效果看到效果新建一个新建一个echarts.html文件，为文件，为ECharts准备一个具备大小（宽高）的准备一个具备大小（宽高）的Dom。 ECharts 新建新建标签引入模块化单文件标签引入模块化单文件echarts.js E

5、Charts 新建新建标签中为模块加载器配置标签中为模块加载器配置echarts和所需图表的路径和所需图表的路径 ECharts / 路径配置 require.config( paths: echarts: http:/ ); 标签内动态加载标签内动态加载echarts和所需图表，回调函数中可以初始化图表并驱动图表的生成和所需图表，回调函数中可以初始化图表并驱动图表的生成 / 路径配置 require.config(paths: echarts: http:/ ); / 使用 require(echarts, echarts/chart/bar / 使用柱状图就加载bar模块，按需加载, function (ec) / 基于准备好的dom，初始化echarts图表 var myChart = ec.init(document.getElementById(main); var option = tooltip: show: true , legend: data:销量, xAxis : type : category, data : 衬衫,羊毛衫,雪纺衫,裤子,高跟鞋,袜子 , yAxis : type : value , series : name:销量, type:bar, data:5, 20, 40, 10, 10, 2