前言：

近年来，在数据服务的公司中，数据可视化越来越重要。随着而来的，国内外正在如火如荼的开发各种在线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. Visual Studio效率神器——超级扩展ReSharper安装和破解

    Visual Studio效率神器--超级扩展ReSharper安装和破解   ReSharper的使用方法网络上有文章Resharper安装和破解极其简单,2分钟就搞定了.安装ReSharper官方 ...

  2. QT的配置及目录结构

    作者:一去丶二三里 来源:CSDN 原文:https://blog.csdn.net/liang19890820/article/details/51774724 注意:所有的配置中,/user中的/ ...

  3. C#基础笔记(第十八天)

    1.HTMLHyper Text Markup Language 超文本标记语言在HTML当中存在着大量的标签,我们用HTML提供的标签,将要显示在网页中的内容包含起来.就构成了我们的网页. CSS: ...

  4. Could not find any resources for the specified culture or the neutral culture

    问题解决办法是: 打开资源文件,将access modifier:下拉项设置为“internal”即可

  5. Termux中安装gcc-7/gfortran-7实操过程，安装成功可以编译Fortran,c/c++

    最近计算材料学的老师需要我们运行Fortran,又不想带电脑去教室.所以想起Termux了,于是就试试看这个宝贝能不能帮我的忙, 但是经过测试以后发现,clang只能编译c/c++那一类语言,不能编译 ...

  6. RecyclerView的通用适配器

    本来这一个主题应该早就写了,只是项目多,属于自己的时间不多,所以现在才开动!! 前一段时间写了一篇文章,是关于ListView,GriView万能适配器,没有看过的同学,可以先看看那篇文章,然后在来学 ...

  7. [ActionScript 3.0] as3启动QQ

    import flash.html.HTMLLoader; import flash.net.URLLoader; import flash.net.URLRequest; import flash. ...

  8. Spring 并发事务的探究

    前言 在目前的软件架构中,不仅存在单独的数据库操作(一条SQL以内,还存在逻辑性的一组操作.而互联网软件系统最少不了的就是对共享资源的操作.比如热闹的集市,抢购的人群对同见商品的抢购由一位售货员来处理 ...

  9. delphi 10.2---非常简单的数组用法求和

    unit Unit9; interface uses Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System ...

  10. c/c++ int,float,short 大小端转换函数

    unsigned int(uint32_t)大小端转换函数 unsigned int BLEndianUint32(unsigned int value) { return ((value & ...