HOS门户引擎

# 图表公共配置

可视化图表，帮助用户快速分析数据并洞察业务趋势，通过不同类型的图表对表数据进行统计汇总和分析，帮助您进行工作总结和规划，从而实现业务的改进与优化。

# 标题设置

标题设置用于设置图表的显示标题，可配置是否显示、标题文本、文字颜色、大小、颜色、边距 标题设置

  • 是否启用
  • 标题文本
  • 文字大小
  • 文字粗细
  • 文字颜色
  • 边距：支持顶边距和左边距
    • 绝对值
    • 百分比

# 副标题设置

副标题设置用于设置图表的副标题，可配置副标题文本、文字颜色、大小、颜色 副标题设置

  • 标题文本
  • 文字大小
  • 文字粗细
  • 文字颜色

# 图例设置

图例属性用于设置图表中图例显示的信息，可设置是否显示、文字信息、排序方式、边距信息等 图例设置

  • 是否启用

  • 排列方式：支持横排、竖排

  • 文字大小

  • 文字粗细

  • 文字颜色

  • 边距：支持顶边距、底边距和左边距

    • 绝对值
    • 百分比
    • 同时设置顶边距和底边距，底边距是无法生效的，顶边距优先级最高，所以设置底边距，需要把顶边距设置为 null，在自定义设置中添加如下配置：
    function(options, resp){
  if(options.legend.top == 0 || options.legned.top == '0%'){
      options.legend.top = null
  }
  return options
}

# x 轴设置

echarts 官网 x 轴设置详情 (opens new window) X 轴设置用于设置图表的 X 轴上的信息，如名称、文字大小、颜色、轴线颜色等

X 轴设置

  • 是否启用
  • 轴名称
  • 轴名称显示位置：开始、中间、结束位置
  • 轴名称文字大小
  • 轴名称文字颜色
  • 标签文字大小
  • 标签文字颜色
  • 标签文字角度（标签角度可以设置为-45° 到 45° 之间） X 轴设置
  • 是否显示坐标轴轴线 X 轴设置
  • 是否显示坐标轴刻度
  • 坐标轴轴线颜色
  • 是否显示分割线

# y 轴设置

echarts 官网 y 轴设置详情 (opens new window) Y 轴设置用于设置图表的 X 轴上的信息，如名称、文字大小、颜色、轴线颜色等

Y 轴设置

  • 是否启用
  • 轴名称
  • 轴名称显示位置：开始、中间、结束位置
  • 轴名称文字大小
  • 轴名称文字颜色
  • 标签文字大小
  • 标签文字颜色
  • 标签文字角度（标签角度可以设置为-45° 到 45° 之间）
  • 是否显示坐标轴轴线
  • 是否显示分割线 Y 轴设置
  • 分割线颜色
  • 最大值
  • 最小值

# 坐标轴边距设置 (opens new window)

  • 是否包含刻度标签
  • 边距：支持顶边距、左边距、底边距、右边距
    • 绝对值
    • 百分比

# 提示设置

用于显示鼠标悬停或点击图表元素时的相关信息 Y 轴设置

  • 是否显示
  • 文字大小
  • 文字粗细
  • 文字颜色

# 链接跳转设置

用于配置图表组件跳转时的打开方式、窗口大小、链接地址、跳转参数等内容。

  • 是否开启：开启后方可使用该功能

  • 跳转方式：打开应用的不同方式，有内部窗口、新页签、新窗口、浏览器等。

  • 窗口宽高：打开应用的窗口尺寸。

  • 链接地址：打开窗口的地址配置。

  • 默认参数：是否开启，如开启后则自动拼接默认参数组。

    • userCode 登录账号
    • postCode 岗位编码
    • buCode 业务单元编码（对应 his 科室）
    • orgCode 机构编码
    • postDictCode 岗位字典编码 （对应 his 安全组）
    • language 语言（当前的语言环境）

  • 参数值编码：是否开启，支持以下编码，编码语法参数参考 MDN 文档。

    注意：只对参数配置的值做了处理（包括默认参数组）

  • 参数配置：拼接在地址后面的参数，有三种类型，分别是固定值，动态值和图表值。

    指导视频地址：http://114.242.246.250:8031/videos/9fe141e6eda7372bf4f2cf95adb2dd23

链接配置

# 图表值参数配置

  • 参数值：

    • 系列名称 seriesName
    • 名称 name
    • 值 value
    • 数据系列索引（2.5.1 新增）

  • 鼠标事件包含的参数 EventParams (opens new window), 如下格式：

    type EventParams = {
  // 系列名称（对柱状图和折线图有意义）
  seriesName: string;
  // 名称，类目名（大部分场景以该字段取对应图表的类目）
  name: string;
  // 数据值（使用场景较少）
  value: number | Array;
};

  • 数据系列索引详解：

    用来标识鼠标事件 target 类目的索引(参数配置-参数编码值支持自定义设置)，适用于柱状图和折线图使用。 该值由 EventParams 中的dataIndex和seriesIndex 共同拼接组成的 String，dataIndex 表示数据在传入的 data 数组中的 index，seriesIndex 表示系列在传入的 option.series 中的 index。

    • 示例：

      图表值参数配置

      图表值参数配置

      EventParams 如下：

      图表值参数配置

      // 参数配置的对象
[
    {
        "code": "defaultIndex",
        "paramType": "chart",
        "value": "5,1"
    },
    {
        "paramType": "chart",
        "value": "200",
        "code": "defaultName"
    },
    {
        "paramType": "chart",
        "value": 80,
        "code": "defaultValue"
    },
    {
        "paramType": "chart",
        "value": "营养",
        "code": "defaultSN"
    }
]

# 自定义属性设置

如存在文档中未提到的其他配置项，可通过自定义属性，编写代码，对图表进行设置，且该项优先级为最高。

  • 是否显示

  • 自定义脚本编写

    • 入参
      • option: 当前的 option 配置
      • resp: 数据接口的返回值
      • size: 提供容器的宽高
    • 返回值：返回最终的 option 配置
<!-- 示例 -->
function(option, resp, size = {width: 0, height: 0}) {
  option.height = '68%'
  option.legend.left = 'center'
  option.legend.top = 'auto'
  option.legend.bottom = 0
  option.grid.left = 'center'
  option.grid.top = 'middle'

  return option
}
  • 环形图中心文字默认值设置：
<!-- 示例 -->
function(option, resp) {
  option.series[0].label.formatter = ['{prefix|前缀文本}', '{value|显示值}', '{suffix|后缀文本}'].join('\n')
  return option
}

# 图表组件

# 柱状图

  • 示例

柱形示例

  • 基础设置

柱形基础设置示例

  • 接口配置的数据格式：【系统管理】-【接口管理】-【接口配置】菜单编辑

柱形接口配置

// key 对应【编辑接口】中的【参数字段】
{
  "salesNum_2022": [112, 224, 230, 140],
  "salesNum_2023": [230, 350, 330, 260],
  "province": ["山东省", "河南省", "河北省", "安徽省"]
}

# 折线图

  • 示例

柱形示例

  • 基础设置

柱形基础设置示例

  • 接口配置的数据格式：【系统管理】-【接口管理】-【接口配置】菜单编辑

柱形接口配置

// key 对应【编辑接口】中的【参数字段】
{
  "water": [112, 224, 230, 140, 106, 119, 209],
  "power": [230, 350, 330, 260, 210, 198, 189],
  "gas": [202, 250, 310, 220, 198, 298, 223],
  "date": ["1", "5", "10", "15", "20", "25", "30"]
}

# 基础仪表盘

  • 示例

基础仪表盘示例

  • 基础设置

基础设置示例

  • 仪表盘设置

仪表盘设置示例

  • 接口配置的数据格式：【系统管理】-【接口管理】-【接口配置】菜单编辑

柱形接口配置

[
  {
    value: 50,
    name: '今日工单总数'
  }
]

# 多标题仪表盘

  • 示例

柱形示例

  • 注意事项
  • 多标题仪表盘（gauge）中，刻度线默认是平均分布的，即根据设置的最小值和最大值自动计算刻度线的位置和数量
  • 每段轴线如需自定义颜色需要在【自定义属性设置】中编写对应的逻辑
  • 基础设置

基础设置示例

  • 仪表盘设置

仪表盘设置示例

  • 自定义属性设置
// option 是默认配置和内容配置的合集，resp 是数据接口返回
function (option, resp) {
  option.series[0].axisLine = {
    show: false,
    lineStyle: {
      // 设置每段轴线的颜色
      color: [
        [0.5, '#39C2FF'],
        [0.7586, '#FFAC65'],
        [0.8012, '#2CEBC9'],
        [1, 'rgba(207, 212, 219, 0.2)']
      ]
    }
  }
  option.series[0].detail = {
    width: '',
    height: 14,
    fontSize: 12,
    color: '#fff',
    borderRadius: 3,
    formatter: '{value}(%)'
  }

  // 设置每个详情的背景色
  option.series[0].data[0].detail.backgroundColor = '#39C2FF'
  option.series[0].data[1].detail.backgroundColor = '#FFAC65'
  option.series[0].data[2].detail.backgroundColor = '#2CEBC9'

  return option
}
  • 接口配置的数据格式：【系统管理】-【接口管理】-【接口配置】菜单编辑

接口配置

[
  {
    value: '50.18',
    name: '入院评估率'
  },
  {
    value: '75.86',
    name: '出院评估率'
  },
  {
    value: '80.12',
    name: '中高危预防率'
  }
]

← 内容配置-装饰 →