官网： 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冲刺（团队5/10）

    项目Alpha冲刺(团队5/10) 团队名称: 云打印 作业要求: 项目Alpha冲刺(团队) 作业目标: 完成项目Alpha版本 团队队员 队员学号 队员姓名 个人博客地址 备注 221600412 ...

  2. Java 中的 HttpServletRequest 和 HttpServletResponse 对象

    HttpServletRequest对象详解 javax.servlet.http.HttpServletRequest是SUN制定的Servlet规范,是一个接口.表示请求,“HTTP请求协议”的完 ...

  3. Android开发工程师文集-layout_weight讲解

    前言 大家好,给大家带来Android开发工程师文集-layout_weight讲解的概述,希望你们喜欢 Layout_weight的相关代码展示 <TextView android:layou ...

  4. 从小白到使用antd+react+react-router+issue+es6搭建博客

    概述 本身是前端小白,学过html,css,js的各种书,各种视屏,就是没有接触web开发的内容.偶然看见一个朋友用react搭建了一个博客,于是本着程序员无所不能的精神,也尝试着用react搭建博客 ...

  5. ElasticSearch核心知识总结（二）

    如何超出扩容极限,以及如何提升容错性 primary&replica自动负载均衡,6个shared,3个primary,3个replica,随着机器扩容,会被均衡分配到多台机器上 6个shar ...

  6. Linux - 多窗口管理器Screen程序

    GNU's Screen homepage Screen是由GNU计划开发的用于命令行终端切换的自由软件,可以看作是窗口管理器的命令行界面版本. 可以通过该软件同时连接多个本地或远程的命令行会话,并在 ...

  7. MySQL Workbench导出Model提示['ERROR 1064 (42000): You have an error in your SQL syntax....syntax to use near 'VISIBLE']

    CREATE TABLE IF NOT EXISTS `pihealth`.`warning_events` ( `wid` INT NOT NULL AUTO_INCREMENT, `wtime` ...

  8. hdu 6058---Kanade's sum（链表）

    题目链接 Problem Description Give you an array A[1..n]of length n. Let f(l,r,k) be the k-th largest elem ...

  9. EntityFramework使用总结(与MVC4.0实现CURD操作)

    本篇文介绍一下Entity Framework Code First的简单用法,通过一个学生信息的增删查改来学习Entity Framework的使用及与存储过程的交互.我也是学习Entity Fra ...

  10. How to translate virtual to physical addresses through /proc/pid/pagemap

    墙外通道:http://fivelinesofcode.blogspot.com/2014/03/how-to-translate-virtual-to-physical.html I current ...