官网： http://echarts.baidu.com/index.html

文档：  http://echarts.baidu.com/echarts2/doc/doc.html

 <html>

 <head>

     <title>echart示例</title>

     <script src="echarts-all.js" type="text/javascript"></script>

 </head>

 <body>

 <div id="main1" style="width:1000px;height:600px;border:1px solid #dddddd;margin:10px auto;"></div>

 <script type="text/javascript">

         // 基于准备好的dom，初始化echarts实例

         var myChart1 = echarts.init(document.getElementById('main1'));

         // 指定图表的配置项和数据

         option = {

             title : {

                 x: 'center',                 // 水平安放位置，默认为左对齐，可选为：

                                    // 'center' ¦ 'left' ¦ 'right'

                                    // ¦ {number}（x坐标，单位px）

                 y: 'top',

                 text : '环形图',

                 subtext : '1',

                 itemGap : 0,

                 textStyle : {

                     fontSize: 24,

                     fontWeight: 'bolder',

                     color: '#333'

                 },

                 subtextStyle : {

                     fontSize: 18,

                     fontWeight: 'bolder',

                     color: '#dddddd'

                 }

             },

             tooltip: {

                 trigger: 'item',

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

             },

             legend: {

                 orient: 'vertical',

                 x: 'left',

                 data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']

             },

             series: [

                 {

                     name:'访问来源',

                     type:'pie',

                     radius: ['50%', '70%'],

                     avoidLabelOverlap: false,

                     label: {

                         normal: {

                             show: false,

                             position: 'center'

                         },

                         emphasis: {

                             show: true,

                             textStyle: {

                                 fontSize: '30',

                                 fontWeight: 'bold'

                             }

                         }

                     },

                     labelLine: {

                         normal: {

                             show: false

                         }

                     },

                     data:[

                         {value:335, name:'直接访问'},

                         {value:310, name:'邮件营销'},

                         {value:234, name:'联盟广告'},

                         {value:135, name:'视频广告'},

                         {value:1548, name:'搜索引擎'}

                     ]

                 }

             ]

         };

         // 使用刚指定的配置项和数据显示图表。

         myChart1.setOption(option);

         myChart1.on('click',  function eConsole(param) {

         //这个params可以获取你要的饼图中的当前点击的项的参数

           alert(param.value+'-'+param.name+'-'+param.seriesName);

         });

         /*

 此外param参数包含的内容有：

        param.seriesIndex：系列序号（series中当前图形是第几个图形第几个，从0开始计数）

        param.dataIndex：数值序列（X轴上当前点是第几个点，从0开始计数）

        param.seriesName：legend名称

        param.name：X轴值

        param.data：Y轴值

        param.value：Y轴值

        param.type：点击事件均为click        

         */

     </script>

 </body>

 </html>

Echarts简单案例的更多相关文章

  1. Servlet请求头response应用简单案例

    Servlet请求头response应用简单案例:访问AServlet重定向到BServlet,5秒后跳到CServlet,并显示图片: AServlet package cn.yzu; import ...

  2. winform 通过 html 与swf 交互 简单案例

    在上一篇 winform 与 html 交互 简单案例 中讲了winform与html之间的简单交互,接下来的内容是在winform中以html为中转站,实现将swf嵌入winform中并实现交互. ...

  3. [Design Pattern] Front Controller Pattern 简单案例

    Front Controller Pattern, 即前端控制器模式,用于集中化用户请求,使得所有请求都经过同一个前端控制器处理,处理内容有身份验证.权限验证.记录和追踪请求等,处理后再交由分发器把请 ...

  4. [Design Pattern] Observer Pattern 简单案例

    Observer Pattern,即观察者模式,当存在一对多关系,例如一个对象一有变动,就要自动通知被依赖的全部对象得场景,属于行为类的设计模式. 下面是一个观察者模式的简单案例. Observer ...

  5. [Design Pattern] Mediator Pattern 简单案例

    Meditor Pattern,即调解模式,用一个调解类类处理所有的沟通事件,使得降低多对象之间的沟通难度,属于行为类的设计模式.为了方便理解记忆,我也称其为,沟通模式. 下面是一个调解模式的简单案例 ...

  6. [Design Pattern] Iterator Pattern 简单案例

    Iterator Pattern,即迭代时模式,按照顺序依次遍历集合内的每一个元素,而不用了解集合的底层实现,属于行为类的设计模式.为了方便理解记忆,我也会称其为遍历模式. 下面是一个迭代器模式的简单 ...

  7. [Design Pattern] Command Pattern 简单案例

    Command Pattern, 即命令模式,把一个命令包裹在一个对象里面,将命令对象传递给命令的执行方,属于行为类的设计模式 下面是命令模式的一个简单案例. Stock 代表被操作的对象.Order ...

  8. [Design Pattern] Proxy Pattern 简单案例

    Proxy Pattern, 即代理模式,用一个类代表另一个类的功能,用于隐藏.解耦真正提供功能的类,属于结构类的设计模式. 下面是 代理模式的一个简单案例. Image 定义接口,RealImage ...

  9. [Design Pattern] Flywight Pattern 简单案例

    Flywight Pattern, 即享元模式,用于减少对象的创建,降低内存的占用,属于结构类的设计模式.根据名字,我也将其会理解为 轻量模式. 下面是享元模式的一个简单案例. 享元模式,主要是重用已 ...

随机推荐

  1. Alpha代码规范、冲刺任务与计划

    Alpha代码规范.冲刺任务与计划 团队名称: 云打印 作业要求: Alpha代码规范.冲刺任务与计划 作业目标:代码规范.冲刺任务与计划. 团队队员 队员学号 队员姓名 个人博客地址 备注 2216 ...

  2. Linux下的redis的持久化,主从同步及哨兵

    redis持久化 Redis是一种内存型数据库,一旦服务器进程退出,数据库的数据就会丢失, 为了解决这个问题,Redis提供了两种持久化的方案,将内存中的数据保存到磁盘中,避免数据的丢失. RDB持久 ...

  3. 五花八门的CSS

    一.颜色 rgba(0, 0, 0, 0.5) rgba括号中前3个数字代表着 red green blue三种颜色的rgb值,0-255,最后一个是设定这个颜色的透明度即alpha值.范围从0到1, ...

  4. java中的io系统详解

    相关读书笔记.心得文章列表 Java 流在处理上分为字符流和字节流.字符流处理的单元为 2 个字节的 Unicode 字符,分别操作字符.字符数组或字符串,而字节流处理单元为 1 个字节,操作字节和字 ...

  5. Javascript百学不厌 - 模块模式

    记录自己觉得重要又可能忘记的东西 用模块模式产生安全的对象: var serial_maker = function () { var preifx = ''; var seq = 0; return ...

  6. 前端自动化部署方案-实践（配合shell）

    以下实例项目为vue项目,其他项目当然也雷同咯 在项目中建一个这个么脚本文件 不说了,上代码 #!/bin/sh handle=$1; env=$2; # 远程部署机 webhook # 如果用远程机 ...

  7. Bootstrap轮播如何支持移动端左右滑动

    一直觉得bootstrap的轮播用起来很好用,代码简单,又支持响应式,不过从来没想过,也不知道原来bootstrap的轮播竟然不支持在手机上左右滑动 解决方法就是:使用滑动手势js插件:hammer. ...

  8. Testing - 软件测试知识梳理 - 理解测试

    理解 目的 测试就是要找到关键信息,有关项目和产品的关键决策都是根据这些信息做出. 对产品质量做出总体评估. 找出并报告团队所有可能会对产品价值产生消极影响的问题(但并不意味着能发现所有问题). 重心 ...

  9. jvm加载类的7个步骤

  10. Screen会话命令 Linux

    由于经常在服务器上运行程序,本地不可能一直和服务器保持连接,而且如果本地和服务器的连接断开,在服务器上运行的程序将会终止,为了,查找了一些网络资料,发现screen 会话命令可以保持本地和服务器断开后 ...