全部文档
当前文档

暂无内容

如果没有找到您期望的内容,请尝试其他搜索词

文档中心

如何建立平台dataset和echart组件的映射?

最近更新时间:2021-03-02 20:03:32

AxisBI开发了js组件。这意味着AxisBI具有使用echart组件的能力。

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

问题:AxisBI的dataset如何存储?

image.png

image.png

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

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

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

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

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

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

如图效果:

image.png

文档导读
纯净模式常规模式

纯净模式

点击可全屏预览文档内容
文档反馈