自定义图表

背景介绍

每个企业都有自己个性化的业务需求，所以就需要使用定制化图表来分析或统计一些数据。

这篇文章便教你如何开发自定义图表来分析和统计数据。

书写template

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

书写script

我们先来理一下思路：

1. 获取当前详情的完整数据。

2. 在详情数据中找出你所需要使用的数据，然后将数据格式整理为echarts图表所要求的的格式（该示例中使用的是饼状图，数据格式为[{name: "", value: ""}]）。

3. 然后按照echarts官网中你选择的图表进行配置。

根据上述的步骤，我们组织逻辑如下：

<script>
	let optionsList = {
	'field_y2d4o__c': '搜索引擎',
	'field_9nbU8__c': '转介绍',
	'field_fjX4b__c': '视频广告',
	'field_YhPEq__c': '个人资源',
	'field_0B22U__c': '招商资源'
	};
	export default {
		name: 'uipaasEchartComp',
		props: ['data'],
		data () {
			return {
				dEcharts: null,
				dDetailData: null
			}
		},
		mounted () {
			PAAS.request_cmd_component('base-echarts').then(echarts => { //引入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: '客户来源',
						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: '访问来源',
						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>

最终全部代码如下

<template>
	<div class="uipaas-customcomp_echarts">
		<div id='uipaasChartComp' class="uipaas-customcomp_echarts-wrap"></div>
	</div>
</template>
<script>
	let optionsList = {
		'field_y2d4o__c': '搜索引擎',
		'field_9nbU8__c': '转介绍',
		'field_fjX4b__c': '视频广告',
		'field_YhPEq__c': '个人资源',
		'field_0B22U__c': '招商资源'
	};
	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: '客户来源',
						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: '访问来源',
						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>

实际的展示效果

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

显示代码 复制代码 复制代码

开发更多图表

图表示例

选择对应的图表，会出现对应的示例代码。 1、复制示例代码中的option对象 2、将option的模拟数据改成自己的数据