前言：

近年来，在数据服务的公司中，数据可视化越来越重要。随着而来的，国内外正在如火如荼的开发各种在线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. 指定的 LINQ 表达式包含对与不同上下文关联的查询的引用

    解决方法是分两次查询. 报错的原因是在涉及到内存中的对象与EF里的对象混合查询时,内存中的对象要是基元类型. 第一次查询实际上会因为EF的延时加载,不会立即将数据查询到内存中. 解决方法是对第一次查询 ...

  2. SQL字符串分割转列，Sql列转字符串

    declare @strVar varchar(2000)declare @ResultVar varchar(2000)set @ResultVar='[薄饼],[点心],[海鲜],[酒吧],[楼面 ...

  3. C#基础知识入门概要（自我回顾用）

    一,C#是什么? 人与人之间可以用语言进行交流,我们和计算机交流也是通过语言.我们可以通过语言让一个人做一件我们想让他做事情(他愿意的话~),我们能不能让计算机按照我们的意愿来做事情呢?比如我们让计算 ...

  4. WPF GridControl单元格值与过滤值相同时，改变单元格背景色

    DataTrigger的Value不可绑定,所以我们需要用MultiBinding来实现这个功能. <dxg:TableView.CellStyle> <Style TargetTy ...

  5. 【cocos2d-x 手游研发----博彩大转盘】

    博彩大转盘,转盘抽奖的小系统,这是一个很有意思的游戏模块,游戏中增加这样一些趣味的小模块,我会附上源码: 会增进玩家的粘性,每天都想来抽两把试试手气: 我做的这个是个矩形风格的转盘,不是那种圆形的转盘 ...

  6. IDEA中配置SpringMVC框架 第一个演示【转】

    环境: intellij IDEA 2017 CI JDK 1.8 tomcat 8.5.23 具体步骤 1.新建项目 勾选Spring MVC .Web Application(勾选了Spring ...

  7. 操作日期时间类 Calendar类

    使用Calendar类可以直接创建Calendar的子类GregorianCalendar  来直接实例化, GregorianCalendar calendar = new GregorianCal ...

  8. Centos 7.x 安装配置tomcat-8过程梳理

    ----------注意CentOS7.x中的selinux和firewalld都关闭.而且一.二.三部分都是独立的,所以发现8081和8080端口时不要慌哦. 原创,朋友们转载时请著名出处. 一.安 ...

  9. ObjectARX动态添加AutoCAD传统下拉菜单入门篇(一)

    ObjectARX动态添加传统下拉菜单入门篇 图文by edata  , 转载注明出处 http://www.cnblogs.com/edata AutoCAD 添加传统下拉菜单有很多种方式,比较典型 ...

  10. Java多线程原理及Thread类的使用

    一.进程与线程的区别 1.进程是应用程序在内存总分配的空间.(正在运行中的程序) 2.线程是进程中负责程序执行的执行单元.执行路径. 3.一个进程中至少有一个线程在负责进程的运行. 4.一个进程中有多 ...