echarts 散点图(带涟漪动画)

我就是我 2021-07-24 23:55 1836阅读 0赞

1、准备的数据必须是二维的数值数据
    	方式一:
    		[[数值,数值],[数值,数值]]
    		
    	方式二:
    		[
    			{
    				value:[数值,数值]
    		        label: {},	自定义标签样式，仅对该数据项有效
    		        itemStyle:{}	自定义特殊 itemStyle，仅对该数据项有效
    			}
    		]
    
    2、x和y轴设置
    	x和y都设置成数值类型
    	xAxis:
    	{
            type:'value',
            scale:true	坐标轴不从0开始
        },
        yAxis:
        {
            type:'value',
            scale:true
        },	
    
    3、设置数据显示和样式
    	series:[
    		{
    			type:'scatter',
    			data:axisData,  数据必须是二维数值数组
    			symbolSize:n,   散点固定大小
    			symbolSize:function(value,params)  动态设置散点大小
    	        {
    	        	每个散点都会执行该函数
    	        	第一个参数value为当前散点的数据值。第二个参数params是其它的数据项参数。
    	      
    	        	return n;
    	        }，
    	        itemStyle:{  设置散点样式
    	        	color:'red', 固定散点颜色
    	        	color:function(params){ 动态设置散点颜色
    	        		params包含了seriesIndex, dataIndex, data, value等参数
    	        		params.data获取当前散点的数值
    					return '颜色';  
    	        	}
    	        },
    	        lable:{
    	        	show:true,  显示散点y轴对应内容
    	        }
    	        
    	         
    		}
    	]
    	
    4、设置散点涟漪动画
    	series:[
    		{
    			type:'effectScatter',
    			showEffectOn:'emphasis',  'render'绘制完成后显示特效,'emphasis' 高亮（hover）的时候显示特效。
    		    rippleEffect:{  设置涟漪动画样式
                 color:'purple',   涟漪颜色,默认为散点自身颜色
                 brushType:'fill'  动画方式,全填充或只有线条,'stroke'
                 period:4,   动画周期
                 scale:'2.5',  涟漪规模
              },
    		}
    	]

效果图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center]

代码示例:

var data = [{  "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 },]
        
        var axisData = [];
        for( var i=0;i<data.length;i++) { 
          var height = data[i].height
          var weight = data[i].weight
          var newArr = [height, weight]
          axisData.push(newArr)
        }
    
        var option = { 
          xAxis:{ 
            type:'value',
            scale:true
          },
          yAxis:{ 
            type:'value',
            scale:true
          },
          series:[
            { 
              type:'effectScatter',
              showEffectOn:'emphasis',  //'render' 绘制完成后显示特效,'emphasis' 高亮（hover）的时候显示特效。
              rippleEffect:{  //设置涟漪动画样式
                // color:'purple', //涟漪颜色,默认为散点自身颜色
                // brushType:'fill' //动画方式,全填充或只有线条,'stroke'
                period:4,  //动画周期
                scale:'2.5',  //涟漪规模
                brushType:'fill'
              },
              data:axisData, //数据必须是二维数值数组
              // symbolSize:10, //散点的固定大小
              symbolSize:function(value,params) //其中第一个参数value为data中的每一组数据值。第二个参数params是其它的数据项参数。
              { 
                var height = value[0] / 100
                var weight = value[1]
                // bmi = 体重kg / (身高m*身高m) 大于28,就代表肥胖
                var bmi = weight / (height * height)
                if (bmi > 28) { 
                  return 20;
                }else if(bmi>20)
                { 
                  return 10
                }
                return 5;
    
              },
              itemStyle:{   //设置散点样式
                // color:'green' 固定颜色
                color:function(params) // 包含了seriesIndex, dataIndex, data, value等参数
                { 
                  var height = params.data[0] / 100
                  var weight = params.data[1]
                  // bmi = 体重kg / (身高m*身高m) 大于28,就代表肥胖
                  var bmi = weight / (height * height)
    
                if (bmi > 28) { 
                  return 'red';
                }else if(bmi>20)
                { 
                  return 'green';
                }
                return 'blue';
    
    
                }
              },
              label:{ 
                show:true,
                fontSize:5
              }
            }
          ]
        };
    
        myMap.setOption(option);

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210724/743ee7b888e44e8d882e096d5983f480.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1836人围观）

还没有评论，来说两句吧...

相关阅读

相关 Echarts散点图筛选新玩法dataZoom

目录前言一、引入Echarts5.4.3 二、新建index.html 三、绑定Echarts展示元素四、初始数据绑定五、option设置六、效果展示

- 日理万妓/ 2023年10月16日 10:37/ 0 赞/ 51 阅读

相关 Python | 散点图

Inherited from the [Dot Plots][], Scatter plots are of very similar types. It provides a

- 日理万妓/ 2023年03月05日 08:30/ 0 赞/ 232 阅读

相关【Echarts】散点图点击散点加载对应的图片（ajax传值&获取流）

效果图：点击每个散点，右边的图片会变成对应的~（10000个点）![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR

ゝ一纸荒年。/ 2022年12月08日 01:43/ 0 赞/ 177 阅读

相关 19、20_散点图、连接散点图、气泡图、不同颜色的散点图、直方图

19.散点图（Scatter plots） 19.1.连接散点图 (Connected scatter plot) 19.2.气泡图（Bubble chart） 1

小咪咪/ 2022年11月17日 11:24/ 0 赞/ 222 阅读

相关 java 散点图_JFreeChart ：快速散点图演示

/\ =========================================================== \ JFreeChart : a free ch

r囧r小猫/ 2022年11月05日 10:54/ 0 赞/ 326 阅读

相关「Python数据可视化」使用 Pyecharts 制作 Effectscatter（涟漪特效散点图）详解

文章目录内容介绍 EffectScatter：涟漪特效散点图 Demo 举例内容介绍数据分析师的全部文章目录 [看懂Python数据分

落日映苍穹つ/ 2022年10月23日 05:52/ 0 赞/ 613 阅读

相关 echarts 中国地图散点图渲染

准备 [echarts][] 中国地图的json（在最后） [GitHub的demo地址，可以直接拉下来][GitHub_demo] 先注册地图

比眉伴天荒/ 2022年09月16日 06:06/ 0 赞/ 423 阅读

相关画散点图

1）函数scatter3 用法：scatter3(x,y,z,'.',c) % c 为颜色，需和x,y,z长度相同例子： x=\[4229042.63

深藏阁楼爱情的钟/ 2022年08月25日 15:49/ 0 赞/ 251 阅读

相关 ECharts之地图散点图

效果图 ![在这里插入图片描述][20190809165810318.gif] 背景图片 ![20190725170845879.png][] 下载

谁践踏了优雅/ 2021年10月01日 00:26/ 0 赞/ 567 阅读

相关 echarts 散点图(带涟漪动画)

1、准备的数据必须是二维的数值数据方式一: [[数值,数值],[数值,数值]] 方式二: [

我就是我/ 2021年07月24日 23:55/ 0 赞/ 1837 阅读