笔记:方便自己,方便他人
echarts散点图气泡大小如何控制
<%@ page language="java" import="Dbutil.connDb,java.util.*" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
ArrayList<String[]> list = connDb.index_2();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ECharts 可视化分析拉勾网招聘信息</title>
<link href="./css/style.css" type='text/css' rel="stylesheet"/>
<script src="./js/echarts.min.js"></script>
</head>
<body>
<div class='header'>
<p>ECharts 可视化分析拉勾网招聘信息</p>
</div>
<div class="content">
<div class="nav">
<ul>
<li><a href="./index.jsp">招聘信息工作类型比例</a></li>
<li><a href="./index1.jsp">招聘学历要求比例</a></li>
<li class="current"><a href="#">IT行业招聘工资最低工资和最高工资对比</a></li>
<li><a href="./index3.jsp">IT行业招聘信息最多的五个行业</a></li>
<li><a href="./index4.jsp">各个地方招聘信息的个数对比</a></li>
</ul>
</div>
<div class="container">
<div class="title">IT行业招聘工资最低工资和最高工资对比</div>
<div class="show">
<div class='chart-type'>散点图</div>
<div id="main"></div>
</div>
</div>
</div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var data = [
[[28604,77,17096869,"中国","深圳"],[29550,79.1,122249285,'Japan',"深圳"],[37062,75.4,2528478105,'United States',"深圳"]],
[[44056,81.8,23968973,'Australia',"上海"],[53354,79.1,321773631,'United States',"上海"]]
];
option = {
backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
offset: 0,
color: '#f7f8fa'
}, {
offset: 1,
color: '#cdd0d5'
}]),
title: {
text: ':招聘工资最低工资和最高工资对比'
},
legend: {
right: 10,
data: ["深圳", "上海"]
},
xAxis: {
splitLine: {
lineStyle: {
type: 'dashed'
}
}
},
yAxis: {
splitLine: {
lineStyle: {
type: 'dashed'
}
},
scale: true
},
series: [{
name: "深圳",
data: data[0],
type: 'scatter',
symbolSize: function (data) {
return Math.sqrt(data[2]) / 5e2;
},
label: {
emphasis: {
show: true,
formatter: function (param) {
return param.data[3];
},
position: 'top'
}
},
itemStyle: {
normal: {
shadowBlur: 10,
shadowColor: 'rgba(120, 36, 50, 0.5)',
shadowOffsetY: 5,
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
offset: 0,
color: 'rgb(251, 118, 123)'
}, {
offset: 1,
color: 'rgb(204, 46, 72)'
}])
}
}
}, {
name: "上海",
data: data[1],
type: 'scatter',
symbolSize: function (data) {
return Math.sqrt(data[2]) / 5e2;
},
label: {
emphasis: {
show: true,
formatter: function (param) {
return param.data[3];
},
position: 'top'
}
},
itemStyle: {
normal: {
shadowBlur: 10,
shadowColor: 'rgba(25, 100, 150, 0.5)',
shadowOffsetY: 5,
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
offset: 0,
color: 'rgb(129, 227, 238)'
}, {
offset: 1,
color: 'rgb(25, 183, 207)'
}])
}
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
核心代码: return Math.sqrt(data[2]) / 5e2;
问题:什么是5e2学过js的可能知道?
解惑:
symbolSize: function (data) {
returnMath.sqrt(data[2]) / 5e2;
}
这里面的5e2是什么意思呢,我console.log了一下发现
1e1=10 2e1=20
1e2=100 2e2=200
1e3=1000 2e3=2000
所以5e2就是500的意思啦
简单理解就是e后面的数字代表加上几个0
能力有限,还有一些参数不太懂,学习ing
扫描二维码关注公众号,回复:
1912041 查看本文章