Used to display the detail page of a chart.

Attributes

Parameter	Description	Type	Optional Values	Default
id	Chart ID (required)	String	—	-
queryChartDataUrl	URL of the synchronous data request API	String	—	-
syncQuery	Whether to request synchronously	Number	—	-
sendQueryDataUrl	Send URL for asynchronous data requests	String	—	-
loadQueryDataUrl	Load URL for asynchronous data requests	String	—	-
handleDataRangeFun	Triggered when the data range changes	Function	—	-
beforeRenderChartFun	Triggered before the chart is rendered	Function	—	-
afterRenderChartFun	Triggered after the chart is rendered	Function	—	-

Simple Usage

The component is obtained through FxUI.component.get('ChartDetail').

Code example:

<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', // synchronous request API
							syncQuery: 1, 
							//sendQueryDataUrl: '',
							//loadQueryDataUrl: '',
							handleDataRangeFun: (data) => {

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

Component Extension

To meet enterprise customization needs, the component provides several extension methods that allow developers to quickly build corresponding functions.

Hooks

handleDataRangeFun

Triggered after the chart data range is modified. It runs after clicking Confirm and before calling the API. You can customize the data range used by the request here.

The hook accepts one parameter:

• data: Object The modified chart data range

After overriding it, make sure to return a data object.

beforeRenderChartFun

Triggered before rendering the chart.

afterRenderChartFun

Triggered after rendering the chart.