动态排名图

图表底层基于 ECharts，所以参考 ECharts 官方配置项文档使用即可。 同时，在 ECharts 之上我们对其能力做了扩展，暴露了部分自定义配置项，在这里进行说明。

​ 动态排名图默认支持与时间轴联动，通过时间轴变化带动排名图更新视图。详情可见实例。

图表数据结构

xy轴的数据结构

信息

目前排名图所能支持的坐标系只有垂直坐标系，所以默认轴的类型为xy轴。后续迭代可能会支持极坐标系的半径轴和角度轴。

特别的，y轴的数据推荐使用离散类型的数据，并且在绘制中根据数组顺序在y轴从下到上排布。

• 类型：Array
• 默认值：undefined
• echarts基本说明： xData、yData

示例配置：

// 表示来自接口或业务端处理后的原始数据
// xData表示为x轴数据，yData表示为y轴数据
{
 xData: ["2019一季度", "2019二季度", "2019三季度", "2019四季度"],
    yData: ["10", "9", "8", "7", "6", "5", "4", "3", "2", "1"]
}

折线Series的数据结构

信息

数据内容方面，为了方便配置，折线的数据尽可能包含图表中可能需要的所有数据。例如排名信息、时间、具体指标的值（持股占比等）、点击链接、节点大小等。

数据结构上，目前可支持简单数组和对象数组类型，具体可见下方示例。

针对对象数组类型的数据，每个对象中必须要有一个value属性的字段，表示单个数据项的数值

• 类型：Array
• 默认值：undefined
• echarts基本说明：seriesData

示例配置：

// 表示来自接口或业务端处理后的原始数据
// seriesData1表示简单类型的数据形式， seriesData2表示对象类型的数据形式
{
    seriesData1: ['3', '4', '1', '5', '11', '6']

    seriesData2: [
      {
       // value表示本数据项的排名为'3'
                "value": "3",
       // 其余数据根据需要添加，属性名可自拟
                "date": "2019一季度",
                "name": "易峥",
                "stockValue": 193537000,
                "stockPercent": "36.00%",
                "pic": "ths_1.png",
                "link": "https://xxx",
                "event": null,
                "content": null,
                "value": "1",
                "extent": [
                    1926979,
                    194221000
                ]
            },
            {
                // value表示本数据项的排名为'4'
                "value": "4",
                // 其余数据根据需要添加，属性名可自拟
                "date": "2019二季度",
                "name": "易峥",
                "stockValue": 193537000,
                "stockPercent": "36.00%",
                "pic": "ths_1.png",
                "link": "xxx",
                "event": null,
                "content": null,
                "value": "1",
                "extent": [
                    1926979,
                    194221000
                ]
            },
    ]
}

自定义配置项

以下配置项仅在series.type: 'dvRankLine'时有效。

series.withTimeline

注意

该配置项在排名图中是必须的。

• 类型：Object
• 默认值：undefined

与时间轴联动相关的数据。

v0.2.65+

series.withTimeline.maxRange

注意

该配置项在withTimeline中是必须的。

一般来说，排名图在每个时间状态展示的最大范围不需要改变。

• 类型：number
• 默认值：undefined

当前时间状态下，图表数据能够展示的最大区间。

v0.2.65+

series.withTimeline.range

注意

该配置项在withTimeline中是必须的。

range[0]要求小于range[1]。

range[0]和range[1]均表示在[0, maxRange]内的相对位置。可见下方示例。

• 类型：[number, number]
• 默认值：undefined

当前时间状态下，图表数据的展示区间。

v0.2.65+

示例配置:

{
 series: {
  withTimeline: {
   maxRange: 5,
   // 表示在本次时间轴更新中，数据的展示区间是[当前时间点 - 3, 当前时间点]
   range: [0, 3],
   curIndex: 3
  }
 }
}

series.withTimeline.curIndex

注意

该配置项在withTimeline中是必须的。

一般来说，排名图在每个时间状态展示的最大范围不需要改变。

• 类型：number
• 默认值：undefined

当前时间状态下，图表的排名所在的x轴索引。

v0.2.65+

联动时间轴组件

首先需要初始化时间轴，在时间轴的配置data中传入data：xData, 让时间轴的刻度数据和排名图的时间点一致，保证同步。

绑定时间轴事件

在时间轴的change（数据索引变化）事件的回调里，对图表的配置项进行更新合并，然后刷新视图。

示例配置：

// 这里假设数据展示的最大范围是5
const maxRange = 5;
TimeLine.on('change', ({ index, causeBy }) => {
  let opt = {
    animation: causeBy === 'play'
  }
  // 如果当前时间轴刻度到第一个刻度的时间差没有超过数据展示的最大范围，则持续扩大展示区间
  if (index <= range) {
    opt = {
      dataZoom: [
        {},
        {
          startValue: 0,
          endValue: range
        }
      ],
      series: option.series.slice().map(() => {
        return {
          clip: 'strict',
          withTimeline: {
            range: [0, index],
            curIndex: index
          }
        }
      })
    }
  } else {
    // 如果当前时间轴刻度到第一个刻度的时间差大于最大的数据区间，则数据展示区间不变，并随当前时间点
    // 向下一个时间刻度平移一个刻度
    opt = {
      dataZoom: [
        {},
        {
          startValue: index - range,
          endValue: index
        }
      ],
      series: option.series.slice().map(() => {
        return {
          withTimeline: {
            range: [0, range],
            curIndex: index
          },
        }
      })
    }
  }
  // 合并新的配置项，刷新视图
  chart.play({
    option: opt,
  })
})