断环图(不依赖RichUI)

2021-08-07 by uino 0 资源工厂

断环图(不依赖RichUI)

示例demo为商汤-断环图

window.UserConfig = {
	name: '商汤-断环图', // 图表的唯一标识,根据上传同名覆盖同名图表组件
	type: 'chart', // 告知产品方zip类型
	version: '1.0.1', // 迭代版本号
	target: '断环图-饼图', // 当前图表开发者的图表命名
	group: '环饼图', // 属于的图表分组
	theme: '密斯', // 主题 太空旅客,重返地球,密斯
	author: '唐安', // 作者
    uuid: '004010300000003',
    folder: '商汤-断环图',
	update(old) {
		/*
		if (!old) { old = {}; }
		const obj = JSON.parse(JSON.stringify(old));
		let { version, config } = obj; // 这里的config相当于上一版图表的this.config.config
		const updateList = new Map([
			// [
			// 	'1.0.1', (config) => {
			// 		delete config.max;
			// 		config.configItems.max = 520;
			// 		return config;
			// 	}
			// ]
		]);
		// 版本升级函数
		function versionUP() {
			const nextCode = String(version.replaceAll('.', '') * 1 + 1).split('').join('.');
			const run = updateList.get(nextCode);
			if (typeof (run) === 'function') {
				try {
					config = run(config);
					version = nextCode;
					versionUP();
				} catch (err) {
					console.error('升级出错了\n', err);
				}
			}
		}
		versionUP();
		return {
			version,
			config
		};
		*/
	},
	// Vue 实例
	view: {
		template: `
			<div class="th-proximaChartSeniorPie">
				<!-- 中间部分 -->
				<div class="th-contentBox">
					<!-- 图例 -->
					<div class="th-chartBox">
						<div ref="proximaSeniorPie" class="chartbox" :style="{ height:height }"></div>
						<div></div>
					</div>
				</div>
			</div>
		`,
		props: ['config'], // 可通过该config获取用户配置内容的值
		data() {
			return {
				// -----------------------------------------------------------------------------------------------------
				// 以下是可配数据 整合option用的,会和默认配置的option合并;组成项目需要的风格
				configItems: {
					// 实施配置
					height: this.config.config.height, // 设置图表高度
					title: this.config.config.title || '图表标题', // 默认图表标题,取值在默认静态数据data中读取
					isLegend: this.config.config.isLegend, // 是否显示图例 true显示 false 不显示
					serialization: this.config.config.serialization, // 数据是否排序
					xOption: this.config.config.xOption || {}, // 配置选项,优先级最高

					// configData里配置
					colorArr: this.config.config.configData.colorArr || ['#8080FF', '#FF8000', '#00FF00', '#0080FF', '#FF80FF', '#FF8080'], // 颜色配置
					legendSelectMode: this.config.config.configData.legendSelectMode !== false, // 控制是否可以通过点击图例改变系列的显示状态
					legendUnit: this.config.config.configData.legendUnit || '', // 图例单位
					animation: this.config.config.configData.animation !== false, // 是否开启动画
					center: this.config.config.configData.center || ['50%', '50%'], // 饼图圆心
					radius: this.config.config.configData.radius || ['40%', '60%'], // 环图半径
					silent: this.config.config.configData.silent !== false, // 是否启用鼠标响应
					selectedMode: this.config.config.configData.selectedMode || '', // 扇区选中模式 single/multiple;注:silent:true时有效,如果不想让他点,设置未空("")
					hoverAnimation: this.config.config.configData.hoverAnimation !== false, // 是否开启hover在扇区上的放大动画效果 放大偏移距离设置hoverOffset;注:silent:true时有效
					hoverOffset: this.config.config.configData.hoverOffset || 5, // 高亮扇区的偏移距离;注:silent:true时有效
					legendHoverLink: this.config.config.configData.legendHoverLink !== false, // 是否启用图例 hover 时的联动高亮
					isCountChart: !(this.config.config.configData.isCountChart === false || this.config.config.configData.isCountChart === undefined), // 数量占比环图
					placeHolderUnit: this.config.config.configData.placeHolderUnit || 20, // 间隙值;注:isCountChart:true生效
					roseType: this.config.config.configData.roseType || '', // 南丁格尔玫瑰图 radius:半径图  area:面积图 , 为空字符串标识不展示为玫瑰图
					showLabel: this.config.config.configData.showLabel !== false, // 显示item说明label
					labelPosition: this.config.config.configData.labelPosition || 'outside', // outside/inner.inside/center
					alignTo: this.config.config.configData.alignTo || 'none', // 'none'(默认值):长度为固定值 'labelLine' 末端对齐 'edge' 文字对齐
					margin: this.config.config.configData.margin || 0, // 当position: 'outer' 且 alignTo: 'edge' 时有效,设置label左右的margin值
					distanceToLabelLine: this.config.config.configData.distanceToLabelLine || 5, // 文字与 label line 之间的距离
					avoidLabelOverlap: this.config.config.configData.avoidLabelOverlap !== false, // 是否启用防止标签重叠策略,默认开启
					showLabelLine: this.config.config.configData.showLabelLine !== false, // 是否显示视觉引导线
					smooth: !(this.config.config.configData.smooth === false || this.config.config.configData.smooth === undefined), // 是否平滑视觉引导线 默认不平滑 或取值0-1之间
					length: this.config.config.configData.length || 10, // 视觉引导线第一段的长度
					length2: this.config.config.configData.length2 || 10, // 视觉引导线第二段的长度
					bleedMargin: this.config.config.configData.bleedMargin || 0, // 当position: 'outer'且alignTo:'edge/none'时有效,作用:超过出血线的文字将被裁剪为 '...'; 默认0超出部分...
					borderWidth: this.config.config.configData.borderWidth || 0, // border厚度
					clockwise: !(this.config.config.configData.clockwise == false || this.config.config.configData.clockwise === undefined), // 顺时针排布true,反之false 默认false
					reverse: !(this.config.config.configData.reverse === false || this.config.config.configData.reverse === undefined), // 数据倒序,在占比时使用
				},
				data: this.config.config.data, // 默认展示数据 注意它的取值是this.config.config.data.data
				interfaceAddr: this.config.config.dataApi, // 接口地址
				interfaceKey: this.config.config.dataIdentification, // 接口对应值
				params: this.config.config.dataParam, // 接口参数
				updateFrequency: this.config.config.dataInterval, // 刷新时间值
				temp: null, // 用来区分接口数据的改变,判断是否刷新图表

				// ----------------------------------------------------------------------------------------------
				panelName: 'th-proxima-chart-senior-shpie',
				cssText: `
					.th-proximaChartSeniorPie .chartbox{
						min-height: 180px;
					}
				`,
				// ----------------------------------------------------------------------------------------------
				// 自定义主题或样式
				option: {
					// 自定义
					series: [{
						label: {
							formatter: '{b|{b}}\n{c|{c}}',
							rich: {
								b: {
									color: '#fff',
									lineHeight: 22,
								},
								c: {
									fontSize: this.config.config.configData.labelDataFontSize || '20', // label数值的字体大小
								}
							}
						}
					}],
					graphic: {
						elements: [
							{
								type: 'group',
								bounding: 'raw',
								left: 'center',
								top: 'middle',
								z: 100,
								children: [
									{
										type: 'text',
										left: 'center',
										top: this.config.config.configData.centerDataTop || -20,
										z: 100,
										style: {
											fill: '#fff',
											text: this.config.config.data.reduce((total, cur) => total + Number(cur.value).toFixed(2), 0),
											font: this.config.config.configData.centerDataFont || '28px Microsoft YaHei',
										}
									},
									{
										type: 'text',
										left: 'center',
										top: 10,
										z: 100,
										style: {
											fill: '#fff',
											text: this.config.config.configData.centerText || '配套总数',
											font: this.config.config.configData.centerTextFont || '14px Microsoft YaHei',
										}
									},
									{
										type: 'circle',
										left: 'center',
										top: 'middle',
										silent: false,
										style: {
											fill: 'transparent',
											stroke: 'rgba(255,255,255,' + (this.config.config.configData.showCircle === true ? 0.3 : 0) + ')',
											lineWidth: 1,
										},
										shape: {
											r: this.config.config.configData.circleOne || 56
										}
									},
									{
										type: 'circle',
										left: 'center',
										top: 'middle',
										silent: false,
										style: {
											fill: 'transparent',
											stroke: 'rgba(255,255,255,' + (this.config.config.configData.showCircle === true ? 0.3 : 0) + ')',
											lineWidth: 1,
										},
										shape: {
											r: this.config.config.configData.circleTwo || 78
										}
									},
								]
							},
						],
					},
					// 以下是星云主题 默认样式

				},

			};
		},
		mounted() {
			this.createStyle(this.cssText);
			this.drawChart();
		},
		methods: {
			// 产品端在vue初始化完成时会调用initMounted方法进行接口相关操作
			initMounted() {
				if (this.interfaceAddr) {
					window.Subscribe.subscribe(this.interfaceAddr, this.updateFrequency, this.getData, this.params, this.interfaceKey);
				}
			},
			// 处理接口结果集
			getData(res) {
				/*
				data 数据模拟 解析过程 需告知接口方如下数据格式;可查看配置:展示数据格式
				{
					code: 200,
					data: [{
						value: 335,
						name: '直达',
					}, {
						value: 1548,
						name: '搜索引擎',
					}, {
						value: 635,
						name: '京东',
					}],
					status: 'success'
				}
				*/
				if (this.temp == null || JSON.stringify(this.temp) != JSON.stringify(res)) {
					// 初始赋值和数据对比不同时需要更新数据
					this.temp = res;
					this.data = res;
					// console.log('图表 - 图表数据已更新');
				} else if (JSON.stringify(this.temp) == JSON.stringify(res)) {
					// 数据没有变化 前端图表不更新
				}
			},
			createStyle(cssText) {
				if (!cssText) {
					return;
				}
				const id = document.getElementById(this.panelName);
				if (id) {
					return;
				}
				const style = document.createElement('style');
				style.setAttribute('id', this.panelName);
				try {
					style.appendChild(document.createTextNode(cssText));
				} catch (e) {
					// IE下
					style.styleSheet.cssText = cssText;
				}
				document.head.appendChild(style);
			},
			// 包装数据
			getDataProcess() {
				const data = [];
				let tData = [];
				const placeHolderStyle = {
					normal: {
						label: {
							show: false,
						},
						labelLine: {
							show: false,
						},
						color: 'rgba(0, 0, 0, 0)',
						borderColor: 'rgba(0, 0, 0, 0)',
						borderWidth: 0,
					},
				};
				// 转换数据格式
				if (this.data[0] instanceof Array) {
					// 这里注意:数据赋值时选择深拷贝,因浅拷贝操作的数据可能会形成双向绑定导致程序进入无限循环
					// eslint-disable-next-line no-undef
					tData = _.defaultsDeep(tData, this.data);
					if (this.configItems.serialization) {
						// 序列化
						for (let i = 0; i < this.data.length; i += 1) {
							tData[i] = tData[i].sort((a, b) => b.value - a.value);
						}
					}

					// 多series[i]系列列表处理
					tData.forEach((ele) => {
						let totalValue = 0;
						const tmp = [];
						ele.forEach((el) => { totalValue += el.value; });
						ele.forEach((el, index) => {
							const item = {
								value: el.value,
								name: el.name,
								itemStyle: {
									normal: {
										borderWidth: this.configItems.borderWidth,
										borderColor: this.configItems.colorArr[index] || 'rgba(0,0,0,0.3)',
									},
								},
							};
							if (this.configItems.isCountChart) {
								tmp.push(item, {
									value: totalValue / this.configItems.placeHolderUnit,
									name: '',
									itemStyle: placeHolderStyle,
								});
							} else {
								tmp.push(item);
							}
						});
						data.push(tmp);
					});
					// 是否需要数据倒序输出 配合数据显示圆角的
					// if (this.configItems.reverse){
					// 	data = data.map(op => op.reverse());
					// }
				} else {
					// 这里注意:数据赋值时选择深拷贝,因浅拷贝操作的数据可能会形成双向绑定导致程序进入无限循环
					// eslint-disable-next-line no-undef
					tData = _.defaultsDeep(tData, this.data);
					if (this.configItems.serialization) {
						// 序列化
						tData = tData.sort((a, b) => b.value - a.value);
					}

					// 单series处理
					let totalValue = 0;
					tData.forEach((ele) => { totalValue += ele.value; });

					tData.forEach((ele, index) => {
						const item = {
							value: ele.value,
							name: ele.name,
							itemStyle: {
								normal: {
									borderWidth: this.configItems.borderWidth,
									borderColor: this.configItems.colorArr[index] || 'rgba(0,0,0,0.3)',
									barBorderRadius: this.configItems.borderWidth,
								},
							},
						};
						if (this.configItems.isCountChart) {
							data.push(item, {
								value: totalValue / this.configItems.placeHolderUnit,
								name: '',
								itemStyle: placeHolderStyle,
							});
						} else {
							data.push(item);
						}
					});
				}
				return data;
			},
			// 包装series,参数值从this.configItems获取
			getCurSeries(data) {
				const series = [];
				series.push({
					type: 'pie', // pie 饼状图
					radius: this.configItems.radius, // 饼图的半径
					center: this.configItems.center, // 饼图的中心(圆心)坐标 数组的第一项是横坐标,第二项是纵坐标
					selectedMode: this.configItems.selectedMode, // 表示是否支持多个选中 single/multiple
					silent: !this.configItems.silent, // 鼠标响应
					hoverAnimation: this.configItems.hoverAnimation, // 是否开启hover在扇区上的放大动画效果 放大偏移距离设置hoverOffset,注:silent:false时有效
					hoverOffset: this.configItems.hoverOffset, // 高亮扇区的偏移距离
					legendHoverLink: this.configItems.legendHoverLink, // 是否启用图例 hover 时的联动高亮
					avoidLabelOverlap: this.configItems.avoidLabelOverlap, // 是否启用防止标签重叠策略,默认开启
					clockwise: this.configItems.clockwise, // 顺时针排布true,反之false
					stillShowZeroSum: true, // 是否在数据和为0的时候不显示扇区
					animation: this.configItems.animation, // 是否开启动画
					label: {
						show: this.configItems.showLabel, // 是否显示每一项的label内容
						position: this.configItems.labelPosition, // label显示位置 position: 'outside'扇区外侧 'inner/inside'扇区内部 'center'中心位置
						// formatter: '{b}\n {c}', // {a}:系列名;{b}:数据名;{c}:数据值;{d}:百分比;
						alignTo: this.configItems.alignTo, // 'none'(默认值):长度为固定值 'labelLine' 末端对齐 'edge' 文字对齐
						margin: this.configItems.margin, // 当position: 'outer' 且 alignTo: 'edge' 时有效
						bleedMargin: this.configItems.bleedMargin, // 当position: 'outer'且alignTo:'edge/none'时有效,作用:超过出血线的文字将被裁剪为 '...'; 默认0超出部分...
						distanceToLabelLine: this.configItems.distanceToLabelLine, // 视觉引导线文字与 label line 之间的距离
					},
					labelLine: {
						show: this.configItems.showLabelLine, // 是否显示视觉引导线
						length: this.configItems.length, // 视觉引导线第一段的长度
						length2: this.configItems.length2, // 视觉引导线第二段的长度
						smooth: this.configItems.smooth, // 是否平滑视觉引导线
						lineStyle: {
						},
					},
					roseType: this.configItems.roseType, // 南丁格尔玫瑰图 radius:半径图  area:面积图 , 为空字符串标识不展示为玫瑰图
					itemStyle: {
						normal: {
							borderWidth: 2,
							borderColor: 'rgba(255,255,255,0.1)'
						}
					},
					// 鼠标移入扇区shadow效果
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)',
						},
					},
					data,
				});
				return series;
			},
			// 绘制图表函数,该函数会在this.data改变时再次调用
			drawChart() {
				// ---------- 图表数据 data series legendData 都需要加工一下 -----
				const data = this.getDataProcess();

				let series = [];
				let legendData = [];

				if (data[0] instanceof Array) {
					const keysLen = data.length;
					for (let i = 0; i < keysLen; i += 1) {
						series.push(this.getCurSeries(data[i])[0]);
					}
					// 取legendData
					const tmp = [];
					for (let i = 0; i < data.length; i += 1) {
						for (let j = 0; j < data[i].length; j += 1) {
							tmp.push(data[i][j]);
						}
					}
					legendData = tmp.map(t => t.name);
				} else if (data[0] instanceof Object) {
					series = this.getCurSeries(data);
					// 取legendData
					legendData = data.map(t => t.name);
				}
				// ------------------------------------------------------------------------------------------------
				// 以下是echarts 默认数据 注意这里下面数据取值是从conifgItems里面取
				const option = {
					grid: {
						left: 0,
						right: 0,
						bottom: 0,
						top: this.configItems.isLegend ? '30' : '5',
						containLabel: true,
					},
					legend: {
						data: [],
						selectedMode: this.configItems.legendSelectMode,
						show: this.configItems.isLegend,
						icon: 'circle',
						itemWidth: 8,
						itemHeight: 8,
						right: 0,
						inactiveColor: 'rgba(255,255,255,0.5)',
						textStyle: {
							color: '#fff',
							fontSize: 10,
							fontFamily: 'SourceHanSansCN-Light',
							fontWeight: 'lighter',
						},
						formatter: `{name}${this.configItems.legendUnit}`,
					},
					tooltip: {
						trigger: 'item', // 'item'数据项图形触发 'none'什么都不触发
						enterable: false,
						// 可自定义格式,不写则调用默认的
						// formatter(e) {
						//     console.log(e);
						// },
						triggerOn: 'mousemove', // tooltip鼠标移入对应扇区触发显示 默认mousemove/click
					},
					// 配置相关参考api: https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-3u872dym.html
					/*
					graphic: {
						elements: [
							{
								type: 'text',
								style: {
									text: '我爱黎明,我爱黎明',
									x: 50,
									y: 100,
								},
							},
						],
					},
					*/
					series: [],
					// 如果找不到颜色方案则给出默认多线条配色
					color: this.configItems.colorArr || 'rgba(0,0,0,0.3)',
				};

				const chartPie = this.$refs.proximaSeniorPie;
				if (chartPie) {
					// eslint-disable-next-line no-undef
					const myChart = echarts.init(chartPie);
					// 绘制图表
					option.legend.data = legendData;
					option.series = series;

					// 处理优先级
					let boge = this.option;
					// eslint-disable-next-line no-undef
					boge = _.defaultsDeep(boge, option);
					const wrapXoption = this.configItems.xOption || {};
					// eslint-disable-next-line no-undef
					_.defaultsDeep(wrapXoption, boge);
					if (data[0] instanceof Array) {
						data.forEach((item, i) => {
							wrapXoption.series[i].data = item;
						});
					} else {
						wrapXoption.series[0].data = data;
					}
					// 修改data总数
					if (data[0] instanceof Array) {
						// 可能是数量环图,所以剔除name为空的data做统计
						const tempData = data[0].filter(item => item.name !== '');
						// 判断是否存在总值显示 默认第一个text就是数据总值
						if (wrapXoption.graphic && wrapXoption.graphic.elements[0] && wrapXoption.graphic.elements[0].children.length) {
							// 默认第一个text就是数据总值 如果是整数,则显示整数和,如果是小数,则保留两位小数显示和
							wrapXoption.graphic.elements[0].children[0].style.text = tempData.reduce((total, cur) => (total - 0) + ((cur.value + '').indexOf('.') < 0 ? Math.round(cur.value - 0) - 0 : (cur.value - 0).toFixed(2)) - 0, 0);
						}
					} else {
						// 可能是数量环图,所以剔除name为空的data做统计
						const tempData = data.filter(item => item.name !== '');
						// 判断是否存在总值显示 默认第一个text就是数据总值
						if (wrapXoption.graphic && wrapXoption.graphic.elements[0] && wrapXoption.graphic.elements[0].children.length) {
							// 默认第一个text就是数据总值 如果是整数,则显示整数和,如果是小数,则保留两位小数显示和
							wrapXoption.graphic.elements[0].children[0].style.text = tempData.reduce((total, cur) => (total - 0) + ((cur.value + '').indexOf('.') < 0 ? Math.round(cur.value - 0) - 0 : (cur.value - 0).toFixed(2) - 0), 0);
						}
					}

					// 是否有饼图中心内容 (总数,totalValue,环)
					if (!this.config.config.configData.showCenter) {
						wrapXoption.graphic = { elements: [] };
					}
					myChart.setOption(wrapXoption, true);
					window.addEventListener('resize', () => {
						myChart.resize();
					});
				}
			},
		},
		computed: {
			height() {
				return this.configItems.height === '180' ? '180px' : `${parseInt(this.configItems.height, 10)}px`;
			},
			fontSize() {
				return this.configItems.titleSize == 'auto' ? '14px' : `${parseInt(this.configItems.titleSize, 10)}px`;
			}
		},
		watch: {
			data: {
				handler() {
					this.drawChart();
				},
				deep: true,
			},
		},
		destroyed() {
			window.Subscribe.unSubscribe(this.interfaceAddr, this.updateFrequency, this.params, this.interfaceKey);
		},
	},
	// 暴露在proxima后台的配置项
	itemConfig: [
		{
			type: 'title',
			caption: '基础配置',
		},
		{
			// 类型
			type: 'switch',
			// 标题
			caption: '是否显示标题',
			// 描述
			description: '',
			// key
			key: 'showName',
			// value(默认值)
			value: true,
		},
		{
			type: 'string',
			caption: '标题名称',
			key: 'title',
			value: '工业园分类统计',
		},
		{
			type: 'string',
			caption: '高度',
			key: 'height',
			value: '180',
		},
		{
			caption: '是否显示图例',
			type: 'switch',
			key: 'isLegend',
			value: false,
		},
		{
			caption: '是否序列化',
			type: 'switch',
			key: 'serialization',
			value: false,
		},
		{
			caption: '自定义配置项',
			type: 'code',
			key: 'configData',
			value: {
				colorArr: ['#FEAE3F', '#4BF1AF', '#33A3FF', '#EE5F68', '#1BFAEB'], // 扇区颜色
				radius: ['73%', '76%'], // 环图半径
				silent: false, // 鼠标响应
				borderWidth: 4, // itemStyle 边框大小
				isCountChart: true, // 数量占比环图
				placeHolderUnit: 40, // 间隙值;注:isCountChart:true生效
				showLabel: true, // 显示item说明label
				alignTo: 'edge', // 'none'(默认值):长度为固定值 'labelLine' 末端对齐 'edge' 文字对齐
				centerText: '配套总数', // 中心文字
				showCircle: true, // 是否显示双环
				showCenter: true, // 是否有饼图中心内容 data,配套总数 centerText circle等
				centerDataTop: -20, // 中心文本data总合的top值设置
				centerDataFont: '28px Microsoft YaHei', // 图表中心data总和的字体相关设置
				labelDataFontSize: 20, // label上data数据的字体大小设置
			},
			description: '此内部 colorArr可设置饼图的颜色; isCountChart可设置是否是数量图等;更多可查api参数说明文档'
		},
		{
			type: 'title',
			caption: '数据配置',
		},
		// 数据类型 dataType
		{
			// 类型
			type: 'dataType',
			// 标题
			caption: '数据类型',
			// 描述
			description: '',
			// key
			key: 'dataType',
			// value(默认值)
			value: '静态数据',
			// options(选项)
			options: [
				{ value: '静态数据', caption: '静态数据' },
				{ value: 'API', caption: 'API' },
			],
			// 元素前置文字
			beforeElement: '',
			// 元素后置文字
			afterElement: '',
		},
		// 静态数据 dataStatic
		{
			// 类型
			type: 'dataStatic',
			// 标题
			caption: '静态数据',
			// 描述
			description: '',
			// key
			key: 'data',
			// value(默认值)
			value: [
                {
                    value: 4,
                    name: '高新科技园',
                }, {
                    value: 4,
                    name: '小商品',
                }, {
                    value: 2,
                    name: '物流',
                }, {
                    value: 6,
                    name: '工业园总数',
                }, {
                    value: 5,
                    name: '创业园',
                }
            ],
		},
		// 接口地址 dataApi
		{
			// 类型
			type: 'dataApi',
			// 标题
			caption: '接口地址',
			// 描述
			description: 'url可写完整路径,也可以写相对路径(相对路径是相对当前系统的接口,例:http://ip:port/tarsier-dcv/)',
			// key
			key: 'dataApi',
			// value(默认值)
			value: '',
			// 元素前置文字
			beforeElement: '',
			// 元素后置文字
			afterElement: '',
		},
		// 接口标识 dataIdentification
		{
			// 类型
			type: 'dataIdentification',
			// 标题
			caption: '接口标识',
			// 描述
			description: '一个接口有多组图表数据时,区分该图表数据的标识',
			// key
			key: 'dataIdentification',
			// value(默认值)
			value: '',
			// 元素前置文字
			beforeElement: '',
			// 元素后置文字
			afterElement: '',
		},
		// 接口参数 dataParam
		{
			// 类型
			type: 'dataParam',
			// 标题
			caption: '接口参数',
			// 描述
			description: '',
			// key
			key: 'dataParam',
			// value(默认值)
			value: '',
		},
		// 接口频率 dataInterval
		{
			// 类型
			type: 'dataInterval',
			// 标题
			caption: '接口更新频率(单位ms)',
			// 描述
			description: '',
			// key
			key: 'dataInterval',
			// value(默认值)
			value: '10000',
		},
	]
};

效果图