首页 > 代码库 > echarts对每个data[i]的图片添加点击事件
echarts对每个data[i]的图片添加点击事件
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="http://www.mamicode.com/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]的图片添加点击事件
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。