ECharts 自学笔记 | 散点图

最新推荐文章于 2024-03-27 16:11:43 发布

SoI_

最新推荐文章于 2024-03-27 16:11:43 发布

阅读量141

点赞数

文章标签： echarts 笔记前端

本文链接：https://blog.csdn.net/m0_74062159/article/details/130855387

版权

<!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>散点图的基本实现</title>
</head>

<body>
    <script src="./echarts.min.js"></script>

    <div id = 'main' style="width: 500px;height: 600px;"></div>


    <script>
        
        var myChart = echarts.init(document.getElementById('main'));
        var xyArr = [[150,100],[155,110],[160,113],[160,123],[163,113],[162,128],[164,103],[170,163],[150,360]]

        var option = {

            title: {
                 text: '散点图',
                 textStyle:{
                 color:'yellowgreen',
                 fontSize:'20px'
                }
            },
            tooltip: {
                show:true ,//默认位true
                // trigger:'axis'
                trigger: 'item',
                triggerOn: 'click'
            },
            xAxis : {
                type:'value',//根据series中的二维数组data的x维度d的数值自行对应
                boundaryGap: false,
                scale:true //设置没必要从0开始
            },
            yAxis :{
                type:'value',//根据series中的二维数组data的y维度的数值自行对应
                scale:true
            },
            series :[{

                // type: 'scatter',//普通散点
                type:'effectScatter',//涟漪动画效果：effectScatter
                name :'身高与体重',
                data : xyArr,//身高体重二维数组
                color:'yellowgreen',

                //何时展现涟漪动画
                showEffectOn:'emphasis' ,// render(自动带)  or  emphasis（鼠标位置点才涟漪）

                //涟漪效果大小
                rippleEffect:{
                    scale: 6 //大小
                },

                //每个点的样式大小：（可支持回调函数:每个点都是一个arg数组，arg[0]身高arg[1]体重）
                symbolSize:function(arg){
                    // console.log(arg)//调出来直接是每一个[身高，体重]数组
                    var height = arg[0]/100 //换算为米
                    var weight = arg[1]/2  //换算为千克
                    bmi = weight/(height*height)
                    if(bmi>28){//肥胖则返回30
                        return 30
                    }
                    return 15
                },

                //每个点的颜色  （可支持回调函数：每个点是一个object，其中object的属性data才是身高体重二维数组）
                itemStyle:{
                    color:function(arg){
                    // console.log(arg)//调出来每一个都是一个对象，对象里面的data属性才是[身高，体重]数组
                    var height = arg.data[0]/100 //换算为米
                    var weight = arg.data[1]/2  //换算为千克
                    bmi = weight/(height*height)
                    if(bmi>28){//肥胖则返回30
                        return 'darkred'
                    }
                    return 'green'
                    }
                }

                

            }]
        };
        myChart.setOption(option);
    </script>
</body>
</html>