如何建立有数dataset和echart组件的映射?

6.10版本以后有数开发了js组件。这意味着有数具体使用echart组件的能力。

有数使用echart,会用自己的dataset数据集来填充echart的数据部分。

问题:有数的dataset如何存储?

如何建立有数dataset和echart组件的映射? - 图1如何建立有数dataset和echart组件的映射? - 图2

从上图的左边部分可知有数对dataset是列数存储。 从右图可知dataset实际存储情况。 dataset实际上是一个二维数组。所以我们要取”地区”的数据我们只要遍历dataset的第一列数据,取”折扣”即遍历第二列数据。依次类推。

现在我们做一个最简单的echart 图形:

下面代码为echart官网的折线图实例:

  1. option = { xAxis: { type: 'category',
  2. data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
  3. yAxis: { type: 'value' },
  4. series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320],
  5. type: 'line' }]};

下图为填充有数dataset的折线图实例:

  1. // 向右侧数据面板中拖入字段,可在代码中引用dataSet字段获取二维数组数据
  2. //对dataset进行列遍历
  3. dataSet = dataSet.map((data, i) => dataSet.map(d => d[i]));
  4. var 地区 = dataSet[0];
  5. var 折扣 = dataSet[1];
  6. var 数量 = dataSet[2];
  7. var 销售额 = dataSet[3];
  8. option = { xAxis: { type: 'category',
  9. data: 地区 },
  10. yAxis: { type: 'value' },
  11. series: [{ data: 折扣,
  12. type: 'line' }]};

如图效果:

如何建立有数dataset和echart组件的映射? - 图3