跳到主要内容

DynamicDvScatterHelper

组件库本身的设计理念是单次渲染，对于实现多周期渲染的复杂业务场景，需要做的工作量还很多

本hepler旨在聚合【时间轴】与【气泡图】组件，处理时间轴与图表的交互，并在此基础上扩展【历史轨迹】【自适应】等功能，用于帮助业务方介绍复杂业务场景下的接入成本

提示

时间轴相关文档查看官方文档

功能说明​

本helper协助实现了以下部分功能，内部实现的同时也有一定的限制性，如有不满足的业务场景，可以找对应开发(lishaojie@myhexin.com)反馈

  • 功能扩展

    • 可以开启历史轨迹
    • 可以开启轴线极值自适应

  • 动画处理

    • 处理了历史轨迹动画
    • 处理了播放态与暂停态的动画

  • 交互处理

    • 处理了历史轨迹下非历史轨迹series的交互禁用
    • 播放时点击图表则触发暂停
    • 兼容多选且开启历史轨迹

  • 配置处理

    • 自动生成历史轨迹配置项
    • 自动计算气泡轴线极值
    • 自动在开启历史轨迹时适应轴线极值
    • 处理聚焦时label的显隐
    • 处理历史轨迹初始化时label的显隐

调用示例​

// 实例化图表
const chart = standardChart.init('chart', 'mobile-app-light')

// 实例化时间轴
const timelineInstance = new ThsDataVTimeline.Timeline('timeline', {
  theme: "mobile-app-light",
  data: [2011, 2012, 2013, 2014, 2015],
  config: {
    dataIndex: 4,
    animation: {
      intervalTime: 1500,
    },
  },
});

// 测试数据
const options = [
  {
    series: [
      {
        name: 'A',
        type: 'dvScatter',
        data: [
          {
            name: 'A1',
            value: [26, 82, 35],
            itemConfig: {
              insideText: 'A1'
            }
          },
          {
            name: 'A2',
            value: [11, 79, 46],
            itemConfig: {
              image: 'http://u.thsi.cn/imgsrc/share/321db55c97747c91ebaa0adbba7953d6.jpg'
            },
            itemStyle: [
              {
                id: 'circle',
                style: {
                  lineWidth: 10,
                  stroke: 'red'
                }
              }
            ]
          },
          {
            name: 'A3',
            value: [97, 82, 47],
            itemConfig: {
              badgeText: 'A'
            }
          },
          {
            name: 'A4',
            value: [19, 51, 81]
          }
        ],
        dvRValueRange: [1, 97]
      },
      {
        name: 'B',
        type: 'dvScatter',
        data: [
          {
            name: 'B1',
            value: [43, 78, 79]
          },
          {
            name: 'B2',
            value: [2, 98, 45]
          },
          {
            name: 'B3',
            value: [5, 41, 87]
          }
        ],
        dvRValueRange: [1, 97]
      }
    ],
    xAxis: {
      axisLabel: {
        showMaxLabel: true,
        showMinLabel: true
      }
    },
    yAxis: {
      axisLabel: {
        showMaxLabel: true,
        showMinLabel: true
      }
    }
  },
  {
    series: [
      {
        name: 'A',
        type: 'dvScatter',
        data: [
          {
            name: 'A3',
            value: [6, 29, 63]
          },
          {
            name: 'A4',
            value: [93, 69, 73]
          },
          {
            name: 'A5',
            value: [49, 59, 68]
          }
        ],
        dvRValueRange: [1, 97]
      },
      {
        name: 'B',
        type: 'dvScatter',
        data: [
          {
            name: 'B1',
            value: [81, 80, 27]
          },
          {
            name: 'B2',
            value: [6, 19, 97]
          },
          {
            name: 'B3',
            value: [18, 77, 91]
          }
        ],
        dvRValueRange: [1, 97]
      }
    ],
    xAxis: {
      axisLabel: {
        showMaxLabel: true,
        showMinLabel: true
      }
    },
    yAxis: {
      axisLabel: {
        showMaxLabel: true,
        showMinLabel: true
      }
    }
  },
  {
    series: [
      {
        name: 'A',
        type: 'dvScatter',
        data: [
          {
            name: 'A3',
            value: [79, 8, 49]
          },
          {
            name: 'A4',
            value: [33, 93, 86]
          },
          {
            name: 'A7',
            value: [49, 40, 1]
          }
        ],
        dvRValueRange: [1, 97]
      },
      {
        name: 'B',
        type: 'dvScatter',
        data: [
          {
            name: 'B1',
            value: [98, 20, 72]
          },
          {
            name: 'B2',
            value: [45, 11, 76]
          }
        ],
        dvRValueRange: [1, 97]
      }
    ],
    xAxis: {
      axisLabel: {
        showMaxLabel: true,
        showMinLabel: true
      }
    },
    yAxis: {
      axisLabel: {
        showMaxLabel: true,
        showMinLabel: true
      }
    }
  },
  {
    series: [
      {
        name: 'A',
        type: 'dvScatter',
        data: [
          {
            name: 'A3',
            value: [21, 21, 87]
          },
          {
            name: 'A4',
            value: [81, 34, 85]
          },
          {
            name: 'A6',
            value: [9, 95, 97]
          },
          {
            name: 'A7',
            value: [1, 58, 88]
          }
        ],
        dvRValueRange: [1, 97]
      },
      {
        name: 'B',
        type: 'dvScatter',
        data: [
          {
            name: 'B1',
            value: [69, 98, 65]
          },
          {
            name: 'B3',
            value: [12, 93, 31]
          }
        ],
        dvRValueRange: [1, 97]
      }
    ],
    xAxis: {
      axisLabel: {
        showMaxLabel: true,
        showMinLabel: true
      }
    },
    yAxis: {
      axisLabel: {
        showMaxLabel: true,
        showMinLabel: true
      }
    }
  },
  {
    series: [
      {
        name: 'A',
        type: 'dvScatter',
        data: [
          {
            name: 'A3',
            value: [12, 3, 29]
          },
          {
            name: 'A4',
            value: [26, 41, 65]
          },
          {
            name: 'A6',
            value: [69, 14, 47]
          },
          {
            name: 'A7',
            value: [58, 75, 38]
          }
        ],
        dvRValueRange: [1, 97]
      },
      {
        name: 'B',
        type: 'dvScatter',
        data: [
          {
            name: 'B1',
            value: [7, 70, 2]
          },
          {
            name: 'B2',
            value: [31, 15, 55]
          },
          {
            name: 'B3',
            value: [62, 54, 86]
          }
        ],
        dvRValueRange: [1, 97]
      }
    ],
    xAxis: {
      axisLabel: {
        showMaxLabel: true,
        showMinLabel: true
      }
    },
    yAxis: {
      axisLabel: {
        showMaxLabel: true,
        showMinLabel: true
      }
    }
  }
];

// 实例化helper
const helper = new standardChart.helper.DynamicDvScatterHelper(
  options,
  chart,
  timelineInstance
);

参数说明​

参数名称是否必选参数类型参数说明
optionsYOption[]单期数据组成的数组，需要注意的是，在ECharts的设计中，只有同名的图形元素才会开启过渡动画，否则默认按照索引
chartYStandardChart图表实例
timelineYTimeline时间轴实例
configNConfig额外配置
//  Config内参数一览
interface Config {
  // 是否开启自动自适应，开启后在开启历史轨迹时会自动触发一次自适应
  autoAdapt?: boolean;
  // 轴线极值取整规则
  xNiceRangeConfig?: {
    absoluteInterval?: number;
    relativeInterval?: number;
  };
  yNiceRangeConfig?: {
    absoluteInterval?: number;
    relativeInterval?: number;
  };
  // 轴线极值合并策略
  // 用户可传入自定义的轴线极值，最终结果将根据合并策略生成
  axisRangeMerge: 'both' | 'custom' | 'helper';
}

API描述​

history()​

  • history(): void

切换历史轨迹与非历史轨迹的状态 如果当前为非历史轨迹状态，则视为enterHistory 如果当前为历史轨迹状态，则视为exitHistory

enterHistory()​

  • enterHistory(outSelectPoints?: outSelectPoint[])

  • 参数

    名称类型是否可选默认值描述
    outSelectPoint.seriesIndexnumber对应点的seriesIndex
    outSelectPoint.dataIndexnumber对应点的dataIndex

进入历史轨迹状态，当前没有高亮点且没有外部传入的指定数据点（即outSelectPoint）时，不执行操作

exitHistory()​

  • exitHistory(): void

退出历史轨迹

enterAdapt()​

  • enterAdapt(): void

在当前图形元素下自适应一次

exitAdapt()​

  • exitAdapt()：void

还原最开始时的轴线极值

reset()​

  • reset(args)

  • 参数

    名称类型是否可选默认值描述
    args`('history''adapt')[]`是['history', 'adapt']

根据传参重置对应的功能点

setHistorySeriesPluginById()​

提示

HistorySeries的ID生成规则如下：

如果开启历史轨迹的点对应的dataItem中有name属性，则历史轨迹ID为${name}-history

否则，取其sereisIndex与dataIndex联合为ID，记作seriesIdx${seriesIndex}-dataIdx${dataIndex}-history

  • setHistorySeriesPluginById(id:string, fn:(dvScatterOption:DvScatterOption)=>DvScatterOption

  • 参数

    名称类型是否可选默认值描述
    idstring传入的历史轨迹seriesId
    fn(dvScatterOption:DvScatterOption)=>DvScatterOption用户可以在该回调中按照自己的需求加工helper内生成的HistorySeries