提交 0fee066c 编写于 作者: WodahsOrez's avatar WodahsOrez

lxm--图表无数据时显示暂无数据

上级 7a8cf873
...@@ -3,7 +3,8 @@ ...@@ -3,7 +3,8 @@
<#if ctrl.render??><#t> <#if ctrl.render??><#t>
${ctrl.render.code} ${ctrl.render.code}
<#else><#t> <#else><#t>
<div class="app-charts" :id="chartId" style="<#if ctrl.getWidth() gt 0>width: ${ctrl.getWidth()};</#if>height: <#if ctrl.getHeight() gt 0>${ctrl.getHeight()}px<#else>100%</#if>;padding: 6px 0;"></div> <div v-if="isNoData" class="chart-no-data"><i class="el-icon-data-analysis"></i>暂无数据</div>
<div v-else class="app-charts" :id="chartId" style="<#if ctrl.getWidth() gt 0>width: ${ctrl.getWidth()};</#if>height: <#if ctrl.getHeight() gt 0>${ctrl.getHeight()}px<#else>100%</#if>;padding: 6px 0;"></div>
</#if> </#if>
</div> </div>
</template> </template>
...@@ -105,6 +106,15 @@ import { ChartDataSetField,ChartLineSeries,ChartFunnelSeries,ChartPieSeries,Char ...@@ -105,6 +106,15 @@ import { ChartDataSetField,ChartLineSeries,ChartFunnelSeries,ChartPieSeries,Char
</#if> </#if>
} }
/**
* 是否无数据
*
* @public
* @type {boolean}
* @memberof ${srfclassname('${ctrl.name}')}Base
*/
public isNoData: boolean = false;
/** /**
* 图表div绑定的id * 图表div绑定的id
* *
...@@ -389,8 +399,10 @@ import { ChartDataSetField,ChartLineSeries,ChartFunnelSeries,ChartPieSeries,Char ...@@ -389,8 +399,10 @@ import { ChartDataSetField,ChartLineSeries,ChartFunnelSeries,ChartPieSeries,Char
*/ */
public async transformToBasicChartSetData(data:any,callback:Function){ public async transformToBasicChartSetData(data:any,callback:Function){
if(!data || !Array.isArray(data) || data.length === 0){ if(!data || !Array.isArray(data) || data.length === 0){
this.isNoData = true;
return; return;
} }
this.isNoData = false;
//获取代码表值 //获取代码表值
let allCodeList:any = await this.getChartAllCodeList(); let allCodeList:any = await this.getChartAllCodeList();
if(Object.values(this.seriesModel).length > 0){ if(Object.values(this.seriesModel).length > 0){
......
...@@ -4,4 +4,14 @@ ...@@ -4,4 +4,14 @@
.app-data-chart { .app-data-chart {
width: 100%; width: 100%;
height: 100%; height: 100%;
.chart-no-data{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
i{
margin-right: 5px;
}
}
} }
\ No newline at end of file
...@@ -3,7 +3,8 @@ ...@@ -3,7 +3,8 @@
<#if ctrl.render??><#t> <#if ctrl.render??><#t>
${ctrl.render.code} ${ctrl.render.code}
<#else><#t> <#else><#t>
<div class="app-charts" :id="chartId" style="<#if ctrl.getWidth() gt 0>width: ${ctrl.getWidth()};</#if>height: <#if ctrl.getHeight() gt 0>${ctrl.getHeight()}px<#else>100%</#if>;padding: 6px 0;"></div> <div v-if="isNoData" class="chart-no-data"><i class="el-icon-data-analysis"></i>暂无数据</div>
<div v-else class="app-charts" :id="chartId" style="<#if ctrl.getWidth() gt 0>width: ${ctrl.getWidth()};</#if>height: <#if ctrl.getHeight() gt 0>${ctrl.getHeight()}px<#else>100%</#if>;padding: 6px 0;"></div>
</#if> </#if>
</div> </div>
</template> </template>
...@@ -105,6 +106,15 @@ import { ChartDataSetField,ChartLineSeries,ChartFunnelSeries,ChartPieSeries,Char ...@@ -105,6 +106,15 @@ import { ChartDataSetField,ChartLineSeries,ChartFunnelSeries,ChartPieSeries,Char
</#if> </#if>
} }
/**
* 是否无数据
*
* @public
* @type {boolean}
* @memberof ${srfclassname('${ctrl.name}')}Base
*/
public isNoData: boolean = false;
/** /**
* 图表div绑定的id * 图表div绑定的id
* *
...@@ -389,8 +399,10 @@ import { ChartDataSetField,ChartLineSeries,ChartFunnelSeries,ChartPieSeries,Char ...@@ -389,8 +399,10 @@ import { ChartDataSetField,ChartLineSeries,ChartFunnelSeries,ChartPieSeries,Char
*/ */
public async transformToBasicChartSetData(data:any,callback:Function){ public async transformToBasicChartSetData(data:any,callback:Function){
if(!data || !Array.isArray(data) || data.length === 0){ if(!data || !Array.isArray(data) || data.length === 0){
this.isNoData = true;
return; return;
} }
this.isNoData = false;
//获取代码表值 //获取代码表值
let allCodeList:any = await this.getChartAllCodeList(); let allCodeList:any = await this.getChartAllCodeList();
if(Object.values(this.seriesModel).length > 0){ if(Object.values(this.seriesModel).length > 0){
......
...@@ -4,4 +4,14 @@ ...@@ -4,4 +4,14 @@
.app-data-chart { .app-data-chart {
width: 100%; width: 100%;
height: 100%; height: 100%;
.chart-no-data{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
i{
margin-right: 5px;
}
}
} }
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册