EChart

ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

网址：

  1. http://echarts.baidu.com/
  2. https://github.com/ecomfe/echarts
  3. http://echarts.baidu.com/echarts2/index.html
  4. http://echarts.baidu.com/download.html

丰富的图表类型

ECharts 提供了常规的折线图，柱状图，散点图，饼图，K线图，用于统计的盒形图，用于地理数据可视化的地图，热力图，线图，用于关系数据可视化的关系图，treemap，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

引入 ECharts

ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 JavaScript 库一样用 script 标签引入。

  1. <!DOCTYPE html>
  2. <html>
  3. <header>
  4. 	<meta charset="utf-8">
  5. 	<!-- 引入 ECharts 文件 -->
  6. 	<script src="echarts.min.js"></script>
  7. </header>
  8. </html>

绘制一个简单的图表

  1. <body>
  2.     <!-- 为 ECharts 准备一个具备大小（宽高）的Dom -->
  3.     <div id="main" style="width: 600px;height:400px;"></div>
  4. </body>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。


  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>ECharts</title>
  7.     <!-- 引入 echarts.js -->
  8.     <script src="echarts.js"></script>
  9. </head>
  10. <body>
  11.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  12.     <div id="main" style="width: 600px;height:400px;"></div>
  13.     <script type="text/javascript">
  14.         // 基于准备好的dom，初始化echarts实例
  15.         var myChart = echarts.init(document.getElementById('main'));
  17.         // 指定图表的配置项和数据
  18.         var option = {
  19.             title: {
  20.                 text: 'ECharts 入门示例'
  21.             },
  22.             tooltip: {},
  23.             legend: {
  24.                 data:['销量']
  25.             },
  26.             xAxis: {
  27.                 data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
  28.             },
  29.             yAxis: {},
  30.             series: [{
  31.                 name: '销量',
  32.                 type: 'bar',
  33.                 data: [5, 20, 36, 10, 10, 20]
  34.             }]
  35.         };
  37.         // 使用刚指定的配置项和数据显示图表。
  38.         myChart.setOption(option);
  39.     </script>
  40. </body>
  41. </html>

EChart使用的更多相关文章

  1. EChart系列：在echart3中使用百度地图扩展之后，如何获取到百度地图对象

    最近做项目想要在百度地图上叠加显示echart的散点图,然后根据地图的缩放等级和区域范围要显示不同的散点图,这中间折腾了好久.功能要求包括: (1)底图使用百度地图: (2)可以在地图上叠加显示ech ...

  2. 网站中使用echart

    在网站开发中,可能会使用折线图,圆饼图,等等 来丰富网页对数据的展示,可以使用echart http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E ...

  3. WebGIS中利用AGS JS+eChart实现一些数据展示的探索

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 eChart提供了迁徙图.热点图.夜视图等跟地图能够很好的结 ...

  4. java 版本EChart使用

    一.简介 EChart是百度开发的js图表软件,用它我们可以很方便地以图形化的方式对数据进行分析统计.该种方式js在页面动态拼接json数据,再进行渲染.这种方法的优点是,灵活,可以随时进行修改.缺点 ...

  5. 百度数据可视化图表套件echart实战

    最近我一直在做数据可视化的前端工作,我用的最多的绘图工具是d3.d3有点像photoshop,功能很强大,例子也很多,但是学习成本也不低,做项目是需要较大人力投入的.3月底由在亚马逊工作的同学介绍下使 ...

  6. e-chart 本地加载中国地图

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  7. Echart的简单例子

    [转载自:http://echarts.baidu.com/echarts2/doc/start.html] <%@ page language="java" content ...

  8. EChart和G2比较

    1.上市时间:EChart已经久经沙场,G2算是新事物 2.源码:截止发文,在Github上 数量 EChart G2 commits 3086 8 branches 3 1 releases 43 ...

  9. Echart图表入门

    1.Echart是什么? Enterprise Charts的缩写,商业级数据图表,一个纯Javascript的图表库.更多的内容可以参考网上的资料 2.使用步骤 a.下载开发包 官网地址:http: ...

随机推荐

  1. Visual Studio 2012远程调试中遇到的问题

    有的时候开发环境没问题的代码在生产环境中会某些开发环境无法重现的问题,或者需要对生产环境代码进行远程调试该怎么办? Vs已经提供给开发者远程调试的工具 下面简单讲讲该怎么用,前期准备:1.本地登录账户 ...

  2. AFNetworking 3.0 源码解读（十一）之 UIButton/UIProgressView/UIWebView + AFNetworking

    AFNetworking的源码解读马上就结束了,这一篇应该算是倒数第二篇,下一篇会是对AFNetworking中的技术点进行总结. 前言 上一篇我们总结了 UIActivityIndicatorVie ...

  3. 邮件中嵌入html中要注意的样式

    工作中常会有需求向用户发送邮件,需要前端工程师来制作html格式的邮件,但是由于邮件客户端对样式的支持有限,要兼容很多种浏览器需要注意很多原则: 1.邮件使用table+css布局 2.邮件主要部分在 ...

  4. C#文件安全管理解析

    在实际的项目开发中,我们经常需要使用到文件的I/O操作,主要包含对文件的增改删查等操作,这些基本的操作我们都是很熟悉,但是较少的人去考虑文件的安全和操作的管理等方面,例如文件的访问权限管理,文件数据的 ...

  5. 深入理解CSS六种颜色模式

    前面的话 赏心悦目的颜色搭配让人感到舒服,修改元素颜色的功能让人趋之若鹜.但颜色规划不当,会让网站用户无所适从.颜色从<font color="">发展至今,保留了很多 ...

  6. C# await和async

    基础阅读:http://www.cnblogs.com/jesse2013/p/async-and-await.html 答疑阅读:http://www.cnblogs.com/heyuquan/ar ...

  7. 代码的坏味道（19）——狎昵关系(Inappropriate Intimacy)

    坏味道--狎昵关系(Inappropriate Intimacy) 特征 一个类大量使用另一个类的内部字段和方法. 问题原因 类和类之间应该尽量少的感知彼此(减少耦合).这样的类更容易维护和复用. 解 ...

  8. ASP.NET MVC原理

    仅此一文让你明白ASP.NET MVC原理   ASP.NET MVC由以下两个核心组成部分构成: 一个名为UrlRoutingModule的自定义HttpModule,用来解析Controller与 ...

  9. spring maven pom.xml设置

    spring pom.xml设置 <?xml version="1.0" encoding="UTF-8"?> <project xmlns= ...

  10. 解决mysql插入数据时出现Incorrect string value: '\xF0\x9F...' for column 'name' at row 1的异常

    这个问题,原因是UTF-8编码有可能是两个.三个.四个字节.Emoji表情或者某些特殊字符是4个字节,而MySQL的utf8编码最多3个字节,所以数据插不进去. 我的解决方案是这样的 1.在mysql ...