前言：

近年来，在数据服务的公司中，数据可视化越来越重要。随着而来的，国内外正在如火如荼的开发各种在线js视图展示框架。而百度的e-chart算是实用性较高且体验最好的！今天闲来无事，便来玩玩~

echart自我介绍：

“基于Canvas，纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。”

1资源下载

下载路径（http://echarts.baidu.com/build/echarts-2.2.7.zip）

2文件目录说明

echart-2.2.7

-build js总文件夹（diss,src）

-doc 使用说明文档

-extension 地图相关拓展

-src  js源码细节

-test 测试

3 使用说明

解压后，用浏览器打开文件'./doc/start.html'

4 实战

step1:新建 echart-test.html 文件，为ECharts准备一个具备大小（宽高）的Dom。

直接调用在线的js,无需本地加载echart相关资源文件

step2:新建<script>标签引入模块化单文件echarts.js

step3:新建<script>标签中为模块加载器配置echarts和所需图表的路径（相对路径为从当前页面链接到echarts.js）

step4:编辑html，修改数值并保存，可以观察到图的实时变化（支持下载保存）

echart-test.html的完整html代码

 <!DOCTYPE html>

 <head>

     <meta charset="utf-8">

     <title>ECharts</title>

 </head>

 <body>

     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

     <div id="main" style="height:400px"></div>

     <!-- ECharts单文件引入 -->

     <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>

     <script type="text/javascript">

         // 路径配置

         require.config({

             paths: {

                 echarts: 'http://echarts.baidu.com/build/dist'

             }

         });

         // 使用

         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, 20]

                         }

                     ]

                 };

                 // 为echarts对象加载数据

                 myChart.setOption(option);

             }

         );

     </script>

 </body>

结语：

以上实战只是10分钟的echart小demo,后续还将通过动态加载数据对接后台数据。尽请关注！

百度开源e-chart初探的更多相关文章

  1. MVC使用百度开源文本编辑器UEditor实现图文并茂,字数限制,上传图片或涂鸦

    原文:MVC使用百度开源文本编辑器UEditor实现图文并茂,字数限制,上传图片或涂鸦 文本编辑器有很多,比如ticymce和CKEditor就比较好用,但涉及到图片.文件上传,需要结合CKFinde ...

  2. SNF快速开发平台MVC-集成了百度开源项目echars

    百度开源项目echars图表样式非常丰富,而且开源免费.非常好.所以在我们框架当中也进行了集成echars完成图表任务. 我们进行了两次封装,利于我们开发使用.我也看到过有些架构师 按echars里的 ...

  3. SNF快速开发平台MVC-富文本控件集成了百度开源项目editor

    一.效果如下: 二.在框架当中调用代码如下: 1.在js里配置如下: <script type="text/javascript"> var viewModel =fu ...

  4. ASP.NET MVC WebApi 返回数据类型序列化控制（json,xml) 用javascript在客户端删除某一个cookie键值对 input点击链接另一个页面，各种操作。 C# 往线程里传参数的方法总结 TCP/IP 协议 用C#+Selenium+ChromeDriver 生成我的咕咚跑步路线地图 (转)值得学习百度开源70+项目

    ASP.NET MVC WebApi 返回数据类型序列化控制(json,xml)   我们都知道在使用WebApi的时候Controller会自动将Action的返回值自动进行各种序列化处理(序列化为 ...

  5. 百度开源其NLP主题模型工具包，文本分类等场景可直接使用L——LDA进行主题选择本质就是降维，然后用于推荐或者分类

    2017年7月4日,百度开源了一款主题模型项目,名曰:Familia. InfoQ记者第一时间联系到百度Familia项目负责人姜迪并对他进行采访,在本文中,他将为我们解析Familia项目的技术细节 ...

  6. 百度开源的分布式唯一ID生成器UidGenerator，解决了时钟回拨问题

    UidGenerator是百度开源的Java语言实现,基于Snowflake算法的唯一ID生成器.而且,它非常适合虚拟环境,比如:Docker.另外,它通过消费未来时间克服了雪花算法的并发限制.Uid ...

  7. 百度开源中国（Java）面经

    一.自我介绍 面试嘛,万年不变还是自我介绍,就说说你是干嘛的(专业是啥),为什么会选择该公司(说一说自己为何向往Java开发),再谈谈自己的优点(兴趣爱好).如果人家叫停了,就别一股脑接着讲了,停下来 ...

  8. 百度开源分布式id生成器uid-generator源码剖析

    百度uid-generator源码 https://github.com/baidu/uid-generator snowflake算法 uid-generator是基于Twitter开源的snowf ...

  9. 开源GIS软件初探

    谈到GIS软件,首先让我们想到的便是GIS界的龙头大哥ESRI公司旗下的ArcGIS产品,从最初接触的version 9.2到如今的version 10.1,其发展可谓风生水起.MapInfo软件也不 ...

随机推荐

  1. python, C++, C# 计算速度简单对比

    有个简单的运算, ; ; ; i < n ; i ++) { ; j < n; j ++) { lResult += (ulong) ( i * j ); } } return lResu ...

  2. java随笔——HashMap与红黑树

    前言: hashmap是一种很常用的数据结构,其使用方便快捷,接下来笔者将给大家深入解析这个数据结构,让大家能在用的时候知其然,也知其所以然. 一.Map 首先,从最基本的讲起,我们先来认识一下map ...

  3. sharepoint 2013 search configuration

    在建立search application之前完成以下命令 $hostA = Get-SPEnterpriseSearchServiceInstance -Identity "WTCSPS0 ...

  4. java.lang.NoSuchMethodError: javax.servlet.ServletContext.getContextPath()Ljava/lang/String;

    问题描述:在eclipse3.7中启动tomcat6时一直出现这个错误, java.lang.NoSuchMethodError: javax.servlet.ServletContext.getCo ...

  5. Android 的学习心得

    https://www.jianshu.com/p/f93a6c75940c    一个2年安卓开发者的一些经验分享

  6. CF79D Password

    题目链接 题意:给定长度为n的0/1序列,初始值都为0.你每次可以在给定的l个长度中的\(a_i\)并将序列中长度为\(a_i\)的部分取反.使得最终状态为\(x_1\)~\(x_k\),求最少取反次 ...

  7. spring利用注解方式实现Java读取properties属性值

    1. 建立properties文件:我在resource下面建立一个config文件夹,config文件夹里面有mytest.properties文件,文件内容如下: sam.username=sam ...

  8. wamp集成多个版本php （php7.0）

    https://www.cnblogs.com/ypf5208/p/5510274.html

  9. 图解JVM内存分配和回收

    一.简介 JVM采用分代垃圾回收.在JVM的内存空间中把堆空间分为年老代和年轻代.将大量(据说是90%以上)创建了没多久就会消亡的对象存储在年轻代,而年老代中存放生命周期长久的实例对象.年轻代中又被分 ...

  10. [转载] 解决gns3 for mac模拟器三层交换机无法成功创建vlan的问题

    1.删除之前导入的ios: 2.选择GNS3--Edit--Preferences--IOS routers--New--导入ios-- 勾选This is an EtherSwitch router ...