图表组件

图表组件允许你在应用内展示丰富的图表,卡拉云中的图表组件使用 ECharts,因此所有在 ECharts 中可以展示的图表和样例均可以直接在卡拉云中使用。

添加图表

从组件选择列表中,选择“图表”并拖拽到界面编辑器上,即可添加一个图表,如下图所示

添加图表

ECharts

用鼠标点击界面上的图表后,左侧出现 Echart 数据设置。这里填入的设置,即为 ECharts 中的图表中的 setOption 中的选项。

对于 ECharts 的选项中具体有哪些可配置项,可以参考 Echarts 的文档。在本文中,我们给出一些简单的例子,但ECharts 的所有示例,也都可以直接在卡拉云中使用,包括但不限于

  • 折线图
  • 柱状图
  • 饼图
  • 散点图

等等,如下图

echarts 中的示例

如何配置图表

ECharts 的配置是通过一个 JS 对象来完成的,比如

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

就是一个配置基本的折线图的 JS 对象。注意,JS 对象的 key 是不含双引号的,比如这里的 xAxis。如果你留心的话,所有在 ECharts 文档中的示例均为 JS 对象,也就是说它们的 key 都是不带双引号的。

要配置图表,先点击图表,在左侧的 ECharts 设置中,即可进行配置。

ECharts设置

注意在卡拉云中,你可以在双花括号 {{}} 中使用任意 JS 代码。因此,如果要将上面的折线图放到卡拉云中,非常简单,只需要用双花括号将整个设置括,放入一个立即执行函数中即可,如下

{{
  (function setOption() {
      const option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ]
      
      }
      return option;
    })()
}}

上面的代码中,我们声明了一个叫 setOption 的函数,它的唯一作用就是返回 option 这个 ECharts 设置对象。在 ECharts 的官方示例中,每个图例你都可以找到一个设置,只需要将其对应的 option 的值复制过来即可。

📘
将代码块放入双花括号中
注意上图中的代码块是以双花括号开头,且以反双花括号结尾,这表明这是一个代码块,而代码块中则是 JS 代码。这里的函数名 setOption 不是必要的,你任意命名。这个立即执行函数的唯一作用就是立即返回一个 ECharts 设置对象而已

换一个例子,如果你想画一条平滑曲线,如果你打开 ECharts 的官方示例平滑曲线,可以看到它的配置为

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',
      smooth: true
    }
  ]
};

放到卡拉云中即为

{{
  (function setOption() {
      const 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',
         smooth: true
        }
        ]
      };
      return option;
    })()
}}

如图示

平滑曲线配置

在图表中使用数据

如果你需要图表动态地展示数据,那么你可以在 EChart 配置中引用其它的数据。举个例子,我们用一个简单的表格数据为例。假设表格 table1 中数据为

[
  {"traffic": 182, "time": "一月"},
  {"traffic": 170, "time": "二月"},
  {"traffic": 199, "time": "三月"},
  {"traffic": 201, "time": "四月"},
  {"traffic": 205, "time": "五月"},
  {"traffic": 243, "time": "六月"},
  {"traffic": 212, "time": "七月"},
  {"traffic": 295, "time": "八月"}
]  

那么我们在如下的柱形图中配置中,就可以使用 table1 中的数据。在 {{}} 花括号里我们可以引用任何组件的数据,因此我们只需要在配置对象中,引用 table1.data 中的数据即可

{{
  (function setOption() {
      const option = {
        xAxis: {
        type: 'category',
        data: table1.data.map(d => d.time)
       },
       yAxis: {
         type: 'value'
       },
       series: [
       {
         data: table1.data.map(d => d.traffic),
         type: 'line',
         smooth: true
        }
        ]
      };
      return option;
    })()
}}

数据配置

注意这里,x 轴的数据被配置为 table1.data.map(d => d.time) 即从 table1 中,将数据整理并抽出时间项,同时在 Y 轴值中,使用 table1.data.map(d => d.traffic),即抽出流量的值。这是标准的 JS 操作,即将数据整理为一个数组。其它的配置项均为 EChart 柱状图的标准配置。