【echarts】散点图

基本使用

    //1.初始化图表
        let myCharts = echarts.init(document.getElementById('charts'))
        //2.准备x轴数据
        let jsonData = [
            { "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 },
            { "gender": "female", "height": 170, "weight": 59 },
            { "gender": "female", "height": 159.1, "weight": 47.6 },
            { "gender": "female", "height": 166, "weight": 69.8 },
            { "gender": "female", "height": 176.2, "weight": 66.8 },
            { "gender": "female", "height": 160.2, "weight": 75.2 },
            { "gender": "female", "height": 172.5, "weight": 55.2 },
            { "gender": "female", "height": 170.9, "weight": 54.2 },
            { "gender": "female", "height": 172.9, "weight": 62.5 },
            { "gender": "female", "height": 153.4, "weight": 42 },
            { "gender": "female", "height": 160, "weight": 50 },
            { "gender": "female", "height": 147.2, "weight": 49.8 }
        ]
        let axisData = []
        //循环对象
        jsonData.forEach(item => {
            let arr=[]
            arr[0] = item.weight
            arr[1] = item.height
            axisData.push(arr)
        })
        let option = {
            xAxis: { type: 'value', scale: true },
            yAxis: { type: 'value', scale: true },
            series: [{ type: 'scatter', data: axisData, }]
        }
        //5.渲染图表
        myCharts.setOption(option)

2.散点图常用配置

 let option = {
            xAxis: { type: 'value', scale: true },
            yAxis: { type: 'value', scale: true },
            series: [
                {
                    type: 'effectScatter',//  指定涟漪动画效果
                    rippleEffect: { //可以配置涟漪动画的大小
                        scale: 3
                    },
                    //showEffectOn 可以控制涟漪动画在什么时候产生 emphasis表鼠标移过某个散点的时候, 该散点开始涟漪动画
                    //render 代表界面渲染完成就开始涟漪动画
                    showEffectOn: 'emphasis',
                    data: axisData,
                    symbolSize: 25, //大小  支持回调函数  参数 arg
                    itemStyle: {
                        color: 'green',  //颜色  支持回调函数  参数 arg
                    }
                }
            ]
        }