代码拉取完成,页面将自动刷新
静态数据示例:
[
{
"axis": "1月",
"bar": 2.6,
"line": 2
},
{
"axis": "2月",
"bar": 5.9,
"line": 2.2
},
{
"axis": "3月",
"bar": 9,
"line": 3.3
}
]
系统设置-数据字典-柱线图属性 添加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