图表属性
2021-08-07 by uino 0 资源工厂

开发项(frame.js)

以下开发项为 frame.js 文件格式中的必填内容,也是定义一个图表资源的重要组成部分

name

string

图表的唯一标识,产品使用根据此名称来修改同名图表组件,与文件资源包名称一致

{
	name: '商汤-断环图'
}

type

string

告知产品资源类型。目前只需填写chart

{
	type: 'chart'
}

version

string

迭代版本号

{
	version: '1.0.1'
}

target

string

当前图表开发者的图表命名

{
	target: '断环图-饼图'
}

group

string

图表分组名称,根据不同图表形状可进行分组展示管理,易于定位查询使用。

{
	group: '环饼图'
}

theme

string

主题风格,便于资源网站以及产品使用分类。目前包含大表姐、星云、密斯

{
	theme: '密斯'
}

author

string

作者,开发者名字

{
	author: '唐安'
}

uuid

number

资源唯一标识,详细请查看资源实例映射表

{
	uuid: '004010300000003'
}

folder

string

必填字段,内容与资源文件夹名称一致,通过uinv.utils.getResourceUrl拿取资源时路径中的文件夹名称其实是folder字段内容

{
	folder: '商汤-断环图',
}

update

function

向下迭代版本兼容方法

!> 版本兼容方法采用层级递归迭代的方法处理(1=>2=>3),不可直接跳跃式兼容(1=>3, 2=>3)。

{
	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
		};
		*/
	},
}

view

Object<Vue>

图表本身 Vue 实例,定义了图表的样式、数据、可接受的配置项

Proxima 产品可视化配置中的数据通过 props 属性传递进来。

Proxima 产品展示图表时默认会调用 initMounted 方法。

Subscribe 为产品内数据监测API,详细接口内容查看使用的API

{
	view: {
		template:`<div>{{ data }}<div>`,
		props: ['config'],
		data() {
			return {
				data: '',
				interfaceAddr: this.config.config.interfaceAddr,
				interfaceKey: this.config.config.interfaceKey,
				updateFrequency: this.config.config.updateFrequency,
				params: this.config.config.params,
			}
		},
		mounted() {},
		methods: {
			getData(data) {
				this.data = data;
			},
			initMounted() {
				window.Subscribe.subscribe(this.interfaceAddr, this.updateFrequency, this.getData, this.params, this.interfaceKey);
			},
			destroyed() {
				window.Subscribe.unSubscribe(this.interfaceAddr, this.updateFrequency, this.params, this.interfaceKey);
			},
		}
	}
}

itemConfig

Array<Object>

产品应用可视化中的配置项。具体配置项解析内容请参照配置属性

itemConfig: [
		{
			type: 'title',
			caption: '基础配置',
		},
		{
			type: 'switch',
			caption: '是否显示标题',
			description: '',
			key: 'showName',
			value: true,
		},
		{
			type: 'string',
			caption: '标题名称',
			key: 'title',
			value: '工业园分类统计',
		},
		{
			type: 'string',
			caption: '高度',
			key: 'height',
			value: '180',
		},
	]