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. 关于FusionCharts图表宽度width的设置问题导致图表显示异常的解决办法

    关于FusionCharts图表宽度width的设置问题导致图表显示异常的解决办法 题设: 经常使用FusionCharts图表的朋友可能会遇到这个问题.就是在FusionCharts显示的时候有时候 ...

  2. 运行项目Tomcat报错

    1.具体报错如下: Server Tomcat v7.0 Server at localhost was unable to start within 45 seconds. If the serve ...

  3. strcmp函数实现

    /* 功能:比较字符串s1和s2大小. 一般形式:int strcmp(字符串1,字符串2) 说明: 当s1<s2时,返回-1 当s1=s2时,返回 0 当s1>s2时,返回 1 即两个字 ...

  4. java并发：Synchronized 原理

    1.同步代码块: 反编译结果: monitorenter : 每个对象有一个监视器锁(monitor).当monitor被占用时就会处于锁定状态,线程执行monitorenter指令时尝试获取moni ...

  5. Array.from()

    es6 Array.from() 方法将两类对象转为真正的数组 用法:用于将两类对象转为真正的数组:类似数组的对象和可遍历(iterable)的对象(包含ES6新增的数据结构Set和Map); 说明: ...

  6. Mac 常用快捷键

    可以按下组合键来实现通常需要鼠标.触控板或其他输入设备才能完成的操作. 要使用键盘快捷键,需按住一个或多个修饰键,同时按快捷键的最后一个键.例如,要使用快捷键 Command-C(拷贝),请按住 Co ...

  7. SpringMVC源码情操陶冶-RequestMappingHandlerAdapter适配器

    承接前文SpringMVC源码情操陶冶-HandlerAdapter适配器简析.RequestMappingHandlerAdapter适配器组件是专门处理RequestMappingHandlerM ...

  8. Luogu Dynamic Ranking (带修改的主席树)

    题目大意: 网址:https://www.luogu.org/problemnew/show/2617 给定一个序列a[1].a[2].....a[N],完成M个操作,操作有两种: [1]Q i j ...

  9. LCT维护子树信息(BZOJ4530：[BJOI2014]大融合)

    题面 没有权限号的可以去LOJ Sol 大家都知道,\(LCT\)上有许多实边和虚边 实边就是每棵\(Splay\)上的既认父亲又认儿子的边 虚边就是\(Splay\)和\(Splay\)之间只认父亲 ...

  10. Vue-生命周期图示 注解

    根据腾讯课堂视频讲解,将官网生命周期图示进行注解,以加深印象和理解 贴一个源码示例: 注意位置和写法