官网： 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. Trinity的分步运行

    当使用Trinity组装时,如果数据量过大,可以考虑使用--min_kmer_cov 2参数丢弃uniquely occurring kmer, 从而降低内存消耗 设置--no_distributed ...

  2. javascript-浏览器消息提醒

    如何让用户在浏览器最小化的状态下也能及时的收到消息提醒呢? 这个问题作为webRd是要正面面对的. 大约可分两种场景:一种是类似桌面通知的形式还有一种是类似QQ提醒(在系统任务栏闪烁随后高亮);接下来 ...

  3. 了解Java基本数据类型的取值范围

    拿byte类型做栗子 一个字节是8位二进制数,然后最高位会用来作为符号位.正数计算机是存的原码,负数是存的补码. 也就说byte正数最大是0111 1111,转化为十进制是:127(这就是byte的上 ...

  4. 为什么 echo 3 . print(2) . print(4) . 5 . 'c'的结果是45c2131

    例子:请写出echo 3 . print(2) . print(4) . 5 . 'c'的输出结果为____? 许多人看到这个题的第一印象是输出结果不就是3245c嘛,然而正确的是答案却是45c213 ...

  5. MyEclipse + Maven开发Web工程的详细配置过程

    好久没做Web方面的开发,今天突然想弄弄SpringMVC,因为不久前又学了点Maven觉得非常好,所以在弄SpringMVC这个Web框架时想使用Maven来做,但是问题又来了,我一直是在Eclip ...

  6. Python基础入门教程（3）

    人生苦短,我学Pyhton Python(英语发音:/ˈpaɪθən/), 是一种面向对象.解释型计算机程序设计语言,由Guido van Rossum于1989年底发明,第一个公开发行版发行于199 ...

  7. HoloLens开发手记－全息Hologram

    HoloLens使我们可以通过周边世界的光线和声音来创建全息场景和物体,使得它们像真实物体那样.全息场景能够响应你的凝视.手势和语音指令,同时还会和你周边世界的表面交互.借助全息场景,你可以在周边世界 ...

  8. Python常用模块time & datetime &random 模块

    时间模块前言 在Python中,与时间处理有关的模块就包括:time,datetime 一.在Python中,通常有这几种方式来表示时间: 时间戳 格式化的时间字符串 元组(struct_time)共 ...

  9. 课程四(Convolutional Neural Networks)，第四 周（Special applications: Face recognition & Neural style transfer） —— 2.Programming assignments：Art generation with Neural Style Transfer

    Deep Learning & Art: Neural Style Transfer Welcome to the second assignment of this week. In thi ...

  10. antd tree组件文件名换行 + 点击展开时，自动收起同级其他展开目录

    1.在项目中用 antd的tree组件的时候,遇到两个问题 1.文件名太长的话 会超出容器 很难看,解决方法如下 ` 引入css在global下设置 :global { .ant-tree li .a ...