ECharts问题--散点图中对散点添加点击事件
1. 我们这次就没有先讲解怎么使用散点图了，这个跟之前的一些图还是很类似的，不会的可以去官网上面查看 API 使用。我们这次讲解的是为散点图中的散点添加点击事件，然后在图表之外的一个 div 里面显示这个元素的一些属性，一开始我想的是使用原生 javascript 的click事件来操作，但是这个方法是不可行的，因为我们的图表是在 canvas 中的显示的，所以我们每个散点不是能够我们通过 DOM 操作 来获取的，这里我们可以使用 ECharts 中的一个方法：使用下面的方法我们就可以为图表中的每个元素添加点击事件了。这里要说说明的是在官网的实例中我们看到的是下面的第一行代码跟官网的不一样，官网代码：var ecConfig = require('echarts/config'); ，如果我们这里的代码跟官网写一样的话就会报错：ReferenceError: require is not defined，这是因为我们在练习和实际的开发中很多时候是通过标签的形式引入的 echarts，这样不同于模块的引用（这里的实现是使用的 sea.js 中的 require() 方法来载入和引用模块，有兴趣的可以自己去了解一下）。
var ecConfig = echarts.config;
function eConsole(param){
sex.innerText = param.seriesName;
if(param.value.length > 1) {
height.innerText = param.value[0]+'cm';
weight.innerText = param.value[1]+'kg';
} else {
height.innerText = param.name+'cm';
weight.innerText = param.value+'kg';
}
} //在这里做一个点击事件的监听，绑定的是eConsole方法
myChart.on(ecConfig.EVENT.CLICK, eConsole);
2. 下面我们贴出所有的代码和显示图片：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/echarts-all.js"></script>
</head> <body>
<div id="main" style="width: 1200px;height:500px;"></div>
<div>
性别：<span id="sex">未知</span><br />
身高：<span id="hight">未知</span><br />
体重：<span id="weight">未知</span>
</div>
</body>
<script>
var myChart = echarts.init(document.getElementById('main')); var option = {
title: {
text: '男性女性身高体重分布',
subtext: '抽样调查来自: Heinz 2003'
},
tooltip: {
trigger: 'axis',
showDelay: 0,
formatter: function(params) {
if(params.value.length > 1) {
return params.seriesName + ' :<br/>' +
params.value[0] + 'cm ' +
params.value[1] + 'kg ';
} else {
return params.seriesName + ' :<br/>' +
params.name + ' : ' +
params.value + 'kg ';
}
},
axisPointer: {
show: true,
type: 'cross',
lineStyle: {
type: 'dashed',
width: 1
}
}
},
legend: {
data: ['女性', '男性']
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
dataZoom: {
show: true
},
dataView: {
show: true,
readOnly: false
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
xAxis: [{
type: 'value',
scale: true,
axisLabel: {
formatter: '{value} cm'
}
}],
yAxis: [{
type: 'value',
scale: true,
axisLabel: {
formatter: '{value} kg'
}
}],
series: [{
name: '女性',
type: 'scatter',
data: [
[161.2, 51.6],
[167.5, 59.0],
[159.5, 49.2],
[157.0, 63.0],
[155.8, 53.6],
[170.0, 59.0],
[159.1, 47.6],
[166.0, 69.8],
[176.2, 66.8],
[160.2, 75.2],
[172.5, 55.2],
[170.9, 54.2],
[172.9, 62.5],
[153.4, 42.0],
[160.0, 50.0],
[147.2, 49.8],
[168.2, 49.2],
[175.0, 73.2],
[157.0, 47.8],
[167.6, 68.8],
[159.5, 50.6],
[175.0, 82.5],
[166.8, 57.2],
[176.5, 87.8],
[170.2, 72.8],
[174.0, 54.5],
[173.0, 59.8],
[179.9, 67.3],
[170.5, 67.8],
[160.0, 47.0],
[154.4, 46.2],
[162.0, 55.0],
[176.5, 83.0],
[160.0, 54.4],
[152.0, 45.8],
[162.1, 53.6],
[170.0, 73.2],
[160.2, 52.1],
[161.3, 67.9],
[166.4, 56.6],
[168.9, 62.3],
[163.8, 58.5],
[167.6, 54.5],
[160.0, 50.2],
[161.3, 60.3],
[167.6, 58.3],
[165.1, 56.2],
[160.0, 50.2],
[170.0, 72.9],
[157.5, 59.8],
[167.6, 61.0],
[160.7, 69.1],
[163.2, 55.9],
[152.4, 46.5],
[157.5, 54.3],
[168.3, 54.8],
[180.3, 60.7],
[165.5, 60.0],
[165.0, 62.0],
[164.5, 60.3],
[156.0, 52.7],
[160.0, 74.3],
[163.0, 62.0],
[165.7, 73.1],
[161.0, 80.0],
[162.0, 54.7],
[166.0, 53.2],
[174.0, 75.7],
[172.7, 61.1],
[167.6, 55.7],
[151.1, 48.7],
[164.5, 52.3],
[163.5, 50.0],
[152.0, 59.3],
[169.0, 62.5],
[164.0, 55.7],
[161.2, 54.8],
[155.0, 45.9],
[170.0, 70.6],
[176.2, 67.2],
[170.0, 69.4],
[162.5, 58.2],
[170.3, 64.8],
[164.1, 71.6],
[169.5, 52.8],
[163.2, 59.8],
[154.5, 49.0],
[159.8, 50.0],
[173.2, 69.2],
[170.0, 55.9],
[161.4, 63.4],
[169.0, 58.2],
[166.2, 58.6],
[159.4, 45.7],
[162.5, 52.2],
[159.0, 48.6],
[162.8, 57.8],
[159.0, 55.6],
[179.8, 66.8],
[162.9, 59.4],
[161.0, 53.6],
[151.1, 73.2],
[168.2, 53.4],
[168.9, 69.0],
[173.2, 58.4],
[171.8, 56.2],
[178.0, 70.6],
[164.3, 59.8],
[163.0, 72.0],
[168.5, 65.2],
[166.8, 56.6],
[172.7, 105.2],
[163.5, 51.8],
[169.4, 63.4],
[167.8, 59.0],
[159.5, 47.6],
[167.6, 63.0],
[161.2, 55.2],
[160.0, 45.0],
[163.2, 54.0],
[162.2, 50.2],
[161.3, 60.2],
[149.5, 44.8],
[157.5, 58.8],
[163.2, 56.4],
[172.7, 62.0],
[155.0, 49.2],
[156.5, 67.2],
[164.0, 53.8],
[160.9, 54.4],
[162.8, 58.0],
[167.0, 59.8],
[160.0, 54.8],
[160.0, 43.2],
[168.9, 60.5],
[158.2, 46.4],
[156.0, 64.4],
[160.0, 48.8],
[167.1, 62.2],
[158.0, 55.5],
[167.6, 57.8],
[156.0, 54.6],
[162.1, 59.2],
[173.4, 52.7],
[159.8, 53.2],
[170.5, 64.5],
[159.2, 51.8],
[157.5, 56.0],
[161.3, 63.6],
[162.6, 63.2],
[160.0, 59.5],
[168.9, 56.8],
[165.1, 64.1],
[162.6, 50.0],
[165.1, 72.3],
[166.4, 55.0],
[160.0, 55.9],
[152.4, 60.4],
[170.2, 69.1],
[162.6, 84.5],
[170.2, 55.9],
[158.8, 55.5],
[172.7, 69.5],
[167.6, 76.4],
[162.6, 61.4],
[167.6, 65.9],
[156.2, 58.6],
[175.2, 66.8],
[172.1, 56.6],
[162.6, 58.6],
[160.0, 55.9],
[165.1, 59.1],
[182.9, 81.8],
[166.4, 70.7],
[165.1, 56.8],
[177.8, 60.0],
[165.1, 58.2],
[175.3, 72.7],
[154.9, 54.1],
[158.8, 49.1],
[172.7, 75.9],
[168.9, 55.0],
[161.3, 57.3],
[167.6, 55.0],
[165.1, 65.5],
[175.3, 65.5],
[157.5, 48.6],
[163.8, 58.6],
[167.6, 63.6],
[165.1, 55.2],
[165.1, 62.7],
[168.9, 56.6],
[162.6, 53.9],
[164.5, 63.2],
[176.5, 73.6],
[168.9, 62.0],
[175.3, 63.6],
[159.4, 53.2],
[160.0, 53.4],
[170.2, 55.0],
[162.6, 70.5],
[167.6, 54.5],
[162.6, 54.5],
[160.7, 55.9],
[160.0, 59.0],
[157.5, 63.6],
[162.6, 54.5],
[152.4, 47.3],
[170.2, 67.7],
[165.1, 80.9],
[172.7, 70.5],
[165.1, 60.9],
[170.2, 63.6],
[170.2, 54.5],
[170.2, 59.1],
[161.3, 70.5],
[167.6, 52.7],
[167.6, 62.7],
[165.1, 86.3],
[162.6, 66.4],
[152.4, 67.3],
[168.9, 63.0],
[170.2, 73.6],
[175.2, 62.3],
[175.2, 57.7],
[160.0, 55.4],
[165.1, 104.1],
[174.0, 55.5],
[170.2, 77.3],
[160.0, 80.5],
[167.6, 64.5],
[167.6, 72.3],
[167.6, 61.4],
[154.9, 58.2],
[162.6, 81.8],
[175.3, 63.6],
[171.4, 53.4],
[157.5, 54.5],
[165.1, 53.6],
[160.0, 60.0],
[174.0, 73.6],
[162.6, 61.4],
[174.0, 55.5],
[162.6, 63.6],
[161.3, 60.9],
[156.2, 60.0],
[149.9, 46.8],
[169.5, 57.3],
[160.0, 64.1],
[175.3, 63.6],
[169.5, 67.3],
[160.0, 75.5],
[172.7, 68.2],
[162.6, 61.4],
[157.5, 76.8],
[176.5, 71.8],
[164.4, 55.5],
[160.7, 48.6],
[174.0, 66.4],
[163.8, 67.3]
],
markPoint: {
data: [{
type: 'max',
name: '最大值'
}, {
type: 'min',
name: '最小值'
}]
},
markLine: {
data: [{
type: 'average',
name: '平均值'
}]
}
}, {
name: '男性',
type: 'scatter',
data: [
[174.0, 65.6],
[175.3, 71.8],
[193.5, 80.7],
[186.5, 72.6],
[187.2, 78.8],
[181.5, 74.8],
[184.0, 86.4],
[184.5, 78.4],
[175.0, 62.0],
[184.0, 81.6],
[180.0, 76.6],
[177.8, 83.6],
[192.0, 90.0],
[176.0, 74.6],
[174.0, 71.0],
[184.0, 79.6],
[192.7, 93.8],
[171.5, 70.0],
[173.0, 72.4],
[176.0, 85.9],
[176.0, 78.8],
[180.5, 77.8],
[172.7, 66.2],
[176.0, 86.4],
[173.5, 81.8],
[178.0, 89.6],
[180.3, 82.8],
[180.3, 76.4],
[164.5, 63.2],
[173.0, 60.9],
[183.5, 74.8],
[175.5, 70.0],
[188.0, 72.4],
[189.2, 84.1],
[172.8, 69.1],
[170.0, 59.5],
[182.0, 67.2],
[170.0, 61.3],
[177.8, 68.6],
[184.2, 80.1],
[186.7, 87.8],
[171.4, 84.7],
[172.7, 73.4],
[175.3, 72.1],
[180.3, 82.6],
[182.9, 88.7],
[188.0, 84.1],
[177.2, 94.1],
[172.1, 74.9],
[167.0, 59.1],
[169.5, 75.6],
[174.0, 86.2],
[172.7, 75.3],
[182.2, 87.1],
[164.1, 55.2],
[163.0, 57.0],
[171.5, 61.4],
[184.2, 76.8],
[174.0, 86.8],
[174.0, 72.2],
[177.0, 71.6],
[186.0, 84.8],
[167.0, 68.2],
[171.8, 66.1],
[182.0, 72.0],
[167.0, 64.6],
[177.8, 74.8],
[164.5, 70.0],
[192.0, 101.6],
[175.5, 63.2],
[171.2, 79.1],
[181.6, 78.9],
[167.4, 67.7],
[181.1, 66.0],
[177.0, 68.2],
[174.5, 63.9],
[177.5, 72.0],
[170.5, 56.8],
[182.4, 74.5],
[197.1, 90.9],
[180.1, 93.0],
[175.5, 80.9],
[180.6, 72.7],
[184.4, 68.0],
[175.5, 70.9],
[180.6, 72.5],
[177.0, 72.5],
[177.1, 83.4],
[181.6, 75.5],
[176.5, 73.0],
[175.0, 70.2],
[174.0, 73.4],
[165.1, 70.5],
[177.0, 68.9],
[192.0, 102.3],
[176.5, 68.4],
[169.4, 65.9],
[182.1, 75.7],
[179.8, 84.5],
[175.3, 87.7],
[184.9, 86.4],
[177.3, 73.2],
[167.4, 53.9],
[178.1, 72.0],
[168.9, 55.5],
[157.2, 58.4],
[180.3, 83.2],
[170.2, 72.7],
[177.8, 64.1],
[172.7, 72.3],
[165.1, 65.0],
[186.7, 86.4],
[165.1, 65.0],
[174.0, 88.6],
[175.3, 84.1],
[185.4, 66.8],
[177.8, 75.5],
[180.3, 93.2],
[180.3, 82.7],
[177.8, 58.0],
[177.8, 79.5],
[177.8, 78.6],
[177.8, 71.8],
[177.8, 116.4],
[163.8, 72.2],
[188.0, 83.6],
[198.1, 85.5],
[175.3, 90.9],
[166.4, 85.9],
[190.5, 89.1],
[166.4, 75.0],
[177.8, 77.7],
[179.7, 86.4],
[172.7, 90.9],
[190.5, 73.6],
[185.4, 76.4],
[168.9, 69.1],
[167.6, 84.5],
[175.3, 64.5],
[170.2, 69.1],
[190.5, 108.6],
[177.8, 86.4],
[190.5, 80.9],
[177.8, 87.7],
[184.2, 94.5],
[176.5, 80.2],
[177.8, 72.0],
[180.3, 71.4],
[171.4, 72.7],
[172.7, 84.1],
[172.7, 76.8],
[177.8, 63.6],
[177.8, 80.9],
[182.9, 80.9],
[170.2, 85.5],
[167.6, 68.6],
[175.3, 67.7],
[165.1, 66.4],
[185.4, 102.3],
[181.6, 70.5],
[172.7, 95.9],
[190.5, 84.1],
[179.1, 87.3],
[175.3, 71.8],
[170.2, 65.9],
[193.0, 95.9],
[171.4, 91.4],
[177.8, 81.8],
[177.8, 96.8],
[167.6, 69.1],
[167.6, 82.7],
[180.3, 75.5],
[182.9, 79.5],
[176.5, 73.6],
[186.7, 91.8],
[188.0, 84.1],
[188.0, 85.9],
[177.8, 81.8],
[174.0, 82.5],
[177.8, 80.5],
[171.4, 70.0],
[185.4, 81.8],
[185.4, 84.1],
[188.0, 90.5],
[188.0, 91.4],
[182.9, 89.1],
[176.5, 85.0],
[175.3, 69.1],
[175.3, 73.6],
[188.0, 80.5],
[188.0, 82.7],
[175.3, 86.4],
[170.5, 67.7],
[179.1, 92.7],
[177.8, 93.6],
[175.3, 70.9],
[182.9, 75.0],
[170.8, 93.2],
[188.0, 93.2],
[180.3, 77.7],
[177.8, 61.4],
[185.4, 94.1],
[168.9, 75.0],
[185.4, 83.6],
[180.3, 85.5],
[174.0, 73.9],
[167.6, 66.8],
[182.9, 87.3],
[160.0, 72.3],
[180.3, 88.6],
[167.6, 75.5],
[186.7, 101.4],
[175.3, 91.1],
[175.3, 67.3],
[175.9, 77.7],
[175.3, 81.8],
[179.1, 75.5],
[181.6, 84.5],
[177.8, 76.6],
[182.9, 85.0],
[177.8, 102.5],
[184.2, 77.3],
[179.1, 71.8],
[176.5, 87.9],
[188.0, 94.3],
[174.0, 70.9],
[167.6, 64.5],
[170.2, 77.3],
[167.6, 72.3],
[188.0, 87.3],
[174.0, 80.0],
[176.5, 82.3],
[180.3, 73.6],
[167.6, 74.1],
[188.0, 85.9],
[180.3, 73.2],
[167.6, 76.3],
[183.0, 65.9],
[183.0, 90.9],
[179.1, 89.1],
[170.2, 62.3],
[177.8, 82.7],
[179.1, 79.1],
[190.5, 98.2],
[177.8, 84.1],
[180.3, 83.2],
[180.3, 83.2]
],
markPoint: {
data: [{
type: 'max',
name: '最大值'
}, {
type: 'min',
name: '最小值'
}]
},
markLine: {
data: [{
type: 'average',
name: '平均值'
}]
}
}]
}; myChart.setOption(option); //获取三个DOM元素
var sex = document.getElementById('sex');
var height = document.getElementById('hight');
var weight = document.getElementById('weight'); var ecConfig = echarts.config;
function eConsole(param){
sex.innerText = param.seriesName;
if(param.value.length > 1) {
height.innerText = param.value[0]+'cm';
weight.innerText = param.value[1]+'kg';
} else {
height.innerText = param.name+'cm';
weight.innerText = param.value+'kg';
}
} //在这里做一个点击事件的监听，绑定的是eConsole方法
myChart.on(ecConfig.EVENT.CLICK, eConsole);
</script> </html>
ECharts问题--散点图中对散点添加点击事件的更多相关文章
- echarts对每个data[i]的图片添加点击事件
1.综述:以饼图为例,只需要对echarts对象option添加以下几行代码即可 //添加点击事件(单击),还有其他鼠标事件和键盘事件等等 myChart1.on("click", ...
- IOS开发中如何给UIImageView添加点击事件
1.先创建一个UIImageView控件: photeImageView = [[UIImageView alloc]init]; photeImageView.frame = CGRectMake( ...
- iOS 为移动中的UIView(UIButton )添加点击事件
高高兴兴迎接新的产品新需求,满心欢喜的开始工作,结果研究了一下午才发现,是自己想的太简单了,是我太单纯呀. 需求是这样的类似下雪的效果,随机产生一些小雪花,然后每个雪花可以点击到下个页面. 接到需求之 ...
- RecylerView为item添加点击事件
RecyclerView侧重的是布局的灵活性,虽说可以替代ListView但是连基本的点击事件都没有,这篇文章就来详细讲解如何为RecyclerView的item添加点击事件. 1 原理: 为Recy ...
- iOS开发小技巧 - label中的文字添加点击事件
Label中的文字添加点击事件 GitHub地址:https://github.com/lyb5834/YBAttributeTextTapAction 以前老师讲过类似的功能,自己懒得回头看了,找了 ...
- [Swift通天遁地]一、超级工具-(1)动态标签：给UILabel文字中的Flag和url添加点击事件
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- IOS开发之功能模块--给任意的UIView添加点击事件
前言:好久没写博客,今天来一波.我在实际项目开发中,会遇到这样功能需求:我已经搭好了iOS的UI界面,但是很多界面的子View用了UIView,然后这些UIView中用了UILabel和UIImage ...
- echart字符云之添加点击事件
// 路径配置 require.config({ paths : { echarts : 'jquery/echarts-2.2.7/build/dist' } }); // 使用EChart.js画 ...
- ThinkPHP框架下，给jq动态添加的标签添加点击事件移除标签
jq移除标签主要就是$("#要移除的id").remove();不再赘述,这里要提醒的是jq中动态添加标签后怎样添加点击事件.一般的jq添加点击事件是用这种方法$("#i ...
随机推荐
- 淘宝RubyGems和NPM镜像的使用
题记:前不久在windows下配置jekyll环境时,需要用到gem,一个ruby的管理包,类似于管理nodejs包的npm.安装ruby环境后,使用gem安装包时请求国外的[https://ruby ...
- 集大通APP案例分析
前言 很多同学有误解: 软件工程课是否就是理论课? 或者是几个牛人拼命写代码,其他人打酱油的课? 要不然就是学习一个程序语言,搞一个职业培训的课? 都不对!软件工程有理论,有实践,更重要的是分析,思辨 ...
- linux启动和关闭防火墙命令
在此说一下关于启动和关闭防火墙的命令:1) 重启后生效开启: chkconfig iptables on关闭: chkconfig iptables off2) 即时生效,重启后失效开启: servi ...
- IDEA里面添加lombok插件,编写简略风格Java代码
在 java平台上,lombok 提供了简单的注解的形式来帮助我们消除一些必须有但看起来很臃肿的代码, 比如属性的get/set,及对象的toString等方法,特别是相对于 POJO; 关于lomb ...
- akka与slf4j导致jvm直接crash的诡异
流程很简单,创建actorSystem,通过actorSystem获取AkkaQueryServiceRetriever,进而通过传递path获得的Gateway进行通信. 之前在主项目里跑的很稳定, ...
- 算法(5)Jump Game
题目:非负数的数组,每个数组元素代表这你能最大跨越多少步,初始在0的位置,问,能不能正好调到数组的最后一位! https://leetcode.com/problems/jump-game/#/des ...
- http请求的过程
http请求格式: http请求格式由四部分组成,分别是:请求行,请求头,空行,消息体,每个部分占一行. 请求行是消息体的第一行,由三部分组成,分别是:请求方法,请求资源的url,http的版本号. ...
- [剑指Offer] 23.二叉搜索树的后序遍历
[思路]BST的后序序列的合法序列是,对于一个序列S,最后一个元素是x (也就是根),如果去掉最后一个元素的序列为T,那么T满足:T可以分成两段,前一段(左子树)小于x,后一段(右子树)大于x,且这两 ...
- Java的sql语句 写关键字不需要添加单引号
Java的sql语句 写关键字不需要添加单引号
- I/O多路转接-epoll
By francis_hao Aug 5,2017 APUE讲多路转接的章节介绍了select.pselect和poll函数.而epoll是linux内核在2.5.44引入的.在glibc ...