Custom Chart Components

Background

Every enterprise has unique business requirements that necessitate customized charts for data analysis and statistics.

This guide demonstrates how to develop custom chart components for data visualization.

Template Structure

<template>
  <div class="uipaas-customcomp_echarts">
    <div id='uipaasChartComp' class="uipaas-customcomp_echarts-wrap"></div>
  </div>
</template>

Script Implementation

Implementation approach:

1. Retrieve complete detail data
2. Extract required data and format it according to ECharts specifications (pie chart format: [{name: "", value: ""}])
3. Configure chart options based on ECharts documentation

<script>
  let optionsList = {
    'field_y2d4o__c': 'Search Engine',
    'field_9nbU8__c': 'Referral',
    'field_fjX4b__c': 'Video Ads',
    'field_YhPEq__c': 'Personal Resources',
    'field_0B22U__c': 'Business Resources'
  };
  export default {
    name: 'uipaasEchartComp',
    props: ['data'],
    data () {
      return {
        dEcharts: null,
        dDetailData: null
      }
    },
    mounted () {
      PAAS.request_cmd_component('base-echarts').then(echarts => {
        this.dEcharts = echarts;
        this.fetchDetailData();
      })
    },
    methods: {
      fetchDetailData () {
        FxUI.objectApi.fetch_data(this.data.object_api_name, this.data.object_id).then((data) => {
          this.dDetailData = data;
          this.drawRadar();
        }).catch(err => {
          console.log(err);
        })
      },
      formatData () {
        let seriesData = Object.keys(optionsList).map(item => {
          return {
            value: this.dDetailData[item] || 0,
            name: optionsList[item]
          }
        });
        return seriesData;
      },
      drawRadar () {
        let uipaasChartComp = this.dEcharts.init(document.getElementById('uipaasChartComp'));
        let chartsOptions = {
          title: {
            text: 'Customer Sources',
            left: 'center',
            top: 20,
            textStyle: {
              color: '#ccc'
            }
          },
          legend: {
            orient: 'vertical',
            left: 0,
            data: Object.values(optionsList)
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          visualMap: {
            show: false,
            min: 0,
            max: 0,
            inRange: {
              colorLightness: [0, 1]
            }
          },
          series: [{
            name: 'Traffic Sources',
            type: 'pie',
            radius: '50%',
            center: ['50%', '60%'],
            data: this.formatData(),
            labelLine: {
              smooth: 0.2,
              length: 20,
              length2: 40
            },
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
              return Math.random() * 200;
            }
          }]
        };
        uipaasChartComp.setOption(chartsOptions);
      }
    }
  }
</script>

Styling

<style>
  .uipaas-customcomp_echarts {
    display: flex;
    width: 100%;
    padding:4px;
  }
  .uipaas-customcomp_echarts .uipaas-customcomp_echarts-wrap {
    width: 420px;
    height: 500px;
  }
</style>

Complete Implementation

<template>
  <div class="uipaas-customcomp_echarts">
    <div id='uipaasChartComp' class="uipaas-customcomp_echarts-wrap"></div>
  </div>
</template>
<script>
  let optionsList = {
    'field_y2d4o__c': 'Search Engine',
    'field_9nbU8__c': 'Referral',
    'field_fjX4b__c': 'Video Ads',
    'field_YhPEq__c': 'Personal Resources',
    'field_0B22U__c': 'Business Resources'
  };
  export default {
    name: 'uipaasEchartComp',
    props: ['data'],
    data () {
      return {
        dEcharts: null,
        dDetailData: null
      }
    },
    mounted () {
      PAAS.request_cmd_component('base-echarts').then(echarts => {
        this.dEcharts = echarts;
        this.fetchDetailData();
      })
    },
    methods: {
      fetchDetailData () {
        FxUI.objectApi.fetch_data(this.data.object_api_name, this.data.object_id).then((data) => {
          this.dDetailData = data;
          this.drawRadar();
        }).catch(err => {
          console.log(err);
        })
      },
      formatData () {
        let seriesData = Object.keys(optionsList).map(item => {
          return {
            value: this.dDetailData[item] || 0,
            name: optionsList[item]
          }
        });
        return seriesData;
      },
      drawRadar () {
        let uipaasChartComp = this.dEcharts.init(document.getElementById('uipaasChartComp'));
        let chartsOptions = {
          title: {
            text: 'Customer Sources',
            left: 'center',
            top: 20,
            textStyle: {
              color: '#ccc'
            }
          },
          legend: {
            orient: 'vertical',
            left: 0,
            data: Object.values(optionsList)
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          visualMap: {
            show: false,
            min: 0,
            max: 0,
            inRange: {
              colorLightness: [0, 1]
            }
          },
          series: [{
            name: 'Traffic Sources',
            type: 'pie',
            radius: '50%',
            center: ['50%', '60%'],
            data: this.formatData(),
            labelLine: {
              smooth: 0.2,
              length: 20,
              length2: 40
            },
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
              return Math.random() * 200;
            }
          }]
        };
        uipaasChartComp.setOption(chartsOptions);
      }
    }
  }
</script>
<style>
  .uipaas-customcomp_echarts {
    display: flex;
    width: 100%;
    padding:4px;
  }
  .uipaas-customcomp_echarts .uipaas-customcomp_echarts-wrap {
    width: 420px;
    height: 500px;
  }
</style>

Demo

<video src="https://a9.fspage.com/FSR/uipaas/demo-echarts.mov" style="width: 100%;" controls></video>

Expand Copy Copy

Developing More Charts

Chart Examples

To implement additional chart types:

1. Copy the option object from the example code
2. Replace the sample data with your actual data