1.综述：以饼图为例，只需要对echarts对象option添加以下几行代码即可

//添加点击事件（单击），还有其他鼠标事件和键盘事件等等
myChart1.on("click", function (param){
alert(param.dataIndex+':'+option1.series[0].data[param.dataIndex].name);
});

2.效果图

　　

3.目录结构

　　

4.<head></head>和<body></body>的内容

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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

<div id="myChart1" style="height: 400px"></div>

5.JavaScript部分

<script type="text/javascript">

window.onload=function(){

    //配置echarts的路径

    require.config({

        packages: [{

               name: 'echarts',

               location: 'echarts',

               main: 'echarts'

           }]

     });

    //样例数据，可以是后端传过来的json字符串

    var arr1 = new Array(100,130,76,150);

    require(['echarts','echarts/chart/pie'],

        function drawPie(ec){

            myChart1 = ec.init(document.getElementById('myChart1'));

            var option1 = {

                title : {

                     text: '上个月每周的学习时间分布',

                      //subtext: '饼图（Pie Chart）',

                      x:'center'

                },

                tooltip : {

                  trigger: 'item',

                  //trigger: 'axis',

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

                },

                legend: {

                  orient : 'vertical',

                  x : 'left',

                  y : 'center',

                  data:['第一周'+arr1[0]+'学时',

                        '第二周'+arr1[1]+'学时',

                        '第三周'+arr1[2]+'学时',

                        '第四周'+arr1[3]+'学时'

                        ]

                },

                toolbox: {

                  show : true,

                  feature : {

                    //mark : {show: true},

                    dataView : {show: true, readOnly: false},

                    restore : {show: true},

                    saveAsImage : {show: true}

                  }

                },

                calculable : true,

                series : [

                  {

                      //name:'饼图实例-------------------------------',-------------',

                    type:'pie',

                    radius : '75%',

                    center: ['50%', '60%'],

                    data:[

                        {value:arr1[0], name:'第一周'+arr1[0]+'学时'},

                        {value:arr1[1], name:'第二周'+arr1[1]+'学时'},

                        {value:arr1[2], name:'第三周'+arr1[2]+'学时'},

                        {value:arr1[3], name:'第四周'+arr1[3]+'学时'}

                          ]

                  }

                ]

              };

            // 为echarts对象加载数据

            myChart1.setOption(option1);

            //添加点击事件（单击），还有其他鼠标事件和键盘事件等等

            myChart1.on("click", function (param){

                alert(param.dataIndex+':'+option1.series[0].data[param.dataIndex].name);

            });

    });

}

</script>

echarts对每个data[i]的图片添加点击事件的更多相关文章

  1. ECharts问题--散点图中对散点添加点击事件

    1. 我们这次就没有先讲解怎么使用散点图了,这个跟之前的一些图还是很类似的,不会的可以去官网上面查看 API 使用.我们这次讲解的是为散点图中的散点添加点击事件,然后在图表之外的一个 div 里面显示 ...

  2. Qt:添加点击事件的Label并显示图片

    1.给label添加点击事件 Qt中原本的label是没有点击事件的,如果想添加点击事件的话,可以继承QLabel类并重载鼠标事件(比如mousePressedEvent),然后在鼠标事件中发送一个信 ...

  3. echart字符云之添加点击事件

    // 路径配置 require.config({ paths : { echarts : 'jquery/echarts-2.2.7/build/dist' } }); // 使用EChart.js画 ...

  4. 【MAUI】为 Label、Image 等控件添加点击事件

    一.前言 已经习惯了 WPF.WinForm 中"万物皆可点击"的方式. 但是在 MAUI 中却不行了. 在 MAUI 中,点击.双击的效果,是需要通过"手势识别器&qu ...

  5. iOS开发小技巧 - label中的文字添加点击事件

    Label中的文字添加点击事件 GitHub地址:https://github.com/lyb5834/YBAttributeTextTapAction 以前老师讲过类似的功能,自己懒得回头看了,找了 ...

  6. 【Swift 2.1】为 UIView 添加点击事件和点击效果

    前言 UIView 不像 UIButton 加了点击事件就会有点击效果,体验要差不少,这里分别通过自定义和扩展来实现类似 UIButton 的效果. 声明 欢迎转载,但请保留文章原始出处:) 博客园: ...

  7. 给EditText的drawableRight属性的图片设置点击事件 分类： 学习笔记 android 2015-07-06 13:20 134人阅读 评论(0) 收藏

    这个方法是通用的,不仅仅适用于EditText,也适用于TextView.AutoCompleteTextView等控件. Google官方API并没有给出一个直接的方法用来设置右边图片的点击事件,所 ...

  8. ThinkPHP框架下，给jq动态添加的标签添加点击事件移除标签

    jq移除标签主要就是$("#要移除的id").remove();不再赘述,这里要提醒的是jq中动态添加标签后怎样添加点击事件.一般的jq添加点击事件是用这种方法$("#i ...

  9. 继承UIView的子控件添加点击事件

    UITapGestureRecognizer*tapGesture = [[UITapGestureRecognizer alloc]initWithTarget:selfaction:@select ...

随机推荐

  1. STM32——GPIO之从库函数到寄存器的前因后果

    例子为单片机的"Hello World"级的流水灯实验--虽然只有一个,其中并不是将完整的代码给出,只是给出关键部分来说明"如何调用ST公司的的库来完成对硬件的控制,以及 ...

  2. RAID10与RAID01比较，RAID10与RAID5比较

    RAID10和RAID01的比较RAID10是先做镜象,然后再做条带. RAID01则是先做条带,然后再做镜象.    比如以6个盘为例,RAID10就是先将盘分成3组镜象,然后再对这3个RAID1做 ...

  3. TypeError: Error #1034: 强制转换类型失败:无法将 "0.49" 转换为 mx.graphics.IFill。

    1.错误描述 TypeError: Error #1034: 强制转换类型失败:无法将 "0.49" 转换为 mx.graphics.IFill. at mx.charts.ser ...

  4. Django学习-21-表关系参数

    一对多关系 ForeignKey(ForeignObject) # ForeignObject(RelatedField) to, # 要进行关联的表名 to_field=None, # 要关联的表中 ...

  5. 从0开始整合SSM框架-1.mybatis

    1.建立maven项目 2.首先引入mybatis需要引入的依赖(1).数据库驱动(2).mybatis核心包 <!-- mysql数据库驱动--> <!-- https://mvn ...

  6. 【BZOJ2154】Crash的数字表格（莫比乌斯反演）

    [BZOJ2154]Crash的数字表格(莫比乌斯反演) 题面 BZOJ 简化题意: 给定\(n,m\) 求\[\sum_{i=1}^n\sum_{j=1}^mlcm(i,j)\] 题解 以下的一切都 ...

  7. 【POJ 3401】Asteroids

    题面 Bessie wants to navigate her spaceship through a dangerous asteroid field in the shape of an N x ...

  8. 【洛谷2015】【CJOJ1976】二叉苹果树

    题面 Description 有一棵苹果树,如果树枝有分叉,一定是分2叉(就是说没有只有1个儿子的结点)这棵树共有N个结点(叶子点或者树枝分叉点),编号为1-N,树根编号一定是1.我们用一根树枝两端连 ...

  9. POJ1741

    树分治,每次把每个点的deep取出,排序...尺取法... # include <stdio.h> # include <stdlib.h> # include <ios ...

  10. angular路由详解六（路由守卫）

    路由守卫 CanActivate: 处理导航到某个路由的情况. CanDeactivate:处理从当前路由离开的情况. Resole:在路由激活之前获取路由数据. 1.CanActivate: 处理导 ...