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

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

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

<!DOCTYPE html>

<head>

    <meta charset="utf-8">

    <title>ECharts</title>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="height:400px"></div>

</body>

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

<!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>

</body

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

<!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'

            }

        });

    </script>

</body>

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

<!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:气泡提示

                    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>

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

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

event事件

// 增加些数据------------------

option.legend.data.push('win');

option.series.push({

        name: 'win',                            // 系列名称

        type: 'line',                           // 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar

        data: [112, 23, 45, 56, 233, 343, 454, 89, 343, 123, 45, 123]

});

myChart.setOption(option);

...

// 图表清空-------------------

myChart.clear();

// 图表释放-------------------

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. 9月14日JavaScript循环语句作业解析

    1.一张纸的厚度是0.0001米,将纸对折,对折多少次厚度超过珠峰高度8848米 解法一: var gd = 8848; var cs = 0; while(true) { cs++; gd = gd ...

  2. Java查找算法——二分查找

    import java.lang.reflect.Array; import java.nio.Buffer; import java.util.Arrays; import java.util.Ra ...

  3. Unable to find vcvarsall.bat的解决办法

    明年绝对买MAC电脑,这一两天安装paramiko,真是操碎了心. 安装paramiko时报error: Unable to find vcvarsall.bat这种错误,网上找了各种方法啊,解决的办 ...

  4. RHEL提示RHN没有注册问题的解决方法

    1.系统RHEL5.5,初次使用yum时出现以下问题: [root@localhost real]# yum update Loaded plugins: rhnplugin, security Th ...

  5. VS2013快捷键大全

    Ctrl+E,D ----格式化全部代码 Ctrl+E,F ----格式化选中的代码 CTRL + SHIFT + B生成解决方案 CTRL + F7 生成编译 CTRL + O 打开文件 CTRL ...

  6. Crontab的格式

    第1列分钟1-59第2列小时1-23(0表示子夜)第3列日1-31第4列月1-12第5列星期0-6(0表示星期天)第6列要运行的命令 下面是crontab的格式:分 时 日 月 星期 要运行的命令 这 ...

  7. <Web 之困 现代Web应用安全指南>一本好书 69.00？

    NET代码安全 界面漏洞防范与程序优化 一. SQL 注入攻击的源头 1. 过滤或转移危险字符 2.  使用SqlParameter类:.NET 框架有一个叫做SqlParameter 的集合类型,可 ...

  8. jQuery parent.append和$after的区别

    首先假设我们有个id为test的div和一个id为test2的div: <div id="test">     我是测试div </div> <div ...

  9. asp.net mvc 4 高级编程学习笔记：第四章 模型

    数据模型 数据模型及O/R转化,采用EntityFramework实现. 可以采用firstCode模型,首先定义模型,通过模型生成数据库,也可以通过安装EFPowerTools,通过数据库自动生成对 ...

  10. struts2文件上传提示信息国际化

    1.在src的目录下新建文件fileUpload.properties 如图: fileUpload.properties文件内容为(把英文提示自定义为中文提示) struts.messages.er ...