前言：

近年来，在数据服务的公司中，数据可视化越来越重要。随着而来的，国内外正在如火如荼的开发各种在线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. SQL表连接查询inner join left join right join full join ...

    一.最常见的连接查询 select  s.name,m.mark from student s,mark m  where s.id=m.studentid. 二.内连接-inner join sel ...

  2. ADO.NET操作PostgreSQL：数据库操作类(未封装)

    1.添加 /// <summary> /// 添加 /// </summary> /// <param name="newEntity">< ...

  3. c# 调用微信小程序

    //微信也不给个c#调用的例子 只好自己造咯:ps:大佬勿喷 1 public string GetWx(string code, string iv, string encryptedData) { ...

  4. RabbitMq初探——消息均发

    消息均发 前言 由前文 RabbitMq初探——消息分发 可知,rabbitmq自带分发机制——消息会按顺序的投放到该队列下的多个消费者,例如1,3,5投放消费者C1,2,4,6投放消费者C2. 这就 ...

  5. 配置AndroidStdio的开发环境

    http://blog.csdn.net/siwuxie095/article/details/53431818

  6. 使用Anaconda的python安装虚拟环境是出现错误：python -m venv venvdir----Error: Command '['D:\\Development\\Django\\test\\Scripts\\python.exe', '-Im', 'ensurepip', '--upgrade', '--default-pip']' returned non-zero exit

    在创建python虚拟环境的时候,如果使用的是Anaconda中集成的python -m venv venvdir就会出现不能安装pip的错误,原因是Anaconda没有ensurepip, 解决办法 ...

  7. html页面pc显示正常，在手机端适配也可以看整个页面

    <meta name="viewport" content="width=1250,initial-scale=0,maximum-scale=2"/&g ...

  8. “全栈2019”Java多线程第六章：中断线程interrupt()方法详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...

  9. luoguP5074 Eat the Trees

    https://www.luogu.org/problemnew/show/P5074 插头 $ dp $ 入门题 如果你还不会插头 $ dp $ 请右转 洛谷插头dp题解 虽然是入门题但还是逃不过分 ...

  10. webpack 踩的坑

    我是看着这篇博客学习的 http://www.jianshu.com/p/42e11515c10f# 看到loaders的时候,按照博主写法去试 结果报错....找了好久,上网查了好多 也看错误信息了 ...