FxChartDetail组件

用于展示统计图的详情页。

Attributes

参数	说明	类型	可选值	默认值
id	统计图id(必填)	String	—	-
queryChartDataUrl	同步请求数据接口url	String	—	-
syncQuery	是否同步请求	Number	—	-
sendQueryDataUrl	异步请求数据sendurl	String	—	-
loadQueryDataUrl	异步请求数据loadurl	String	—	-
handleDataRangeFun	数据范围改变触发	Function	—	-
beforeRenderChartFun	渲染统计图前触发	Function	—	-
afterRenderChartFun	渲染统计图后触发	Function	—	-

简单使用

组件通过 FxUI.component.get('ChartDetail') 获取。

代码示例：

<template>
  <div class="bi-pwc">
    <div ref="biChartDetail"></div>
  </div>
</template>
<script>

export default {
	name: 'Chart',
	methods: {
		initCharts() {
			FxUI.component.get('ChartDetail')().then(Chart => {
				const that = this;
				if(that.chartInstance) {
					that.chartInstance.$destroy()
				}
				this.instance = new Chart({
					propsData: {
						chartOpts: {
							id: 'BI_631006d0a9e74f0001ff937a',
							queryChartDataUrl: '/FHH/EM1ACUSTOM/External/GetBiStat', // 同步请求接口
							syncQuery: 1, 
							//sendQueryDataUrl: '',
							//loadQueryDataUrl: '',
							handleDataRangeFun: (data) => {

							},
							beforeRenderChartFun: function() {
								
							},
							afterRenderChartFun: function() {
								
							}
						}
					}
				});
				this.$refs.biChartDetail.append(this.instance.$mount().$el);
			})
		}
	}
</script>

组件扩展

为了满足企业定制化的需求，这里我们为开发者提供了一些扩展方式，能够快速开发出相应功能。

钩子

handleDataRangeFun

统计图的数据范围修改后触发，发生在点击确认之后，调用接口之前。这里可以自定义修改调用接口的数据范围。

钩子接受一个参数：

• data: Object 统计图修改后的数据范围

overide完之后，确保 return 一个 data 出来。

beforeRenderChartFun

渲染统计图前触发。

afterRenderChartFun

渲染完统计图后触发。