腾讯招聘

散点图扫码预览

# 一、 散点图基础构建

   <p class="item-desc">散点图</p>
    <o-chart
      :data="pointData"
      :legend="legend"
      :col-defs="normalColumnConfig"
      :chart-config="chartConfig()"
    >
      <o-point
        :axis="normaAxis"
        position="height*weight"
        color-field="gender"
        :chart-style="{fillOpacity: 0.65}"
      ></o-point>
    </o-chart>

这是一个光滑散点图的案例,其中包括的配置项,

  • 必须有的是data和position;
  • col-defs:对提供的每个数据进行配置,
  • legend:显示图例,
  • axis:坐标系配置,
  • color-field:对数据中的那个字段显示颜色

说明:

  • 坐标轴position为必传项。
  • 公用配置信息已在前文提及,请查阅

样例中有散点图和气泡图其不同之处在于对每一项的配置不同而已,如您需要实现其中的某一部分请看样例源码 (opens new window) ,查看具体配置,具体配置信息和作用已在前文和下文中注明,请查阅。

# 二、散点图额外配置

公用配置信息

# shape(散点图的形状)

  • 是否必须:False
  • 参数类型:枚举 ['circle', 'hollowCircle', 'rect' ] 中的一个
  • 默认:circle
  • 说明:只支持接收一个参数,指定几何图像对象绘制的形状
【未经作者允许禁止转载】 Last Updated: 7/27/2021, 12:43:19 PM