Echarts（二）scatter散点图

 官网示例：https://echarts.apache.org/examples/zh/index.html#chart-type-scatter 

 1.基础散点图

option = {
    xAxis: {},
    yAxis: {},
    series: [{
        data: [
            [x, y],
           //  DATA  //
        ],
        type: 'scatter'
    }]
};

散点图。type为scatter，data数据为两个位置 x和y 。如果需要多组数据多个类型的散点，再series中放多组数据data。 

series: [{
        name:'A',
        data: [       ],
        type: 'scatter'
    },
    {
        name:'B',
        data: [       ],
        type: 'scatter'
    }

2.气泡图 

和基础散点图比起来，多了“气泡大小”维度的信息。需要把data形式写为[x,y,size]的格式。并且使用function计算data大小返回给symbolSize，type仍然为scatter。

var data = [
    [[97,88,3,'离散','平均分以上科目'],    …… ……
    // 第三维数据用 emphasis显示 
    [[87,90,2.5,'代数','平均分以下科目'],    …… ……
    [83,85,3,'python','平均分以下科目']]
];      //我不喜欢python了！！

option = {
    title: {},
    legend: {},
    xAxis: {},
    yAxis: {},
    series: [{
        name: '',
        data: data[0],
        type: 'scatter',
       symbolSize: function (data) {   //计算大小
            return data[2]*10;
        },
        emphasis: {
            focus: 'series',
            label: {
                show: true,
                formatter: function (param) {
                    return param.data[3];
                },
                position: 'top'
            }
        }
    }, {
        …… …… //data2
    }]
};

3.涟漪特效

效果如下：

只需要把这部分的数据改成type是effectScatter。其他部分正常。

series: [{//涟漪特效的数据
        type: 'effectScatter',
        symbolSize: ,
        data: [
            [X,Y], [X1, Y1]   
                …… ……
        ]
    }, {//正常显示部分
        …… ……    }
    ]