1.1K Star 10.8K Fork 4.4K

GVPanji-plus / AJ-Report

 / 详情

柱线图支持堆叠bar或line

已完成
创建于  
2021-11-29 15:19

默认柱线图仅支持单个bar和单个line

静态数据示例:

[
  {
    "axis": "1月",
    "bar": 2.6,
    "line": 2
  },
  {
    "axis": "2月",
    "bar": 5.9,
    "line": 2.2
  },
  {
    "axis": "3月",
    "bar": 9,
    "line": 3.3
  }
]

柱线图新增支持堆叠bar/line方案

配置项

系统设置-数据字典-柱线图属性 添加y轴字段
输入图片说明

默认模式(非堆叠)不设置"y轴字段", 堆叠模式设置“y轴字段”,如下图:
输入图片说明

堆叠模式数据示例:

[
  {
    "data": 8,
    "name": "柱1",
    "time": "1月",
    "collect": null
  },
  {
    "data": 13,
    "name": "柱2",
    "time": "1月",
    "collect": null
  },
  {
    "data": null,
    "name": "线1",
    "time": "1月",
    "collect": 100
  },
  {
    "data": null,
    "name": "线2",
    "time": "1月",
    "collect": 150
  },
  {
    "data": 12,
    "name": "柱1",
    "time": "2月",
    "collect": null
  },
  {
    "data": 17,
    "name": "柱2",
    "time": "2月",
    "collect": null
  },
  {
    "data": null,
    "name": "线1",
    "time": "2月",
    "collect": 150
  },
  {
    "data": null,
    "name": "线2",
    "time": "2月",
    "collect": 200
  },
  {
    "data": 22,
    "name": "柱1",
    "time": "3月",
    "collect": null
  },
  {
    "data": 27,
    "name": "柱2",
    "time": "3月",
    "collect": null
  },
  {
    "data": null,
    "name": "线1",
    "time": "3月",
    "collect": 200
  },
  {
    "data": null,
    "name": "线2",
    "time": "3月",
    "collect": 250
  }
]

文件变更

  • report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarlinechart.vue
    输入图片说明
  • report-ui/src/mixins/queryform.js
// ...
if (
    chartType == "widget-barchart" ||
    chartType == "widget-linechart" ||
    chartType == "widget-barlinechart" && !Object.values(params.chartProperties).includes('yAxis')
) {
    return this.barOrLineChartFn(params.chartProperties, data);
}
// ...
} else if (
    chartType == "widget-stackchart" ||
    chartType == "widget-barlinechart") {
    return this.stackChartFn(params.chartProperties, data)
}
// ...
//堆叠图、柱线图
stackChartFn(chartProperties, data) {
    // ...
    if (chartProperties[key] && chartProperties[key] !== 'yAxis' && !chartProperties[key].startsWith('xAxis')) {
        //...
        if(!data.every(el=>el==null))
        series.push({
          name: yAxisList[item],
          type: chartProperties[key],
          data: data,
        })
    }
  • report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-barlinechart.js
    复制widget-bar-stack.js中的图例操作字段即可
    输入图片说明

效果如下

输入图片说明

评论 (1)

shanquan 创建了任务
Foming 负责人设置为Foming
Foming 关联分支设置为dev
shanquan 修改了描述
shanquan 修改了描述
shanquan 修改了描述
展开全部操作日志

描述的很清楚,已经按描述实现了

Foming 里程碑设置为0.9.6
Foming 里程碑0.9.6 修改为未设置
Foming 任务状态待办的 修改为已完成

登录 后才可以发表评论

状态
负责人
里程碑
Pull Requests
关联的 Pull Requests 被合并后可能会关闭此 issue
分支
开始日期   -   截止日期
-
置顶选项
优先级
参与者(2)
Java
1
https://gitee.com/anji-plus/report.git
git@gitee.com:anji-plus/report.git
anji-plus
report
AJ-Report

搜索帮助