玩转ECharts制作图表之散点图

散点图适用于三维数据集，但其中只有两维需要比较。

散点图

1. ECharts基本构建代码结构
2. 准备x轴和y轴数据，二维数组[[身高,体重],[]…]
3. 将type的值设置为scatter，x轴和y轴的type都是value

• 准备和处理json数据

//准备数据 数据太多只拿出一部分
var data = [{
                "gender": "female",
                "height": 161.2,
                "weight": 51.6
            }, {
                "gender": "female",
                "height": 167.5,
                "weight": 59
            }, {
                "gender": "female",
                "height": 159.5,
                "weight": 49.2
            }, {
                "gender": "female",
                "height": 157,
                "weight": 63
            }, {
                "gender": "female",
                "height": 155.8,
                "weight": 53.6
            }]
            //处理数据
             var axisData = []
        for (var i = 0; i < data.length; i++) {
            var height = data[i].height
            var weight = data[i].weight
            var newArr = [height, weight]
            axisData.push(newArr)
        }

• 准备ECharts图表容器

    <div style="width: 600px;height:400px"></div>

• 初始化ECharts实例

var mCharts = echarts.init(document.querySelector("div"))

• 配置配置项

var option = {
                xAxis: {
                    type: 'value',
                    scale: true
                },
                yAxis: {
                    type: 'value',
                    scale: true
                },
                series: [{
                    type: 'scatter', // 指明图表的类型为散点图
                    data: axisData
                }]
            }

• 将配置项设置给echarts实例

        mCharts.setOption(option)

散点图样式

• 缩放，脱离0值比例 -scale

  				xAxis: {
                    type: 'value',
                    //缩放，脱离0值比例
                    scale: true
                },
                yAxis: {
                    type: 'value',
                    scale: true
                },

• 带涟漪动画的散点图

type: 'effectScatter'

• 出现涟漪动画的时机

 //render 绘制完成后显示 emphasis  高亮的显示
showEffectOn: 'emphasis'  

• 涟漪动画时, 散点的缩放比例

  rippleEffect: {
                        scale: 10 // 涟漪动画时, 散点的缩放比例
                    },

• 控制散点的样式 -itemStyle
• 控制散点的大小 -symbolSize