首页 入门 文档 下载 模板 示例 - OSCHINA 示例 - CSDN 留言板 开源协议 企业版

内置图表类型

本文档仅提供2.0API版本的相关功能说明，对于1.0API版本的功能，请参考旧版文档。

图表选项

ECharts官方图表

折线图、柱状图、饼图、仪表盘、散点图、雷达图、漏斗图、地图、K线图、热力图、树图、旭日图、桑基图、关系图、箱形图（盒须图）、平行坐标系图、主题河流图， 这些类型的图表选项参考ECharts官网的配置项手册文档。
对于折线图、柱状图、散点图、饼图、雷达图、K线图、热力图、象形图、进度图、箱形图， 还支持设置sortAxisData选项，当类目轴的默认数据顺序不符合预期时，可以使用它自定义排序，格式为： 
{
  sortAxisData:
  //类目轴数据升序排列
  "asc"、
  //类目轴数据降序排列
  "desc"、
  //自定义类目轴数据排序比较函数
  //a 类目数据项，通常是字符串
  //b 类目数据项，通常是字符串
  //返回比较值：负值：表示a小于b；零值：表示a等于b；正值：表示a大于b
  function(a, b){ return 比较值; },
  
  //其他ECharts选项
  ...
}

词云图

ECharts扩展图表，详细图表选项参考echarts-wordcloud项目说明文档。

水球图

ECharts扩展图表，详细图表选项参考echarts-liquidfill项目说明文档。

基本表格

HTML图表，图表选项格式如下所示： 
{
  title:  //标题
  {
    show: true,  //是否显示
    text: "...",  //自定义标题文本
    //标题CSS样式，示例："color:red;font-size:2rem;"
    style: "...",
  },
  tableStyle:  //表格样式
  {
    //表格元素CSS样式
    table: "...",
    head:  //表头CSS样式
    {
      row: "..."  //行CSS样式
    },
    body:  //表体CSS样式
    {
      //行CSS样式
      row: "...",
      //奇数行CSS样式
      rowOdd: "...",
      //偶数行CSS样式
      rowEven: "...",
      //鼠标悬浮行CSS样式
      rowHover: "...",
      //选中行CSS样式
      rowSelected: "..."
    }
  },
  //自定义单元格渲染函数
  // value 单元格值
  // name 单元格列名
  // rowIndex 单元格行索引
  // columnIndex 单元格列索引
  // row 单元格所在的行数据对象
  renderCell: function(value, name, rowIndex, columnIndex, row)
  {
    return "...";
  },
  //表格轮播设置项
  carousel:
  //开启、禁用轮播
  true、false、
  //仅在表格高度溢出时开启轮播
  "auto"、
  //开启轮播，并设置滚动间隔毫秒数
  数值、
  //开启轮播，并设置返回滚动间隔毫秒数的函数
  function(tr, visibleHeight, height){ return ...; }、
  //轮播详细设置
  {
    //是否开启
    //"auto" 仅在表格高度溢出时开启轮播
    enable: true、false、"auto",
    //滚动间隔毫秒数，或者是一个返回滚动间隔毫秒数的函数
    interval: 50、
    //tr 当前顶部可见行DOM元素
    //visibleHeight 当前顶部可见行的剩余可见高度
    //height 当前顶部可见行总高度
    function(tr, visibleHeight, height){ return ...; },
    //是否在鼠标悬停时暂停轮播
    pauseOnHover: true,
    //是否隐藏纵向滚动条
    hideVerticalScrollbar: true
  },
  //固定列配置项
  fixedColumns:
  {
    //固定左侧列数
    leftColumns: 1,
    //固定右侧列数
    rightColumns: 1
  },
  //客户端分页配置项：true 开始；false 禁用
  paging: false,
  //是否开启选中操作和效果：true 是；false 否
  select: true,
  //是否禁用条纹样式效果：true 是；false 否
  disableStripe: false,
  //是否禁用悬浮样式效果：true 是；false 否
  disableHover: false,
  //空白符处理格式：
  //"nowrap" 始终不换行
  //"normal" 默认不换行，直到父元素空间不够时换行
  //"pre" 始终保留原始格式
  //"pre-wrap" 默认保留原始格式，直到父元素空间不够时换行
  whitespaceFormat: "nowrap",
  //服务端分页配置项（注意：开启此项功能将会自动禁用轮播功能）
  serverSidePaging:
  {
    //必填，将底层的表格组件分页数据同步至图表数据集参数，
    //表格组件分页数据格式为：
    //{
    //  start: 数值, //分页起始索引，以0开始
    //  length: 数值, //页大小
    //  search: { value: "..." /*查询关键字*/ },
    //  order: [ { name: "..." /*排序字段名*/, dir: "asc"、"desc" /*排序方式*/ }, ... ]
    //}
    param:
    //同步设置映射对象，其属性名应是表格组件分页数据的某个属性名，属性值即是要设置到的数据集参数，其中：
    //数值 表示设置到第0个数据集指定索引号的参数
    //"..." 表示设置到第0个数据集的指定名称的参数
    //{dataSet: ..., param: ...} 表示设置到指定索引号的数据集的指定参数
    {
      "...": 数值、"..."、{ dataSet: 数值, param: 数值、"..." },
      ...
    }、
    //同步设置映射数组，其中的每一项表示将表格组件分页数据的某个属性值设置到指定数据集参数
    [
      {
        //必填，表格组件分页数据的某个属性名
        name: "...",
        //必填，要设置到的数据集参数索引信息，格式同上述同步设置映射对象中的对应信息
        index: 数值、"..."、{ dataSet: 数值, param: 数值、"..." },
        //可选，自定义源值处理函数，返回要设置的目标参数值，其中data即是表格组件分页数据
        value: function(value, data){ return ...; }
      },
      ...
    ]、
    //同步设置函数，其中data即是表格组件分页数据
    function(data, chart){ ... },
    //与totalFieldName、totalValue选项三者必选其一，数据集结果附加数据中的总记录数属性名
    totalAdditionName: "...",
    //与totalAdditionName、totalValue选项三者必选其一，附件数据集中总记录数字段名
    totalFieldName: "...",
    //与totalFieldName、totalAdditionName选项三者必选其一，附件数据集中总记录数函数
    totalValue: function(chart){ ...; return 总记录数; },
    //可选，根据图表数据集参数设置表格分页状态，或者返回要设置的表格分页状态数据，
    //如果不设置，使用图表参数面板的查询信息不会同步到表格分页状态，
    //可选返回的表格分页状态数据格式为：
    //{
    //  start: 数值, //分页起始索引，以0开始
    //  length: 数值, //页大小
    //  searchValue: "...", //可选，查询关键字
    //  //可选，排序信息
    //  order: [ { name: "..." /*排序字段名*/, dir: "asc"、"desc" /*排序方式*/ }, ... ]
    //}
    state: function(chart){ ... }
  }
}
表格图表底层采用了DataTable组件，更多图表选项参考其官网DataTable配置项说明文档。

标签卡

HTML图表，图表选项格式如下所示： 
{
  //布局，"flex-around" 居中间隔；"flex-start" 左对齐；"flex-end" 右对齐；
  //"flex-center" 居中；"flex-between" 贴边间隔；""、null 无
  layout: "flex-around",
  //是否将标签卡名、值在同一行显示
  inline: false、true,
  //是否标签值在前、标签名在后显示
  valueFirst: false、true,
  //是否隐藏标签名
  hideName: false、true,
  //容器元素样式，示例："color:red;font-size:2rem;"
  containerStyle: "...",
  //标签条目公用css样式
  itemStyle: "...",
  //标签名公用css样式
  nameStyle: "...",
  //标签值公用css样式
  valueStyle: "...",
  //容器元素类名
  containerClass: "...",
  //标签条目元素类名
  itemClass: "...",
  //标签名元素类名
  nameClass: "...",
  //标签值元素类名
  valueClass: "...",
  data:  //数据
  [
    {
      //标签条目css样式
      itemStyle: "...",
      //标签名css样式
      nameStyle: "...",
      //标签值css样式
      valueStyle: "...",
      //标签条目元素类名
      itemClass: "...",
      //标签名元素类名
      nameClass: "...",
      //标签值元素类名
      valueClass: "...",
      name: "...",  //标签名
      value: ...    //标签值
    },
    ...
  ]
}

单选/多选下拉框

HTML图表，图表选项格式如下所示： 
{
  //下拉框元素ID
  id: "...",
  //下拉框名称
  name: "...",
  //可见下拉项数目
  size: 数值,
  //默认选中项：null 默认；数值 选中指定索引的下拉项
  selected: 数值,
  //前置添加的下拉项，格式同data元素，或者其数组，通常用于添加默认选中下拉项
  prepend: undefined,
  //下拉框是否填满父元素，"auto" 当是内联框时填满；true 是；false 否
  fillParent: "auto",
  //下拉框css样式，示例："color:red;font-size:2rem;"
  selectStyle: "...",
  //下拉项公用css样式
  itemStyle: "...",
  //下拉框元素类名
  selectClass: "...",
  //下拉项元素类名
  itemClass: "...",
  data:  //数据
  [
    {
      //下拉项css样式
      itemStyle: "...",
      //下拉项元素类名
      itemClass: "...",
      //是否选中，默认为：false
      selected: true、false,
      name: "...",  //下拉项名
      value: ...    //下拉项值
    },
    ...
  ]
}

日期时间

HTML图表，图表选项格式如下所示： 
{
  //显示格式，其中E表示星期
  format: "yyyy-MM-dd HH:mm:ss E",
  //是否实时刷新
  realtime: true,
  //当realtime为true时的实时更新间隔毫秒数
  interval: 1000,
  //获取当前日期值的函数，每次刷新时都会调用，如果返回的不是Date类型，将直接显示，不会进行格式化
  //chart 图表对象
  value: function(chart) { return new Date(); },
  //停止实时更新判断函数
  //value 上述value函数的返回值
  //chart 图表对象
  stopRealtime: function(value, chart){ return false; },
  //星期定义数组
  weekDays: [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ]
}
此图表类型不需要绑定数据集，可以直接在设计看板时作为【本地图表】直接插入使用。

设置图表地图

对于内置地图类图表，包括：基本地图、散点地图、涟漪散点地图、热力地图、关系地图、飞线地图、路径图， 可以使用ECharts官方选项设置地图，示例： 
{
  series [ { map: "地图名" } ]
}

{
  geo { map: "地图名" }
}
也可以使用扩展的mapName选项，格式为： 
{
  mapName: "地图名",
  //其他ECharts选项
  ...
}
上述地图名应替换为实际地图名，比如：北京。
系统内置了很多地图，可以在上述地图类图表选项中直接使用，详细参考内置图表地图章节。 另外，在定义看板时，也可以扩展地图，详细参考看板源码设计模式-扩展图表地图章节。
系统内置的地图类图表都支持将数据集的某一列标记为图表地图名（最高优先级），用于支持地图随数据一起刷新的场景。
注意：
系统底层采用的ECharts图表库，会对地图名为china的地图特殊处理，在地图右下方添加南海诸岛缩略图，以支持更友好的显示效果。 为了适配，系统内置的中国地图是没有南海诸岛区域的旧版地图，因此，在使用中国地图的图表时，需要使用china地图名， 否则，会出现南海诸岛缩略图无法显示的问题。
如果不希望使用上述内置中国地图，通过扩展图表地图将其替换为新版中国地图即可， 注意替换后不要使用china地图名，否则，地图右下方仍会出现南海诸岛缩略图。

处理图表选项

所有内置图表类型，除了上述的图表选项，还可以设置processRenderOptions、processUpdateOptions选项，用于动态处理图表渲染/更新选项，格式如下所示： 
{
  //处理图表初始渲染选项，此时还未填充数据
  //renderOptions 要处理的图表渲染选项，通常是上述各类图表选项格式且未包含数据部分
  //chart 图表对象
  processRenderOptions: function(renderOptions, chart){ ... },
  //处理图表更新数据选项，此时已填充数据
  //updateOptions 要处理的图表更新选项，通常仅包含上述各类图表选项的数据部分
  //chart 图表对象
  processUpdateOptions: function(updateOptions, chart){ ... },
  
  //其他图表选项
  ...
}

ECharts图表选项数据结构

对于内置的ECharts图表，其图表选项中的series.data系列数据是由对应图表插件根据定义图表时绑定的数据集自动生成的， 其中的单条数据对象结构如下表所示：
图表类型 数据结构
折线图 
{
  name: 名称, value: [ 名称, 数值 ],
  originalCategory: 类别(可选), originalData: { ... }
}
柱状图（基本、横条、径向、角度） 
{
  name: 名称, value: [ 名称, 数值 ],
  originalCategory: 类别(可选), originalData: { ... }
}
饼图 
{
  name: 名称, value: 数值,
  originalCategory: 类别(可选), originalData: { ... }
}
仪表盘 
{
  name: 名称, value: 数值, originalData: { ... }
}
气泡图 
{
  name: 名称, value: [ 名称, 数值 ],
  originalCategory: 类别(可选), originalData: { ... }
}
坐标散点图 
{
  name: 名称, value: [ 名称(横坐标), 数值(纵坐标), 指标值(可选) ],
  originalCategory: 类别(可选), originalData: { ... }
}
雷达图 
{
  name: 名称, value: [ 数值, ... ],
  originalData: { ... }、[ { ... }, ... ]
}
漏斗图 
{
  name: 名称, value: 数值, originalData: { ... }
}
地图 
{
  name: 名称, value: 数值, originalData: { ... }
}
地图散点图 
{
  name: 名称, value: [ 经度, 纬度, 指标值(可选) ],
  originalCategory: 类别(可选), originalData: { ... }
}
地图关系图 节点数据对象（series.data元素）： 
{
  name: 名称, value: [ 经度, 纬度, 数值(可选) ],
  originalId: 原始数据ID, originalCategory: 类别(可选),
  originalData: { ... }
}
连线数据对象（series.links元素）： 
{
  source: 源节点索引号, target: 目标节点索引号,
  originalSourceId: 源节点ID, originalSourceName: 源节点名,
  originalTargetId: 目标节点ID, originalTargetName: 目标节点名,
  originalData: { ... }
}
地图路径图 
{
  name: 名称, coords: [ [ 经度, 纬度 ], ... ],
  originalData: [ { ... }, ... ]
}
地图飞线图 
{
  name: 名称, coords: [ [ 源经度, 源纬度 ], [ 目标经度, 目标纬度 ] ],
  originalCategory: 类别(可选), originalData: { ... }
}
地图热力图 
{
  name: 名称, value: [ 经度, 纬度, 热力值 ],
  originalData: { ... }
}
K线图 
{
  name: 名称, value: [ 名称, 开盘值, 收盘值, 最低值, 最高值 ],
  originalData: { ... }
}
热力图 
{
  name: 名称, value: [ 横坐标, 纵坐标, 热力值 ],
  originalData: { ... }
}
树图、矩形树图 
{
  name: 名称, value: 数值(可选), children: [ ... ],
  originalId: 原始数据ID, originalParent: 原始父级数据ID,
  originalData: { ... }
}
桑基图 节点数据对象（series.data元素）： 
{
  name: 名称, value: 数值(可选),
  originalId: 原始数据ID, originalData: { ... }
}
连线数据对象（series.links元素）： 
{
  source: 源节点索引号, target: 目标节点索引号, value: 数值,
  originalSourceId: 源节点ID, originalSourceName: 源节点名,
  originalTargetId: 目标节点ID, originalTargetName: 目标节点名,
  originalData: { ... }
}
关系图 节点数据对象（series.data元素）： 
{
  name: 名称, value: 数值(可选),
  originalId: 原始数据ID, originalCategory: 类别(可选),
  originalData: { ... }
}
连线数据对象（series.links元素）： 
{
  source: 源节点索引号, target: 目标节点索引号,
  originalSourceId: 源节点ID, originalSourceName: 源节点名,
  originalTargetId: 目标节点ID, originalTargetName: 目标节点名,
  originalData: { ... }
}
箱形图 箱形： 
{
  name: 名称, value: [ 名称, 最小值, 下四分位值, 中位值, 上四分位值, 最大值 ],
  originalCategory: 类别(可选), originalData: { ... }
}
异常值： 
{
  name: 名称, value: [ 名称, 数值 ],
  originalCategory: 类别(可选), originalData: { ... }
}
词云图 
{
  name: 名称, value: 数值, originalData: { ... }
}
水球图 
{
  name: 名称, value: 数值, originalData: { ... }
}
平行坐标系 
{
  name: 名称, value: [ 数值, ... ],
  originalCategory: 类别(可选), originalData: { ... }
}
主题河流图 
[ 名称, 数值, 类别(可选) ]
象形柱图、进度图 
{
  name: 名称, value: [ 名称, 数值 ],
  originalCategory: 类别(可选), originalData: { ... }
}

图表事件类型

图表类型 支持事件类型
ECharts类图表 click、dblclick、mousedown、mouseup、 mousemove、mouseover、mouseout
基本表格 select、deselect
标签卡 click、dblclick、mousedown、mouseup、 mousemove、mouseover、mouseout
单选/多选下拉框 change

图表事件结构

图表类型 支持事件类型
ECharts类图表 
{
  data: ...,
  sourceChart: 图表对象,
  ...
}
其中data的结构与ECharts图表选项数据结构章节对应图表类型相同， 更多的事件结构信息参考ECharts官网相关文档。
基本表格 
{
  data: { ... },
  columnData: [ ... ],
  sourceChart: 图表对象,
  ...
}
标签卡 
{
  data: { name: ..., value: ... },
  sourceChart: 图表对象,
  ...
}
单选/多选下拉框 
{
  data: { name: ..., value: ... },
  sourceChart: 图表对象,
  ...
}
 
京ICP备18055183号-1
© 2018-2024 datagear.tech 北京溪歌科技有限公司
登录