其他分享
首页 > 其他分享> > Echarts 中的散点图

Echarts 中的散点图

作者:互联网

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';
        data: axisData
      }
    }
   }

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

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

2: 涟漪动画效果:
   设置类型: type ;


  未完待续...
  







标签:散点图,value,散点,设置,type,Echarts
来源: https://blog.csdn.net/weixin_45677987/article/details/119356027