Echarts（二）scatter散点图

最新推荐文章于 2025-03-01 14:22:55 发布

NI3E

最新推荐文章于 2025-03-01 14:22:55 发布

阅读量1w

点赞数 11

本文链接：https://blog.csdn.net/m0_51588059/article/details/118605221

版权

echarts

本文介绍了ECharts中如何创建基础散点图、气泡图以及涟漪特效的散点图。基础散点图通过`type='scatter'`展示数据点；气泡图增加了数据的第三个维度——气泡大小，通过`symbolSize`函数设定；涟漪特效只需将数据的`type`改为`effectScatter`即可实现动态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官网示例：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]   
                …… ……
        ]
    }, {//正常显示部分
        …… ……    }
    ]