官网： 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. redis key的过期时间

    设置redis key的生存过期时间 Redis 有四个不同的命令可以用于设置键的生存时间(键可以存在多久)或过期时间(键什么时候会被删除) : EXPlRE 命令用于将键key 的生存时间设置为tt ...

  2. [CocoaPods]制作CocoaPod

    创建自己的CocoaPod非常简单.如果你已经有一个单独的组件,那么你就是最重要的.本指南概述了整个过程,本节中的其他指南更适合更高级用户. 我们建议让CocoaPods在这里努力工作.Running ...

  3. maven配置多仓库的方法

    刚接触maven就是在公司里配置好的,所以一直以来使用都没毛病,所以一直没有去动这些固有的东西. 但是,后来把公司的电脑拿回家之后,发现有的东西就搞不起来了.原因也看一下就明白了,因为在公司的时候用的 ...

  4. centos7上安装nagios

    前言:Nagios是一款开源的免费网络监视工具,可以监控Windows.Linux和Unix的主机状态,交换机路由器等网络设备,在系统或服务状态异常时发出邮件或短信报警,第一时间通知网站运维人员.流量 ...

  5. 一个隐蔽的C语言问题反思

    今天在编译一个C代码的时候,从别的编译ok的头文件中拷贝了一份在上面做修改,没想到修改好之后一直 无法调用这个头文件中的函数和变量.看了好久,才在预编译宏中找到了问题的根源.代码 如下所示: 头文件A ...

  6. 机器学习基石笔记：11 Linear Models for Classification

    一.二元分类的线性模型 线性分类.线性回归.逻辑回归: 可视化这三个线性模型的代价函数, SQR.SCE的值都是大于等于0/1的. 理论分析上界: 将回归应用于分类: 线性回归后的参数值常用于pla/ ...

  7. Android分享内容和接收分享内容小小实现

    先来说说分享,毕竟没有分享何来接收分享可谈? 分享目前已实现的有两种方式:后台代码实现.ShareActionProvider实现,接着先说通过代码实现 Intent intent=new Inten ...

  8. Hive SQL基础操作

    创建表 hive 查看本地的文件#Can execute local commands within CLI, place a command in between ! and ;!cat data/ ...

  9. github相关指令学习

    正在廖雪峰官网学习关于git的相关知识,已经不是第一次来学习,但是忘得太快,索性这次边学边记录笔记,加深记忆,方便后期查看 1.找到一个合适的地方,鼠标右键 Git Bush Here ,新建文件夹, ...

  10. 选择排序——Selection Sort

    基本思想: 在长度为N的无序数组中,第一次遍历n-1个数,找到最小的数值与第一个元素交换:第二次遍历n-2个数,找到最小的数值与第二个元素交换:...第n-1次遍历,找到最小的数值与第n-1个元素交换 ...