Echarts 中的散点图

最新推荐文章于 2025-06-06 11:33:20 发布

猕猴桃-HR

最新推荐文章于 2025-06-06 11:33:20 发布

阅读量3.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： echarts

本文链接：https://blog.csdn.net/weixin_45677987/article/details/119356027

echarts 专栏收录该内容

39 篇文章

订阅专栏

本文介绍了如何使用Echarts绘制散点图，并实现气泡图效果及涟漪动画。包括设置DOM容器、初始化对象、配置x轴和y轴、设置散点大小与颜色等关键步骤。

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

Echarts 中散点图的实现:
  散点图可以帮助我们推断变量之间的相关性。 (根据散点图的分布)


1: 散点图的是实现步骤:
   Echarts 最基本的代码结构:
   引入js 文件, DOM 容器, 初始化对象,  设置option 
2: x 轴 与 y 轴 的数据是二位数据即可。

3: 在图标类型:
   在series 中设置类型为 type: scatter;   (散点图)
   xAis 和 yAis 的type 值都需要设置为 value;

4: x 轴 与y 轴 调整
   将坐标轴都设置为 脱离 0 的比例;
--------------------------------------------------------------

1:  引入Echarts 文件
 <script src="lib/echarts.min.js"></script>
2: 准备一个呈现图表盒子：
   <div style="width: 600px; height: 400px"></div>
3: 初始化echarts 对象：   获取初始化对象
  var mCharts = echarts.init(document.querySelector('div'));

4: var option = {
     xAis: {
      type: 'value',
      scale: true   // 脱离 0 缩放比
     },
    yAis: {
      type: 'value',
      scale: true   // 脱离 0 缩放比
    },
    series: {
      {
        // type: 'scattter',
        type: 'effectScattter',  // 设置联动效果
        showEffectOn: '',  // 有两个值,  render  emphasis
        //  emphasis  鼠标移动才会出现的效果
        rippleEffect: {
          scale: 10;   // 设置缩放比的大小
        }
        data: axisData,
        symbolSize: function (arg) {
         var height = arg[0] / 100;
         var weight= arg[1];
         // bmi = 体重kg / (身高m * 身高m);  // 大于 28 就是代表肥胖
         var bmi = weight / (height * height);
         if(bmi > 28) {
           return 20;
         }
         return 5;
        },

       itemStyle: {
         color: function (arg) {
           var height = arg.data[0] / 100;
           var weight= arg.data[1];
           // bmi = 体重kg / (身高m * 身高m);  // 大于 28 就是代表肥胖
           var bmi = weight / (height * height);
           if(bmi > 28) {
             return 'red'
           }
           return 'green'
         }
       }
      }
    }
   }

------------------------------------------------------------------------
散点图常见的效果:
1: 常见效果  (气泡图效果)
    a: 散点大小不同:  symbolSize (控制散点的大小)

    b: 散点颜色不同:  itemStyle.color (控制散点颜色)

2: 涟漪动画效果:
   设置类型： type: effectScatter ;  // 设置散点动画效果
  
   showEffecttOn: 'emphasis';  // 控制鼠标经过才会出现涟漪效果
   rippleEffect: {
      scale: 10;  // 控制涟漪缩放比
   }

----------------------------------------------------------------------
散点图的特点:
1:  散点图可以帮助我们推断出不同维度数据之间关联性。
2:  散点图也经常用在地图的标注上。