区域图

区域图是折线图的一种,它是由基本折线图演变而来,可配置项与使用方式与基本折线图一致。本文档为您介绍基本区域图各配置项的含义,帮助您快速准确地使用基本区域图组件。

配置


  • 基础设置

    • width:组件在编辑器中的宽度

    • height:组件在编辑器中的高度

    • top:组件与编辑器顶部的距离

    • left:组件与编辑器左侧的距离

  • 画布间距

    • 顶间距:该图表与组件边界顶部的距离,单位为px

    • 右间距:该图表与组件边界右侧的距离,单位为px

    • 底间距:该图表与组件边界底部的距离,单位为px

    • 左间距:该图表与组件边界左侧的距离,单位为px

  • 标题

    • 显示/隐藏:是否展示该图表的标题

    • 标题名称:该图表的标题的名称

    • 左边距:标题离容器左侧的距离

    • 上边距:标题离容器上侧的距离

    • 文本样式

      • 字号:标题的字体大小

      • 颜色:标题的颜色,支持hex、rgb以及rgba格式的色值

      • 字体:标题的字体

      • 字体粗细:标题字体的粗细

pic

  • 提示框

    • 显示/隐藏:当鼠标悬浮到图表上的点时,是否展示其提示的信息

    • 触发类型:如何触发提示框的展示

    • 格式:提示框的展示内容可支持自定义配置,其中{a}表示系列名称,{b}表示类目轴的值,{c}表示数值

      pic

    • 背景颜色:提示框的背景颜色,支持hex、rgb以及rgba格式的色值

    • 边线颜色:提示框边线的颜色,支持hex、rgb以及rgba格式的色值

    • 边线宽度:提示框边线的宽度,单位px

    • 内边距:提示框的内边距,例如:"5,5,5,5",代表上右下左边距分别为5px、5px、5px、5px

pic

  • 图例

    • 显示/隐藏:是否展示该表图的图例

    • 左间距:图例与容器左侧的距离

    • 顶间距:图例与容器上侧的距离

    • 排列方向:图例的排列方向,可选择水平 or 垂直进行展示

    • 图例图标:图例的图标,可选圆形、方形、三角形、菱形图标进行展示

    • 文本样式

      • 字号:图例的字体大小

      • 颜色:图例的颜色,支持hex、rgb以及rgba格式的色值

      • 字体:图例的字体

      • 字体粗细:图例的字体粗细

pic

  • X轴

    • 显示/隐藏:是否展示该图表的x轴

    • 两端留白:控制数据起点是否从零刻度开始,建议使用两端留白,比较美观

      pic

    • 坐标轴名称

      • x轴名称:x轴的名称

      • x轴名称位置:x轴的名称位置,可选起点处、居中、终点处

      • 轴线间距:x轴的名称与轴线的距离

      • 样式

        • 颜色:坐标轴名称的颜色,支持hex、rgb以及rgba格式的色值

        • 字体大小:坐标轴名称的字体大小

        • 字体粗细:坐标轴名称的字体粗细

        • 字体:坐标轴名称的字体

      pic

    • 轴线

      • 显示/隐藏:是否展示x轴的轴线

      • 轴线样式

        • 颜色:轴线的颜色,支持hex、rgb以及rgba格式的色值

        • 样式:轴线可选实线 or 虚线进行展示

        • 宽度:控制轴线的粗细,单位px

      pic

    • 刻度值

      • 显示/隐藏:是否展示x轴的刻度值

      • 字号:刻度值的字体大小

      • 颜色:刻度值的颜色,支持hex、rgb以及rgba格式的色值

      • 字体:刻度值的字体

      • 字体粗细:刻度值字体的粗细

      pic

    • 刻度线

      • 显示/隐藏:是否展示x轴上的刻度线

      • 向内朝向:控制刻度线的朝向

        pic

      • 对齐标签:坐标轴刻度是否和标签对齐

        pic

      • 刻度线样式

        • 颜色:刻度线的颜色,支持hex、rgb以及rgba格式的色值

        • 线宽:刻度线的线宽,单位px

    • 网格线

      • 显示/隐藏:是否展示图表区域中的网格线

      • 网格线样式

        • 颜色:网格线的颜色,支持hex、rgb以及rgba格式的色值

        • 样式:网格线的样式,可选实线、虚线、点进行展示

        • 线宽:网格线的线宽,单位px

      pic

  • Y轴

    y轴的配置与x轴基本类似,具体配置应用可参照x轴

    • 显示/隐藏:是否展示该图表的y轴

    • 坐标轴名称

      • y轴名称:y轴的名称

      • y轴名称位置:y轴的名称位置,可选起点处、居中、终点处

      • 轴线间距:y轴的名称与轴线的距离

      • 样式

        • 颜色:坐标轴名称的颜色,支持hex、rgb以及rgba格式的色值

        • 字体大小:坐标轴名称的字体大小

        • 字体粗细:坐标轴名称的字体粗细

        • 字体:坐标轴名称的字体

    • 轴线

      • 显示/隐藏:是否展示y轴的轴线

      • 轴线样式

        • 颜色:轴线的颜色,支持hex、rgb以及rgba格式的色值

        • 样式:轴线可选实线 or 虚线进行展示

        • 宽度:控制轴线的粗细,单位px

    • 刻度值

      • 显示/隐藏:是否展示y轴的刻度值

      • 字号:刻度值的字体大小

      • 颜色:刻度值的颜色,支持hex、rgb以及rgba格式的色值

      • 字体:刻度值的字体

      • 字体粗细:刻度值字体的粗细

    • 刻度线

      • 显示/隐藏:是否展示x轴上的刻度线

      • 向内朝向:控制刻度线的朝向

    • 网格线

      • 显示/隐藏:是否展示图表区域中的网格线(按照x轴的刻度进行划分)

      • 网格线样式

        • 颜色:网格线的颜色,支持hex、rgb以及rgba格式的色值

        • 样式:网格线的样式,可选实线、虚线、点进行展示

        • 线宽:网格线的线宽,单位px

  • 数据系列

    该配置项为一个数组,可配置多个系列,编辑器将遍历数据,使数据通过一个或多个系列配置循环渲染。若需要自定义某些数据为特定样式则需要手动对数据进行排序

    • 列字段名:与数据配置中的字段一致,控制图表一组数据的展示

    • 系列名:通过系列名,可自定义图例的名称

      pic

    • 拐点样式:数据点的样式,可选不显示、圆点、圆圈进行展示

    • 标签

      • 显示/隐藏:是否展示此系列下图表的标签

      • 字号:标签的字体大小

      • 颜色:标签的颜色,支持hex、rgb以及rgba格式的色值

      • 字体:标签的字体

      • 字体粗细:标签字体的粗细

      pic

    • 折线样式

      • 颜色:折线的颜色,支持hex、rgb以及rgba格式的色值

      • 线宽:网格线的线宽,单位px

      • 样式:折线的样式,可选实线、虚线、点进行展示

    • 曲线平滑:开启后,折线将变成连续的曲线进行展示

      pic

    • 区域填充:开启后,该折线区域将进行渐变展示

      pic

数据


return [{
    "x": "1月",
    "y1": 215,
    "y2": 245
}, ......]
  • x:类目轴字段

  • y:数据轴自定义字段,需要与每个序列配置项中的列字段名一致

pic

个搜索结果,搜索内容 “

    0 个搜索结果,搜索内容 “