可视化数据echarts只是散点图的气泡大小控制

笔记：方便自己，方便他人

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

可视化数据echarts只是散点图的气泡大小控制

猜你喜欢