官网： 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. grid布局笔记学习一之父元素（容器）

    HTML代码: <div id="box"> <div class="lbox box1" style="background: # ...

  2. Android 框架式编程 —— 起篇

    一般的,在开发的时候,写过的代码在需求变更后,发现需要改动非常多的地方,那么说明之前的代码的架构肯定是存在问题的. 下面我们结合面向对象的六大基本原则谈Android 框架式编程.首先先介绍一下面向对 ...

  3. 第二十六节：复习Java语言基础-Java的概述，匿名对象，封装，构造函数

    Java基础 Java语言概述 Java语言 语言 描述 javaee 企业版 javase 标准版 javame 小型版 JDK JDK(Java开发工具包) Java语言 语言 Java语言 Ja ...

  4. jQuery应用实例1：定时弹出图片

    以前用JS实现的:http://www.cnblogs.com/xuyiqing/p/8373064.html 这里利用jQuery实现,并且做得更完善: <!DOCTYPE html> ...

  5. 第六篇: 分布式配置中心(Spring Cloud Config)

    一.简介 在分布式系统中,由于服务数量巨多,为了方便服务配置文件统一管理,实时更新,所以需要分布式配置中心组件. 在Spring Cloud中,有分布式配置中心组件spring cloud confi ...

  6. Tools - 源代码阅读分析工具Source Insight

    简介 https://www.sourceinsight.com/ Source Insight是一个面向项目开发的程序编辑器和代码浏览器,可以分析C/C++.C#.Java.Python等语言源代码 ...

  7. 疫苗：JAVA HASHMAP的死循环

    在淘宝内网里看到同事发了贴说了一个CPU被100%的线上故障,并且这个事发生了很多次,原因是在Java语言在并发情况下使用HashMap造成Race Condition,从而导致死循环.这个事情我4. ...

  8. Atom编辑器中安装Emmet插件失败的问题

    今天使用Atom编辑器安装Emmet插件的时候,刚开始的时候报错: 报错内容如下: Installing “emmet@2.4.3” failed.Show output… Compiler tool ...

  9. Spring Boot Actuator监控应用

    微服务的特点决定了功能模块的部署是分布式的,大部分功能模块都是运行在不同的机器上,彼此通过服务调用进行交互,前后台的业务流会经过很多个微服务的处理和传递,出现了异常如何快速定位是哪个环节出现了问题? ...

  10. 剖析PHP底层数组是如何实现的

    PHP是一门入门容易,使用范围广泛的语言,以其灵活性以及web后端开发被很多人熟知,也被很多人戏称“PHP是世界上最好的语言”.本人是一名“忠实”的PHPer,相信用过PHP的程序员都会体会到PHP数 ...