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. My97 DatePicker普通调用

    My97 DatePicker普通调用 1.设计源码 <%@ page language="java" import="java.util.*" page ...

  2. 三：Linux 的基本命令、

    Ubuntu切换用户 su root sudo passwd root 使用管理员提权修改root 登录密码 连续输入两次即可..... 重置root 用户密码 例:当前登录用户为:ubuntu,但是 ...

  3. 【Luogu2900】土地征用（斜率优化，动态规划）

    [Luogu2900]土地征用(斜率优化,动态规划) 题面 Description 农夫John准备扩大他的农场,他正在考虑N (1 <= N <= 50,000) 块长方形的土地. 每块 ...

  4. LightOJ1245 Harmonic Number (II)

    题意 \(求\Sigma \lfloor \frac{n}{i} \rfloor\) Input starts with an integer T (≤ 1000), denoting the num ...

  5. [ZJOI2006]书架（树状数组水过）

    这道题显然平衡树,splay,treap什么的随便切 然而我不想打,决定水过这道题 把空间开3倍,树状数组维护它前面的树的个数,开个id数组记录位置 找一个数排名直接二分加求前缀和,log^2的搞一搞 ...

  6. Hive 自定义函数

    hive 支持自定义UDF,UDTF,UDAF函数 以自定义UDF为例: 使用一个名为evaluate的方法 package com.hive.custom; import org.apache.ha ...

  7. MongoDB存储引擎（下）——In-Memory

    前两篇文章分别介绍了MMAPv1和WiredTiger,这两个存储引擎都是会将数据持久化存储到硬盘的,除此之外,MongoDB也有只将数据存储在内存的存储引擎,那就是In-Memory. In-Mem ...

  8. SEO优化策略

    原文:http://www.upwqy.com/details/186.html 1 首先了解seo是什么 SEO是英文Search Engine Optimization的缩写,中文译为" ...

  9. 怎么修改无法启动的docker容器的配置？

    原因: 由于错误的配置导致原来可以启动的docker容器不能启动了.相信很多人的做法是删除容器重建一个,这样也是可以的,但是你的配置和插件就得重新安装,非常麻烦.最小的代价当然是修改原来的配置让他能启 ...

  10. python全栈开发-Day3 字符串

    python全栈开发-Day3 字符串 一.按照以下几个点展开字符串的学习  #一:基本使用 1. 用途 #首先字符串主要作用途径:名字,性别,国籍,地址等描述信息2.定义方式 在单引号\双引号\三引 ...