ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现

1、新建一个echarts.html文件，为ECharts准备一个具备大小（宽高）的Dom。

  1. <!DOCTYPE html>
  2. <head>
  3.     <meta charset="utf-8">
  4.     <title>ECharts</title>
  5. </head>
  6.  
  7. <body>
  8.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  9.     <div id="main" style="height:400px"></div>
  10. </body>

2、新建<script>标签引入模块化单文件echarts.js

  1. <!DOCTYPE html>
  2. <head>
  3.     <meta charset="utf-8">
  4.     <title>ECharts</title>
  5. </head>
  6. <body>
  7.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  8.     <div id="main" style="height:400px"></div>
  9.     <!-- ECharts单文件引入 -->
  10.     <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
  11. </body

3、新建<script>标签中为模块加载器配置echarts和所需图表的路径（相对路径为从当前页面链接到echarts.js），引入图表文件见引入ECharts2

  1. <!DOCTYPE html>
  2. <head>
  3.     <meta charset="utf-8">
  4.     <title>ECharts</title>
  5. </head>
  6. <body>
  7.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  8.     <div id="main" style="height:400px"></div>
  9.     <!-- ECharts单文件引入 -->
  10.     <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
  11.     <script type="text/javascript">
  12.         // 路径配置
  13.         require.config({
  14.             paths: {
  15.                 echarts: 'http://echarts.baidu.com/build/dist'
  16.             }
  17.         });
  18.     </script>
  19. </body>

4、<script>标签内动态加载echarts和所需图表，回调函数中可以初始化图表并驱动图表的生成，option见API & Doc

  1. <!DOCTYPE html>
  2. <head>
  3.     <meta charset="utf-8">
  4.     <title>ECharts</title>
  5. </head>
  6. <body>
  7.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  8.     <div id="main" style="height:400px"></div>
  9.     <!-- ECharts单文件引入 -->
  10.     <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
  11.     <script type="text/javascript">
  12.         // 路径配置
  13.         require.config({
  14.             paths: {
  15.                 echarts: 'http://echarts.baidu.com/build/dist'
  16.             }
  17.         });
  18.  
  19.         // 使用
  20.         require(
  21.             [
  22.                 'echarts',
  23.                 'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
  24.             ],
  25.             function (ec) {
  26.                 // 基于准备好的dom，初始化echarts图表
  27.                 var myChart = ec.init(document.getElementById('main')); 
  28.  
  29.                 var option = {
                        //tooltip:气泡提示
  30.                     tooltip: {
  31.                         show: true
  32.                     },
  33.                     legend: {
  34.                         data:['销量']
  35.                     },
  36.                     xAxis : [
  37.                         {
  38.                             type : 'category',
  39.                             data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
  40.                         }
  41.                     ],
  42.                     yAxis : [
  43.                         {
  44.                             type : 'value'
  45.                         }
  46.                     ],
  47.                     series : [
  48.                         {
  49.                             "name":"销量",
  50.                             "type":"bar",
  51.                             "data":[5, 20, 40, 10, 10, 20]
  52.                         }
  53.                     ]
  54.                 };
  55.  
  56.                 // 为echarts对象加载数据
  57.                 myChart.setOption(option);
  58.             }
  59.         );
  60.     </script>
  61. </body>

5、浏览器中打开echarts.html，就可看到以下效果

option:图表选项，包含图表实例任何可配置选项： 公共选项 ， 组件选项 ， 数据选项

event事件

  1. // 增加些数据------------------
  2. option.legend.data.push('win');
  3. option.series.push({
  4.         name: 'win',                            // 系列名称
  5.         type: 'line',                           // 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
  6.         data: [112, 23, 45, 56, 233, 343, 454, 89, 343, 123, 45, 123]
  7. });
  8. myChart.setOption(option);
  9.  
  10. ...
  11.  
  12. // 图表清空-------------------
  13. myChart.clear();
  14.  
  15. // 图表释放-------------------
  16. myChart.dispose();

echarts的更多相关文章

  1. 一起来玩echarts系列（一）------箱线图的分析与绘制

    一.箱线图 Box-plot 箱线图一般被用作显示数据分散情况.具体是计算一组数据的中位数.25%分位数.75%分位数.上边界.下边界,来将数据从大到小排列,直观展示数据整体的分布情况. 大部分正常数 ...

  2. Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程（柱状图，南丁格尔图）

    Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

  3. ASP.NET MVC5+EF6+EasyUI 后台管理系统（67）-MVC与ECharts

    系列目录 ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...

  4. echarts+php+mysql 绘图实例

    最近在学习php+mysql,因为之前画图表都是直接在echart的实例demo中修改数据,便想着两相结合练习一下,通过ajax调用后台数据画图表. 我使用的是echart3,相比较第二版,echar ...

  5. 数据图表插件Echarts（一）

    一.引言 最近做一个智慧城市项目,项目中需要图表和报表进行数据分析,从网上找了很多,最后找到了百度开放的echarts,一个很强大的插件. 二.介绍 ECharts,缩写来自Enterprise Ch ...

  6. ECharts数据图表系统？ 5分钟上手！

    目录: 前言 简介 方法一:模块化单文件引入(推荐) 方法二:标签式单文件引入 [前言] 最近在捣鼓各种插件各种框架,发现这个ECharts还是比较不错的,文档也挺全的,还是中文的,给大家推荐一下. ...

  7. knockout+echarts实现图表展示

    一.需要学习的知识 knockout, require, director, echarts, jquery.简单的入一下门,网上的资料很多,最直接就是进官网校习. 二.效果展示 三.require的 ...

  8. ECharts 初识（基于MVC+jQuery+Angularjs实现的Demo）

    一.背景:      我们这行做web开发的,很多时候都需要做数据统计报表,现在我所使用的是来自百度团队的ECharts.官方网址:http://echarts.baidu.com/      我们知 ...

  9. Ionic2系列——在Ionic2中使用ECharts

    在群里看到有人问怎么在Ionic2中集成ECharts来显示图表.当时答应说写个blog,简单写下步骤. 在TypeScript中如果要使用第三方库,必须要有d.ts,也就是定义文件,没有这个文件的话 ...

  10. ECharts的简单使用过程

    网页中经常要使用图表,以前使用的是highcharts插件,现在发现echarts使用起来和highcharts差不多,但是个人感觉echarts更酷炫,以下是echarts的使用过程,其实highc ...

随机推荐

  1. 硬盘安装win10

    http://hd.ruanmei.com/

  2. 【9-6】Centos学习笔记

    linux文件系统结构 常用技巧 快捷键启动终端 su命令,使用超级用户登陆 visudo :编辑用户权限 tar xf 文件名:解压文件 Vim编辑器 Tips yum包管理:Yum(全称为 Yel ...

  3. 关于使用jacob出现的异常

    1) 把jacob.jar加载到工程里:2) 把jacob.dll放入 JAVA_HOME\bin\ 和 JAVA_HOME\jre\bin目录下:3)  把jacob.dll放入 C:\WINDOW ...

  4. Zepto.js touch模块深入分析

    目的:记录 Zepto.js touch模块 源码阅读 源码: // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely ...

  5. SASS的一些使用体会（安装-配置-开启firefox的调试）

    对CSS预处理这个东西的看法,基本就是2种 第一种:不就是css吗,我会写就好了搞得那么复杂干嘛 第二种:感觉这个东西非常有必要,它规范了代码,使开发变得更轻松 好吧以前我是第一种,并且觉得又要配置环 ...

  6. winServer2003除默认端口外的其他端口只能本地访问，关闭防火墙即可

    winServer2003除默认端口外的其他端口只能本地访问,关闭防火墙即可

  7. PHP读取excel文档

    PHP读取excel文档 项目需要读取Excel的内容,从百度搜索了下,主要有两个选择,第一个是PHPExcelReader,另外一个是PHPExcel.   PHPExcelReader比较轻量级, ...

  8. 跨域攻击xss

    要完全防止跨域攻击是很难的,对于有些站点是直接 拦截跨域的访问,在你从本站点跳转到其他站点时提醒,这算是一种手段吧. 而跨域攻击的发起就是在代码(包括html,css,js或是后台代码,数据库数据)里 ...

  9. android版微信5.2.1更新 支持微信聊天记录备份到电脑上

    昨天微信 5.2.1 for Android 全新发布了,和微信 5.2.1 for iPhone一样,支持拍照分享,可以把照片发送给多个朋友,最重要的一个更新是支持微信聊天记录备份到电脑(可以通过腾 ...

  10. 2015多校.MZL's endless loop(欧拉回路的机智应用 || 构造）

    MZL's endless loop Time Limit: 3000/1500 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Oth ...