ECharts_散点图

3.3 散点图

散点图可以帮助我们推断出变量间的相关性。

比如身高和体重的关系。

3.3.1 实现步骤

Echarts最基本的代码结构
- 引入js文件
- DOM容器
- 初始化对象
- 设置option
x轴和y轴的数据：二维数组
图标类型
- 在series下设置 type:scatter
- xAxis和yAxis的type都要设置为value
调整：将坐标轴设置为脱离0值比例 scale: true

<!DOCTYPE html>
<html lang="en">
<head>
    <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>Document</title>
    <script src="lib/echarts.min.js"></script>
</head>
<body>
    <div style="height: 400px;  600px;"></div>

    <script>
        var mCharts = echarts.init(document.querySelector('div'))

        var axisData = [[182.9, 85], [176.5, 87.9], [184.2, 77.3], 
                        [159.1, 47.6], [166,69.8], [176.2,66.8], [160.2, 75.2],
                        [172.5,55.2], [170.8,54.2],[153.4, 42], [160,50],[168.2,49.2]]

        var option = {
            xAxis: {
                type: 'value',
                scale: 'true'
            },
            yAxis: {
                type: 'value',
                scale: 'ture'
            },
            series: [
                {
                    type: 'scatter',
                    data:axisData
                }
            ]
        }

        mCharts.setOption(option)
    </script>
</body>
</html>

3.3.2 常见效果

气泡图效果

散点大小不同 symbolSize

自定义散点：

series: [
    {
        type: 'scatter',
        data:axisData,
        symbolSize: function(arg) {
            //bmi = 体重/(身高*身高)
            var height = arg[0] / 100;
            var weight = arg[1];

            var bmi = weight / (height*height);
            if (bmi > 28) {
                return 20;
            } else {
                return 5;
            }
        }
    }
]

散点颜色不同 itemStyle

 series: [
    {
        type: 'scatter',
        data:axisData,
        itemStyle: {
            color: function (arg) {
                //bmi = 体重/(身高*身高)
                var height = arg.data[0] / 100;
                var weight = arg.data[1];

                var bmi = weight / (height * height);
                if (bmi > 28) {
                    return 'red';
                } else {
                    return 'green';
                }
            }
        }
    }
]

涟漪动画效果 type: 'effectScatter'
- showEffectOn
  - showEffectOn: 'render' 散点渲染完成后具有涟漪效果
  - showEffectOn: 'emphasis' 鼠标划过时显示涟漪效果
- rippleEffect
  - scale 设置涟漪范围大小