开发规范

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

开发规范

frame.js中group目前分类

图表是Proxima开发的核心内容之一,proxima图表主要分为9大类:
折线图、柱状图、雷达图、环饼图、仪表盘、漏斗图、数值、组件、和其他

frame.js文件代码格式规范

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

window.UserConfig = {
    name: '商汤-断环图', // 图表的唯一标识,根据上传同名覆盖同名图表组件
    type: 'chart', // 告知产品方zip类型
    version: '1.0.1', // 迭代版本号
    target: '断环图-饼图', // 当前图表开发者的图表命名
    group: '环饼图', // 属于的图表分组 暂时共有九类:折线图、柱状图、雷达图、环饼图、仪表盘、漏斗图、数值、组件、和其他
    theme: '密斯', //主题 太空旅客,重返地球,密斯
    author: '唐安', // 作者
    uuid: '004010300000003',
    folder: '商汤-断环图',
    update(old){}//版本迭代
    view:{} // Vue实例
    itemConfig:[] // 暴露在proxima后台的配置项
}

解释一下各字段的含义

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)。

至此已经完成了一个图表的封装,接下来学习一下图表的开发项(frame.js)、配置项(configUI)、开发规范以及一些实用的 API

版本向下兼容

// 向下迭代版本改动详细
	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
		};
		*/
	},

钩子函数及方法规范

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)) {
			// 数据没有变化 前端图表不更新
		}
	},

    //以下两个方法在使用图表打包工程开发时使用

        // 生成图表css样式的方法
    	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);
		},

        // 绘制图表方法
        drawChart(){

		},


// 计算属性钩子函数 需要计算得到的数据或者动态变化的style属性必须放到这里
	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`;
        }
    },

// 挂载钩子函数 在直接使用图表打包工程开发时 使用此钩子函数加载相应方法
	mounted() {
		this.createStyle(this.cssText);
		// 由于drawChart方法需要用到一些后台配置的参数 所以必须使用setTimeout包裹此方法以免出现图表样式问题
		setTimeout(this.drawChart(),0);
	},

// 监听到数据变化 重绘图表
	watch: {
		data: {
			handler() {
				this.drawChart();
			},
			deep: true,
		},
	},

// 销毁钩子函数 页面销毁时 解绑一些接口参数
	destroyed() {
		window.Subscribe.unSubscribe(this.interfaceAddr, this.updateFrequency, this.params, this.interfaceKey);
	},

样式规范

 一般不设置背景色,特殊情况除外

 高度要求自适应:

    接收后台配置的高度不能写死;
    当高度变大具体看情况 一些图表拉伸 一些大小不变居中

 严格按照设计图设计样式,包括图表内间距、字体、颜色都要与设计图一致

字体规范

太空旅客:
    中文字体不设置font-family

    英文字体一律设置为如下:
    fontFamily: 'DINPro',

    不论何种字体都需要加上:
    fontWeight: 400,

重返地球:
    中文字体不设置font-family

    英文字体一律设置为如下:
    fontFamily: 'Montserrat', sans-serif;

    字重根据设计图确定各部分字重大小

对齐规范

代码前间距为tab(默认4个一个tab)

带坐标轴的图表 坐标轴以及单位要与图表标题左对齐,如下图

itemConfig 配置规范

!>以下八项配置必须存在,剩下的配置项依具体图表而定

        {
			type: 'switch',
			caption: '是否显示标题',
			description: '',
			key: 'showName',
			value: true,
		},
		{
			type: 'string',
			caption: '标题名称',
			key: 'title',
			value: '工业园分类统计',
		},
		{
			type: 'string',
			caption: '高度',
			key: 'height',
			value: '180',
		},
		{
			type: 'dataStatic',
			caption: '静态数据',
			description: '',
			key: 'data',
			value: [
                {
                    value: 4,
                    name: '高新科技园',
                }, {
                    value: 4,
                    name: '小商品',
                }, {
                    value: 2,
                    name: '物流',
                }, {
                    value: 6,
                    name: '工业园总数',
                }, {
                    value: 5,
                    name: '创业园',
                }
            ],
		},
        {
			type: 'dataApi',
			caption: '接口地址',
			description: 'url可写完整路径,也可以写相对路径(相对路径是相对当前系统的接口,例:http://ip:port/tarsier-dcv/)',
			key: 'dataApi',
			value: '',
			// 元素前置文字
			beforeElement: '',
			// 元素后置文字
			afterElement: '',
		},
		{
			type: 'dataIdentification',
			caption: '接口标识',
			description: '一个接口有多组图表数据时,区分该图表数据的标识',
			key: 'dataIdentification',
			value: '',
			// 元素前置文字
			beforeElement: '',
			// 元素后置文字
			afterElement: '',
		},
		{
			type: 'dataParam',
			caption: '接口参数',
			description: '',
			key: 'dataParam',
			value: '',
		},
		{
			type: 'dataInterval',
			caption: '接口更新频率(单位ms)',
			description: '',
			key: 'dataInterval',
			value: '10000',
		},