Every enterprise has its own personalized business needs, so customized charts are often required for data analysis and statistics. This article shows you how to build custom charts for analyzing and visualizing data.

Write the Template

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

Write the Script

Let's walk through the idea first:

1. Get the full detail data of the current record.

2. Find the data you need from the detail data, then convert it into the format required by ECharts. In this example, a pie chart is used, and the data format is [{name: "", value: ""}].

3. Configure the selected chart according to the ECharts official documentation.

Based on these steps, we can organize the logic as follows:

<script>
	let optionsList = {
	'field_y2d4o__c': 'Search Engine',
	'field_9nbU8__c': 'Referral',
	'field_fjX4b__c': 'Video Ad',
	'field_YhPEq__c': 'Personal Resource',
	'field_0B22U__c': 'Business Development Resource'
	};
	export default {
		name: 'uipaasEchartComp',
		props: ['data'],
		data () {
			return {
				dEcharts: null,
				dDetailData: null
			}
		},
		mounted () {
			PAAS.request_cmd_component('base-echarts').then(echarts => { // Import ECharts and initialize it
				this.dEcharts = echarts;
				this.fetchDetailData();
			})
		},
		methods: {
			fetchDetailData () { // Get detail data
				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 () { // Format statistical data
				let seriesData = Object.keys(optionsList).map(item => {
					return {
						value: this.dDetailData[item] || 0,
						name: optionsList[item]
					}
				});
				return seriesData;
			},
			drawRadar () { // Render chart data
				let uipaasChartComp = this.dEcharts.init(document.getElementById('uipaasChartComp'));
				let chartsOptions = {
					title: {
						text: 'Customer Source',
						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 Source',
						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>

Add Styles

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

Complete Code

<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 Ad',
		'field_YhPEq__c': 'Personal Resource',
		'field_0B22U__c': 'Business Development Resource'
	};
	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 () { // Get detail data
				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 () { // Format statistical data
				let seriesData = Object.keys(optionsList).map(item => {
					return {
						value: this.dDetailData[item] || 0,
						name: optionsList[item]
					}
				});
				return seriesData;
			},
			drawRadar () { // Render chart data
				let uipaasChartComp = this.dEcharts.init(document.getElementById('uipaasChartComp'));
				let chartsOptions = {
					title: {
						text: 'Customer Source',
						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 Source',
						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>

Actual Display Effect

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

Develop More Charts

Chart Examples

Choose the chart type you need, and the corresponding sample code will be shown.

1. Copy the option object from the sample code.
2. Replace the mock data in option with your own data.