# ECharts 散点图

## 2. 实例解说

### 2.1 直角坐标系散点图

``````<!DOCTYPE html>
<html lang="zh-CN">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Echarts Example</title>
<body>
<div id="main" style="width: 600px;height: 400px"></div>

<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.common.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));

var option = {
toolbox: {
feature: {
saveAsImage: {},
},
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type: 'value',
},
series: [
{
data: [
['Mon', 120],
['Tue', 80],
['Wed', 140],
['Thu', 192],
['Fri', 140],
['Sat', 180],
['Sun', 178],
],
type: 'scatter',
},
],
};
myChart.setOption(option);
</script>
</body>
</html>
``````

• `number`: 点的像素大小值；
• `array`: 二维数组如 `[10, 30]`，第一个值指定 symbol 宽度；第二个值指定 symbol 高度；
• `function: (value: Array|number, params: Object) => number|Array`: 回调函数。

``````{
series: [
{
data: [
['Mon', 120, 224],
['Tue', 80, 320],
['Wed', 140, 1288],
['Thu', 192, 64],
['Fri', 140, 228],
['Sat', 180, 248],
['Sun', 178, 240],
],
type: 'scatter',
symbolSize: function (data) {
return Math.sqrt(data[2]);
},
},
],
}
``````

``````{
series: [
{
data: [
['Mon', 120, 224],
['Tue', 80, 320],
['Wed', 140, 1288],
['Thu', 192, 64],
['Fri', 140, 228],
['Sat', 180, 248],
['Sun', 178, 240],
],
type: 'scatter',
itemStyle: {
color: function (node) {
return `hsla(\${node.data[2] % 360}, 100%, 50%, 0.8)`;
},
},
},
],
}
``````

### 2.2 极坐标散点图

``````<!DOCTYPE html>
<html lang="zh-CN">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Echarts Example</title>
<body>
<div id="main" style="width: 600px;height: 400px"></div>

<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));

var option = {
toolbox: {
feature: {
saveAsImage: {},
},
},
polar: {},
angleAxis: {
type: 'category',
startAngle: 0,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
series: [
{
coordinateSystem: 'polar',
data: [
[120, 'Mon'],
[80, 'Tue'],
[140, 'Wed'],
[192, 'Thu'],
[140, 'Fri'],
[180, 'Sat'],
[178, 'Sun'],
],
type: 'scatter',
},
],
};
myChart.setOption(option);
</script>
</body>
</html>
``````

``````{
series: [
{
coordinateSystem: 'polar',
data: [
[120, 'Mon', 224],
[80, 'Tue', 320],
[140, 'Wed', 1288],
[192, 'Thu', 64],
[140, 'Fri', 228],
[180, 'Sat', 248],
[178, 'Sun', 240],
],
type: 'scatter',
symbolSize: function (data) {
return Math.sqrt(data[2]);
},
},
],
}
``````

``````{
series: [
{
coordinateSystem: 'polar',
data: [
[120, 'Mon', 224],
[80, 'Tue', 320],
[140, 'Wed', 1288],
[192, 'Thu', 64],
[140, 'Fri', 228],
[180, 'Sat', 248],
[178, 'Sun', 240],
],
type: 'scatter',
itemStyle: {
color: function (node) {
return `hsla(\${node.data[2] % 360}, 100%, 50%, 0.8)`;
},
},
},
],
}
``````

### 2.3 日历坐标系散点图

``````<!DOCTYPE html>
<html lang="zh-CN">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Echarts Example</title>
<body>
<div id="main" style="width: 600px;height: 400px"></div>

<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));

var option = {
toolbox: {
feature: {
saveAsImage: {},
},
},
calendar: {
top: 'middle',
left: 'center',
cellSize: 40,
range: ['2019-02-01', '2019-03-31'],
},
series: [
{
type: 'scatter',
coordinateSystem: 'calendar',
symbolSize: 15,
calendarIndex: 0,
symbolSize: function (data) {
return Math.sqrt(data[1]);
},
itemStyle: {
color: function (node) {
return `hsla(\${node.data[1] % 360}, 100%, 50%, 0.8)`;
},
},
data: [
[1549036800000, 260],
[new Date(2019, 1, 6), 200],
[new Date(2019, 1, 14), 279],
[new Date(2019, 2, 4), 847],
[new Date(2019, 2, 10), 241],
[new Date(2019, 2, 20), 411],
[new Date(2019, 1, 28), 985],
],
},
],
};
myChart.setOption(option);
</script>
</body>
</html>
``````

## 3. 涟漪效果

ECharts 中的散点图支持带涟漪特效动画效果，不过被实现为另外一种图表类型 `series.type = effectScatter`。涟漪特效会在数据点上周期执行动画效果，类似于：

effectType string ripple 特效类型，目前只支持涟漪特效’ripple’。
showEffectOn string render 配置何时显示特效，可选 `render``emphasis`
rippleEffect.color string 涟漪的颜色，默认为散点的颜色。
rippleEffect.period number 动画的周期，单位为秒
rippleEffect.scale number 动画中波纹的最大缩放比例。
rippleEffect.brushType string fill 波纹的绘制方式，可选 `stroke``fill`

``````<!DOCTYPE html>
<html lang="zh-CN">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Echarts Example</title>
<body>
<div id="main" style="width: 600px;height: 400px"></div>
<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.js"></script>
<script type="text/javascript">
// 随机生成数据
function generateData(cats) {
const random = (min, max) => Math.round(Math.random() * (max - min) + min);
const series = [
{ name: '我司', type: 'effectScatter' },
{ name: '竞品1', type: 'scatter' },
{ name: '竞品2', type: 'scatter' },
{ name: '竞品3', type: 'scatter' },
];
return series.map((serie) => ({
...serie,
data: cats.map((cat) => [cat, random(100, 10000)]),
}));
}
const myChart = echarts.init(document.getElementById('main'));
const cats = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
const series = generateData(cats);
var option = {
xAxis: { type: 'category', data: cats },
yAxis: { type: 'value' },
series: series,
legend: { data: series.map((s) => s.name) },
};
myChart.setOption(option);
</script>
</body>
</html>
``````

``````{
type: 'effectScatter',
rippleEffect: {
period: 2,
scale: 5,
brushType: 'stroke'
}
},
``````

## 4. 大数据优化

ECharts 4 之后，如果需要渲染的图形数据太多而出现卡顿时，可以通过设置 `large = true` 开启渐进渲染功能。原理上，当数据量达到几千、几万时，如果要一次性渲染这么多图形可能会造成页面卡顿甚至假死，ECharts 通过将需要渲染的数据按特定算法分成多个批次，每次渲染一个批次的数据量，尽可能快地渲染出一部分数据，减少卡顿感。下列属性用于配置渐进渲染的功能细节：

large boolean false 是否开启大数据量优化
largeThreshold number 2000 启动绘制优化的阈值，在 `large = true` 的情况下，若数据量超过该值则启动绘制优化
progressive number 400 渐进式渲染时每一帧绘制图形数量
progressiveThreshold number 3000 启用渐进式渲染的图形数量阈值，在单个系列的图形数量超过该阈值时启用渐进式渲染

``````<!DOCTYPE html>
<html lang="zh-CN">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Echarts Example</title>
<body>
<button id="btnStart" type="button">开始渲染</button>
<div id="main" style="width: 800px;height: 400px"></div>
<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.js"></script>
<script type="text/javascript">
// 生成随机数据
function genData(len, offset) {
const lngRange = [-10.781327, 131.48];
const latRange = [18.252847, 52.33];

const result = new Array(len);

for (let i = 0; i < len; i++) {
const x = +Math.random() * 10;
const y = +Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random() + (offset || 0) / 10;
result[i] = [x, y];
}
return result;
}

const data = genData(500000);

const chart = echarts.init(document.getElementById('main'));
const option = {
xAxis: { type: 'value' },
yAxis: { type: 'value' },
series: [
{
data: data,
type: 'scatter',
large: true,
largeThreshold: 1000,
progressive: 100,
symboleSize: 3,
},
],
};
chart.setOption(option);
});
</script>
</body>
</html>
``````