前言：

近年来，在数据服务的公司中，数据可视化越来越重要。随着而来的，国内外正在如火如荼的开发各种在线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. oracle 11gr2 2.04 em 更改 hostname 后无需重建资料库的方法

    1) 备份删除$ORACKE_HOME/ xxxx-sid 的EM目录:复制要创建的xxx-sid EM 名称目录: 备份删除$ORACKE_HOME/oc4j/j2ee/ xxxx-sid 的EM目 ...

  2. Jquery EasyUI 各组件属性、事件详解

    CSS类定义: div easyui-window                               window窗口样式 属性如下: 1)       modal:是否生成模态窗口.tru ...

  3. 自己从0开始学习Unity的笔记 II （C#条件语句基础练习）

    首先,自己用了下三目表达式,来做了一个闰年的判断,也就是能被400整除,或者是能够被4整除,但是不能被100整除的年份. int year; //输入的年 bool fourHunderd; //能被 ...

  4. WPF里面多线程访问UI线程、主线程的控件

    如果出现以下错误:调用线程无法访问此对象,因为另一个线程拥有该对象. 你就碰到多线程访问UI线程.主线程的控件的问题了. 先占位.

  5. ANE-调用原生地图注意点

    打包的bat bin/adt -package -target ane test.ane extension.xml -swc AneTest.swc -platform iPhone-ARM -C ...

  6. 初识Mybatis框架

    mybatis框架  主要是对数据库进行操作的 编写sql语句 使我们对数据库的crud操作更加简洁方便!! 1.使用mybatis框架 进行第一个项目 查询数据库 并返回数据 :(简单) (1)搭建 ...

  7. InnoDB: The innodb_system data file 'ibdata1' must be writable错误

    重新安装percona5.7过程中,启动mysql服务总是报如下的错误 --10T02::.781070Z [ERROR] InnoDB: The innodb_system data file 'i ...

  8. abstract方法必须在abstract类中 这句话是对的还是错的?

    对 参考文章:https://zhidao.baidu.com/question/435526297.html interface中所有的方法都是抽象的,抽象类中部分方法是抽象的 实现interfac ...

  9. tushare模块的应用

    一.简介以及环境安装 TuShare是一个著名的免费.开源的python财经数据接口包.其官网主页为:TuShare -财经数据接口包.该接口包如今提供了大量的金融数据,涵盖了股票.基本面.宏观.新闻 ...

  10. 由button标签在 IE 8.0 下的异常表现引发的一场血案

    写在最前的最后:整篇文章絮絮叨叨说了半天,我得出一个最佳实践:和button标签say goodbay,用 a 标签模拟之. 首先看一个在chrome 下的简单demo 这样的布局在组件开发中再常见不 ...