版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_20042935/article/details/89712790
效果图
源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var option;
function genData(len, offset) {
var lngRange = [-10.781327, 131.48];
var latRange = [18.252847, 52.33];
var arr = new Float32Array(len * 2);
var off = 0;
for(var i = 0; i < len; i++) {
var x = +Math.random() * 10;
var y = +Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random() + (offset || 0) / 10;
arr[off++] = x;
arr[off++] = y;
}
return arr;
}
var data1 = genData(5e5);
var data2 = genData(5e5, 10);
option = {
title: {
text: echarts.format.addCommas(data1.length / 2 + data2.length / 2) + ' Points'
},
tooltip: {},
toolbox: {
left: 'center',
feature: {
dataZoom: {}
}
},
legend: {
orient: 'vertical',
right: 10
},
xAxis: [{}],
yAxis: [{}],
dataZoom: [{
type: 'inside'
}, {
type: 'slider'
}],
animation: false,
series: [{
name: 'A',
type: 'scatter',
data: data1,
dimensions: ['x', 'y'],
symbolSize: 3,
itemStyle: {
opacity: 0.4
},
large: true
}, {
name: 'B',
type: 'scatter',
data: data2,
dimensions: ['x', 'y'],
symbolSize: 3,
itemStyle: {
opacity: 0.4
},
large: true
}]
};
myChart.setOption(option);
</script>
</body>
</html>