欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

echarts散点图

程序员文章站 2024-01-19 13:01:40
...
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>散点图</title>
    <style>
        #test{
            margin: 20px;
            width: 700px;
            height: 500px;
        }
    </style>
</head>
<body>
<!--建立dom 容器-->
<div id="test"></div>
<!--引入echarts-->
<script src="https://lib.baomitu.com/echarts/4.7.0/echarts.min.js"></script>
<script>
    // 基于准备好的dom,初始化echarts实例
    const myChart = echarts.init(document.getElementById('test'));
    //数据
    const data=[
        //x,y, z
        [0, 0, 20],
        [10,10,40],
        [20,10,50],
        [30,30,30],
    ];
    // 指定图表的配置项和数据
    const option = {
        /*x 轴*/
        xAxis:{},
        /*y轴*/
        yAxis:{},
        /*散点图 scatter
        *   data 数据
        *   symbolSize 散点尺寸
        * */
        series:{
            type:'scatter',
            data,
            // symbolSize:40,
            symbolSize:(data)=>{
                console.log(data);
                return data[2];
            },
        },

    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>