FxChartDetail Component

Displays the detail page of statistical charts.

Attributes

Parameter	Description	Type	Optional Values	Default
id	Chart ID (required)	String	—	-
queryChartDataUrl	Sync data request API URL	String	—	-
syncQuery	Whether to sync request	Number	—	-
sendQueryDataUrl	Async data request send URL	String	—	-
loadQueryDataUrl	Async data request load URL	String	—	-
handleDataRangeFun	Triggered when data range changes	Function	—	-
beforeRenderChartFun	Triggered before chart rendering	Function	—	-
afterRenderChartFun	Triggered after chart rendering	Function	—	-

Basic Usage

The component can be obtained via 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', // Sync 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 requirements, we provide developers with extension methods for rapid feature development.

Hooks

handleDataRangeFun

Triggered after modifying the chart's data range, occurs after confirmation click but before API call. Allows custom modification of the data range for API calls.

The hook accepts one parameter:

• data: Object Modified data range of the chart

After overriding, ensure to return a data object.

beforeRenderChartFun

Triggered before chart rendering.

afterRenderChartFun

Triggered after chart rendering completes.