# 基本散点图

散点图是一种通过散点的疏密程度和变化趋势表示连续变量的数量关系的图形。

# 属性

# 基础

# 系列

散点图为单维度,多度量的图表,因此需要分别设置每个系列下的散点的属性。

  • 选中模式: 对组件保存并预览后可对散点图的标记进行选择。
    • 不可选
    • 单选
    • 多选
  • 关闭鼠标事件: 关闭鼠标事件后不能与组件交互。
  • 取色策略: 根据系列或数据项的不同改变配色。
  • 标记图形: 散点的形状。
  • 标记大小: 散点的大小。
  • 标记旋转角度: 散点的旋转角度。
  • 位置偏移: 散点距离原始位置的偏离大小,第一个值控制x轴方向的变化,第二个值控制y轴方向的变化。

系列

  • 普通状态样式:

    • 文本标签:
      • 显示文本: 是否显示文本。

      • 内容格式器: 标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

        字符串模板变量

        • {a} : 系列名。

        • {b} : 数据名。

        • {c} : 数据值。

        • {@xxx}:数据中名为xxx的维度的值,如{@product}表示名为product的维度的值。

        • {@[n]}:数据中维度n的值,如{@[3]}表示维度3的值,从0开始计数。

        示例:

         {b}: {d}
        
        • 回调函数: 示例:
           return data.value[0];
        

        参数 data 是内容格式器需要的单个数据参数。格式如下:

        {
            //传入的原始数据项
            data:{
                //系列数据
                value:string[]|number[],
                //配置的组件数据中单个数据资源
                dataset:Object
               },
            //数据在传入的data数组中的index
            dataIndex:number|Array,
            //系列在传入的option,series中的index
            seriesIndex:number
        }
        
      • 位置: 标签的位置。

      • 文字距离: 文本间的距离,首先需要选择标签的位置,才能定义文本间的距离。

      • 文字旋转: 文字旋转角度。

      • 文字偏移: 文字相对于原本位置的偏移。

      • 字体颜色: 文本标签字体颜色。

      • 字体大小: 文本标签字体大小。

      • 字体粗细: 文本标签字体粗细。

      • 字体: 文本标签字体样式。

    • 图形样式
      • 渐变色: 是否开启渐变色。

        • 渐变色方向: 渐变色方向。

        • 渐变色范围: 渐变色从起始颜色到结尾颜色的变化区间。

      • 颜色: 图形整体颜色。

      • 描边颜色: 图形描边颜色。

      • 描边线宽: 图形描边宽度。

      • 描边类型: 图形描边类型。

      • 阴影属性: 自定义散点图在垂直方向和水平方向上的阴影,同时可以设置散点图的模糊效果。

  • 高亮状态样式: 鼠标放到散点上时高亮的标记和样式。其属性配置与普通状态样式相同。

  • 选中状态样式: 选中状态下散点的样式,选择模式为单选或多选时生效。其属性配置与普通状态样式相同。

  • 渲染优化

    • 大数据量优化: 是否开启大数据量优化,在数据图形特别多而出现卡顿时就可以开启。

    • 优化阈值: 开启绘制优化的阈值。

    • 鼠标悬浮样式: 鼠标悬浮时在图形元素上时鼠标的样式。

  • 初始动画

    • 开启动画 是否开启初始动画。

    • 动画时长(ms): 初始动画的时长,支持回调函数,可以通过每个数据返回的不同的时长实现更戏剧化的初始动画效果。

    • 缓动效果 初始动画的缓动效果。

# 视觉映射

组件管理 -> 属性 -> 视觉映射

# 视区

组件管理 -> 属性 -> 视区

# X 轴

组件管理 -> 属性 -> X轴

# Y 轴

组件管理 -> 属性 -> y轴

# 标题

组件管理 -> 属性 -> 标题

# 图例

组件管理 -> 属性 -> 图例

# 提示框

组件管理 -> 属性 -> 提示框

# 工具栏

组件管理 -> 属性 -> 工具栏

# 时间轴

组件管理 -> 属性 -> 时间轴

# 数据

# 静态数据

基础

上图中的示例JSON代码如下:

[
  {
    "x": 75,
    "y": 42,
    "type": "2020",
    "value": 75
  },
  {
    "x": 98,
    "y": 43,
    "type": "2020",
    "value": 58
  },
  {
    "x": 38,
    "y": 44,
    "type": "2020",
    "value": 36
  },
  {
    "x": 68,
    "y": 7,
    "type": "2020",
    "value": 2
  },
  {
    "x": 44,
    "y": 22,
    "type": "2020",
    "value": 20
  },
  {
    "x": 11,
    "y": 39,
    "type": "2020",
    "value": 4
  },
  {
    "x": 78,
    "y": 25,
    "type": "2020",
    "value": 87
  },
  {
    "x": 25,
    "y": 35,
    "type": "2020",
    "value": 75
  },
  {
    "x": 89,
    "y": 43,
    "type": "2020",
    "value": 87
  },
  {
    "x": 49,
    "y": 50,
    "type": "2020",
    "value": 37
  },
  {
    "x": 6,
    "y": 46,
    "type": "2021",
    "value": 60
  },
  {
    "x": 80,
    "y": 23,
    "type": "2021",
    "value": 49
  },
  {
    "x": 44,
    "y": 1,
    "type": "2021",
    "value": 15
  },
  {
    "x": 19,
    "y": 26,
    "type": "2021",
    "value": 90
  },
  {
    "x": 71,
    "y": 35,
    "type": "2021",
    "value": 52
  },
  {
    "x": 60,
    "y": 43,
    "type": "2021",
    "value": 62
  },
  {
    "x": 59,
    "y": 31,
    "type": "2021",
    "value": 76
  },
  {
    "x": 9,
    "y": 18,
    "type": "2021",
    "value": 15
  },
  {
    "x": 69,
    "y": 26,
    "type": "2021",
    "value": 28
  },
  {
    "x": 74,
    "y": 52,
    "type": "2021",
    "value": 2
  }
]
  • xAxis: 度量,X 轴的值。

  • yAxis: 度量,Y 轴的值。

# 数据资源

基础

# 交互

当单击散点图散点时,绑定字段中数据会推送到变量中。关联此变量的组件将携带此变量值,触发数据请求,查询相关数据,更新组件。具体配置请参考组件交互。

# 单击散点事件

勾选启用,开启单击散点交互功能。

# 散点悬停事件

勾选启用,开启散点悬停交互功能。

# x轴标签单击事件

勾选启用,开启x轴标签单击交互功能。

# y轴标签单击事件

勾选启用,开启y轴标签单击交互功能。

# 数据响应

散点图支持数据响应配置。

# 数据上卷、下钻

散点图支持数据上卷、下钻功能。

# 节点编程

# 事件

  • 图表配置转换完成后: 图表 Option 配置转换完成后事件。

    • 抛出的参数: 配置完成后的 Option 。
  • 散点单击事件: 散点单击触发事件。

    • 抛出的参数: 散点所携带的数据。
  • 散点悬停事件: 散点悬停触发事件。

    • 抛出的参数: 散点所携带的数据。
  • 散点移出事件: 散点移出触发事件。

    • 抛出的参数: 散点所携带的数据。
  • 图例切换事件: 图表图例切换时触发。

    • 抛出的参数: 切换的图例名称及选中状态。
  • 时间轴切换事件: 时间轴切换时触发。

    • 抛出的参数: 时间轴节点名称。
  • X轴标签单击事件: 单击X轴标签时触发。

    • 抛出的参数:
          {
              value:'x轴被点击的标签值'
          }
      
      
  • Y轴标签单击事件: 单击X轴标签时触发。

    • 抛出的参数:
          {
              value:'y轴被点击的标签值'
          }
      
      
  • 伸缩域改变事件: 伸缩与改变时触发事件。

    • 抛出的参数:
          {
              end:"缩放条终点所在位置"
              start:"缩放条起点所在位置"
          }
      
      

# 动作

  • 导入图表配置: 可导入 Echarts 图表 Option 配置。

    • 接收的参数: 修改后的 Option 。
  • 设置图例: 设置图例的选中状态。

    • 接收的参数:
      {
        "类型一": true,
        "类型二": false,
        "类型三": false
      }
    
  • 设置时间轴: 设置活动的时间轴节点。 3.0+

    • 接受参数: 时间轴节点名称。例如:
      {
        "value": "2021"
      }
    
Last Updated: 9/6/2022, 10:55:25 AM