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. Red Hat Enterprise Linux 6 “桌面”、“工作站”、“服务器” 版本差异比较

    Red Hat Enterprise Linux 6,共有三个版本.通过安装发现,所谓的"桌面"."工作站"."服务器"这三个版本的区别就在 ...

  2. xml字符串转为XmlDocument

    string xml = "<xml><logistics_express_get_respose><express_detail><company ...

  3. Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖

    1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...

  4. 【NFS】nfs安装调优

    nfs [root@flymaster ~]# rpm -qa nfs-utils rpcbindnfs-utils-1.2.3-75.el6.x86_64rpcbind-0.2.0-13.el6_9 ...

  5. CSS3 Tranform 3D 的应用

    CSS3 Tranform 3D 的应用 一.perspective 属性 1. 作用: 设置元素被查看位置的视图,类似于眼睛到屏幕的距离,一般跟 perspective-origin 共同作用在一个 ...

  6. 使用ASP.NET广告控件的XML语言创建广告链接--ASP.NET

    1.AdRotator广告控件的所有属性都是可选的,XML文件中可以包含如下表所示的属性(XML文件的广告属性).   属性 说明 ImageUrl 要显示的图像的URL  NavigateUrl 单 ...

  7. js 数组去重常见的几种方式

    1.利用标记 var arr = [2,6,2,6,4,3,16];// arr = [2,6,4,3,16] function norepeat(arr){ var res = []; for(va ...

  8. Python Cookbook(第3版)中文版：15.17 传递文件名给C扩展

    15.17 传递文件名给C扩展¶ 问题¶ 你需要向C库函数传递文件名,但是需要确保文件名根据系统期望的文件名编码方式编码过. 解决方案¶ 写一个接受一个文件名为参数的扩展函数,如下这样: static ...

  9. 深度学习框架： Keras官方中文版文档正式发布

    今年 1 月 12 日,Keras 作者 François Chollet‏ 在推特上表示因为中文读者的广泛关注,他已经在 GitHub 上展开了一个 Keras 中文文档项目.而昨日,Françoi ...

  10. Unity3D 引擎基础 C# （数据结构入门） Unity3D 界面 UI（NGUI）（动画系统，导航系统）（委托与事件，常用设计模式）

    Geomagic Sculpt 2016.2 Windows Software 11个月前 (01-17) 0评论 Geomagic Sculpt 触觉式三维设计 触碰您的设计使用三维工具做三维设计. ...