ECharts图表是基于Canvas，纯Javascript图表库，基于BSD开源协议，官网地址：http://echarts.baidu.com/index.html

需要先下载插件：https://github.com/ecomfe/echarts/archive/1.4.1.zip

1. 首先需要在文件中引入JS库，可以使用百度的CDN

<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>

2. 之后创建一个用于显示图表的DIV

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

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

3. 配置加载的图表类型及路径

<script type="text/javascript">

        // 路径配置

        require.config({

            paths:{

                'echarts' : 'http://echarts.baidu.com/build/echarts',

                'echarts/chart/bar' : 'http://echarts.baidu.com/build/echarts',

        'echarts/chart/pie' : 'http://echarts.baidu.com/build/echarts'

            }

        });

</script>

4. 配置图表数据

optionpie = {

　　title: {

　　　　text: '2014年04月客户总满意度比例图',subtext: '测试人员',x: 'center'

　　},

　　tooltip: {

　　　　trigger: 'item',

　　　　formatter: "{a}<br/>{b} : {c} ({d}%)"

　　},

　　legend: {

　　　　orient: 'vertical',

　　　　x: 'left',

　　　　data: ['满意', '不满意']

　　},

　　toolbox: {

　　　　show: true,

　　　　feature: {

　　　　　　restore: true,

　　　　　　saveAsImage: true

　　　　}

　　},

　　calculable: true,

　　series: [

　　{

　　　　name: '总满意度百分比',

　　　　type: 'pie',

　　　　radius: '55%',

　　　　center: ['50%', 225],

　　　　data: [

　　　　{ value: 100, name: '满意' },

　　　　{ value: 16, name: '不满意'}

　　]

　　}

　　]

};

option = {

　　title: {

　　　　text: '2014年04月客户满意度分布图',subtext: '测试人员',x: 'left'

　　},

　　tooltip: {

　　　　trigger: 'axis',

　　　　formatter: "{b}<br/>{a0} : {c0}<br/>{a1} : {c1}"

　　},

　　legend: {

　　　　x: 'right',

　　　　padding: [5,70,5,5],

　　　　data: ['满意', '不满意']

　　},

　　toolbox: {

　　　　show: true,

　　　　feature: {

　　　　　　restore: true,

　　　　　　saveAsImage: true

　　　　}

　　},

　　calculable: true,

　　xAxis: [

　　{

　　　　type: 'category',

　　　　data: ['客服人员满意度', '维修人员满意度', '售后人员满意度']

　　}

　　],

　　yAxis: [

　　{

　　　　type: 'value',

　　　　splitArea: { show: true }

　　}

　　],

　　series: [

　　{

　　　　name: '满意',

　　　　type: 'bar',

　　　　radius: '55%',

　　　　center: ['50%', 225],

　　　　data: [10, 5, 8]},

　　{

　　　　name: '不满意',

　　　　type: 'bar',

　　　　radius: '55%',

　　　　center: ['50%', 225],

　　　　data: [2, 4, 6]}

　　]

};

5. 将数据显示在图表中

require(

[

　　'echarts',

　　'echarts/chart/pie',

　　'echarts/chart/bar'

],

function (ec) {

　　//饼状图

　　var pieChart = ec.init(document.getElementById('pie'));

　　pieChart.setOption(optionpie);

　　

　　//柱状图

　　var myChart = ec.init(document.getElementById('bar'));

　　myChart.setOption(option);

}

)

通过以上即可完成图表的配置，这里附上完整的代码

 <!DOCTYPE html>

 <head>

     <meta charset="utf-8">

     <title>Demo</title>

     <!-- 来自百度CDN -->

     <script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>

 </head>

 <body>

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

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

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

     <script type="text/javascript">

         // 路径配置

         require.config({

             paths:{

                 'echarts' : 'http://echarts.baidu.com/build/echarts',

                 'echarts/chart/bar' : 'http://echarts.baidu.com/build/echarts',

                 'echarts/chart/pie' : 'http://echarts.baidu.com/build/echarts'

             }

         });

         optionpie = {

 title: {

 text: '2014年04月客户总满意度比例图',subtext: '测试人员',x: 'center'

 },

 tooltip: {

 trigger: 'item',

 formatter: "{a}<br/>{b} : {c} ({d}%)"

 },

 legend: {

 orient: 'vertical',

 x: 'left',

 data: ['满意', '不满意']

 },

 toolbox: {

 show: true,

 feature: {

 restore: true,

 saveAsImage: true

 }

 },

 calculable: true,

 series: [

 {

 name: '总满意度百分比',

 type: 'pie',

 radius: '55%',

 center: ['50%', 225],

 data: [

 { value: 100, name: '满意' },

 { value: 16, name: '不满意'}

 ]

 }

 ]

 };

 option = {

 title: {

 text: '2014年04月客户满意度分布图',subtext: '测试人员',x: 'left'

 },

 tooltip: {

 trigger: 'axis',

 formatter: "{b}<br/>{a0} : {c0}<br/>{a1} : {c1}"

 },

 legend: {

 x: 'right',

 padding: [5,70,5,5],

 data: ['满意', '不满意']

 },

 toolbox: {

 show: true,

 feature: {

 restore: true,

 saveAsImage: true

 }

 },

 calculable: true,

 xAxis: [

 {

 type: 'category',

 data: ['客服人员满意度', '维修人员满意度', '售后人员满意度']

 }

 ],

 yAxis: [

 {

 type: 'value',

 splitArea: { show: true }

 }

 ],

 series: [

 {

 name: '满意',

 type: 'bar',

 radius: '55%',

 center: ['50%', 225],

 data: [10, 5, 8]},

 {

 name: '不满意',

 type: 'bar',

 radius: '55%',

 center: ['50%', 225],

 data: [2, 4, 6]}

 ]

 };

 require(

 [

 'echarts',

 'echarts/chart/pie',

 'echarts/chart/bar'

 ],

 function (ec) {

 var pieChart = ec.init(document.getElementById('pie'));

 pieChart.setOption(optionpie);

 var myChart = ec.init(document.getElementById('bar'));

  myChart.setOption(option);

 }

 )

     </script>

 </body>

完整代码复制到html中可以直接运行

完整的API可以参考官网：http://echarts.baidu.com/doc/doc.html

　　

ECharts开源图表使用方法简单介绍的更多相关文章

  1. InputStreamReader 和 OutputStreamWriter类使用方法简单介绍，及演示。

    InputStreamReader 和 OutputStreamWriter类使用方法简单介绍. 一.InputStreamReader类 InputStreamReader 将字节流转换为字符流.是 ...

  2. 基于SIP和RTP协议的开源VOIP之QuteCom简单介绍

    **************************************************************************************************** ...

  3. Android Mediaplayer各种属性和方法简单介绍

    主要涉及类:MediaPlayer (1) 当一个MediaPlayer对象被创建或者调用reset()方法之后,它处于空闲状态,调用release()方法后处于结束状态 1,一个MediaPlaye ...

  4. eclipse IDE使用git方法简单介绍

    eclipse下使用git插件上传代码至github 1.eclipse下安装git eclipse  git 插件的安装. 点击 Help->Install New Software-> ...

  5. awk基本使用方法简单介绍

    之前说过sed, 今天来说awk, 它也是一个文本处理器. 是linux下的一个命令, 比sed更强大. 搞linux开发, 尤其是后台开发, 这个命令差点儿必需要用到. awk这三个字母分别代表其三 ...

  6. java类中的static成员变量和static方法简单介绍，持续补充

    一.静态成员变量 1.属于整个类而不是某个对象实例,所以可以直接通过类名和对象名去调用. 2.静态成员属于整个类,当系统第一次使用该类时,就会为其分配内存空间直到该类被卸载才会进行资源回收 二.静态方 ...

  7. python 子进程 subpocess 的使用方法简单介绍

    python的子进程嘛,就是利用python打开一个子进程(当然像是一句废话),但是可能和我们理解的不太一样. 一:如何理解? 我们可能的理解:多开一个进程运行某个python函数(如果只想实现这个功 ...

  8. Python Appium 元素定位方法简单介绍

    Python  Appium  元素定位 常用的八种定位方法(与selenium通用) # id定位 driver.find_element_by_id() # name定位 driver.find_ ...

  9. java 多线程 start方法 run方法 简单介绍。

    一 start开启一个多线程, run 只是一个内部的方法. package com.aaa.threaddemo; /* * start方法的作用? * 在 Java中启动多线程调用的是start方 ...

随机推荐

  1. 文成小盆友python-num13 整个堡垒机

    本节主要内容: 1.pymsql的使用 2.SQLAchemy使用 3.Paramiko 4.通过ORM功能使用和Paramiko的使用实现一个简单的堡垒机模型. 一.pymsql的使用 pymsql ...

  2. OpenStack点滴01-概览

    OpenStack项目由Rackspace和NASA(美国国家航空航天局)共同发起,它是一个旨在为公共及私有云的建设与管理提供软件的开源项目. 作为一个开源云平台,OpenStack的首要任务是简化云 ...

  3. MongoDB资料汇总专题[转发]

    转发下..这个哥收集的很全 MongoDB资料汇总专题 作者:nosqlfan http://blog.nosqlfan.com/html/3548.html 最后更新时间:2013-04-22 1. ...

  4. DOM 之通俗易懂讲解

    DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...

  5. -fembed-bitcode is not supported on versions of iOS prior to 6.0

    -fembed-bitcode is not supported on versions of iOS prior to 6.0   说法二 错误提示 -fembed-bitcode is not s ...

  6. swift代码排版-参考

    代码排版包括: 空行.空格.断行和缩进等内容.代码排版内容比较多工作量很多,但是非常重要. 空行 空行将逻辑相关的代码段分隔开,以提高可读性.下列情况应该总是添加空行: 类型声明之前. import语 ...

  7. STM32的RTC万年历显示问题

    博客整理后写出来的,有点乱,大家见谅! 想让串口输出万年历效果.每次秒刷新一次 结果是串口软件一直输出,看起来很难受 先讲一讲C代码的\r和\n的区别 \r 就是return 回到 本行 行首 这就会 ...

  8. Update主循环、状态机的实现

    从写一段程序,到写一个app,写一个游戏,到底其中有什么不同呢?一段程序的执行时间很短,一个应用的执行时间很长,仅此而已. 游戏中存在一个帧的概念.   这个概念大家都知道,类比的话,它就是电影胶卷的 ...

  9. ural 1106 Two Teams

    http://acm.timus.ru/problem.aspx?space=1&num=1106 #include <cstdio> #include <cstring&g ...

  10. 创建.NET应用程序所经历的步骤

    1.使用某种.NET兼容语言(如C#)编写应用程序.2.把代码编译为(CIL),存储在程序集中.3.在执行代码时(如果这是一个可执行文件,就自动运行,或者在其他代码使用它时运行),首先必须使用JIT( ...