折线图(依赖RichUI)

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

折线图(依赖RichUI)

示例demo为折线图-太空旅客

window.UserConfig = {
	//唯一标识
	name: '折线图-太空旅客',
	type: 'chart',
	author: '牛江伟',
	version: '1.0.1',
	target: '折线图组件',
	group: '折线图',
	theme: '太空旅客', //主题 太空旅客,重返地球,密斯
	uuid: '002010400000001',
	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
		};
		*/
	},
	view: {
		template: `
			<div style="word-break:break-all;color:#fff;">
				<th-proxima-chart-Line :config="configItems" :data="data" :key="updateFlag"/>
			</div>
		`,
		props: ['config'],
		data: function () {
			return {
				updateFlag: 0X21314,
				configItems: {
					xData: this.config.config.dataStatic.xData, // 默认展示xData数据 注意它的取值是this.config.config.data.xData
					height: this.config.config.height,
					selectedMode: this.config.config.selectedMode,
					legendUnit: this.config.config.configData.legendUnit || '', // 图例单位
					isLegend: this.config.config.isLegend,
					colorArr: this.config.config.configData.colorArr,
					min: this.config.config.configData.min || 'dataMin',
					max: this.config.config.configData.max || 'dataMax',
					splitLineColor: this.config.config.configData.splitLineColor,
					isShowXLine: this.config.config.isShowXLine,
					isShowX: this.config.config.isShowX,
					isShowYLine: this.config.config.isShowYLine,
					isShowY: this.config.config.isShowY,
					isShowLabel: this.config.config.isShowLabel,
					isArea: this.config.config.isArea,
					isSmooth: this.config.config.isSmooth,
					interval: this.config.config.configData.interval,
					unitShow: this.config.config.unitShow,
					unit: this.config.config.unit,
					xOption: this.config.config.xOption,
				},
				data: this.config.config.dataStatic.data, // 默认展示数据 注意它的取值是this.config.config.data.data
				updateFrequency: this.config.config.dataInterval, // 刷新时间
				interfaceAddr: this.config.config.dataApi, // 接口地址
				params: this.config.config.dataParam, // 接口参数
				interfaceKey: this.config.config.dataIdentification, // 接口对应值
				temp: null, // 用来区分图表数据是否改变,盛放接口的data
			};
		},
		mounted() {
		},
		methods: {
			initMounted() {
				if (this.interfaceAddr && this.dataType !== '静态数据') {
					window.Subscribe.subscribe(this.interfaceAddr, this.updateFrequency, this.getData, this.params, this.interfaceKey);
				}
			},
			getData(res) {
				/*
				data 数据模拟 解析过程 需告知接口方如下数据格式
				{
					code: 200,
					data: {
						xData: ['2020-11-13', '2020-11-14', '2020-11-15', '2020-11-16', '2020-11-17', '2020-11-18', '2020-11-19'],
						data: {
							本周: [19, 81, 24, 26, 52, 47, 80],
						}
					},
					status: 'success'
				}
				*/
				if (this.temp == null || JSON.stringify(this.temp) != JSON.stringify(res.data)) {
					// 初始赋值和数据对比不同时需要更新数据
					this.temp = res.data;
					this.updateFlag = ~this.updateFlag;
					this.data = res.data;
					this.configItems.xData = res.xData;
					// console.log('图表 - 折线图数据已更新');
				} else if (JSON.stringify(this.temp) == JSON.stringify(res.data)) {
					// 数据没有变化 前端图表不更新
				}
			}
		},
		destroyed() {
			window.Subscribe.unSubscribe(this.interfaceAddr, this.updateFrequency, this.params, this.interfaceKey);
		},
	},
	itemConfig: [
		{
			type: 'title',
			caption: '基础配置',
		},
		{
			caption: '是否显示标题',
			type: 'switch',
			key: 'showName',
			value: true,
		},
		{
			caption: '标题名称',
			type: 'string',
			key: 'title',
			value: '图表标题',
		},
		{
			caption: '高度',
			type: 'string',
			key: 'height',
			value: '180',
            description: '该图表默认展示为180px,如果设置小于180px,按180px算',
		},
		{
			caption: '是否显示图例',
			type: 'switch',
			key: 'isLegend',
			value: true
		},
		{
			caption: '图例是否可操作',
			type: 'switch',
			key: 'selectedMode',
			value: true
		},
		{
			caption: '是否显示X轴坐标轴',
			type: 'switch',
			key: 'isShowXLine',
			value: true
		},
		{
			caption: '是否显示X轴',
			type: 'switch',
			key: 'isShowX',
			value: true
		},
		{
			caption: '是否显示Y轴坐标轴',
			type: 'switch',
			key: 'isShowYLine',
			value: true
		},
		{
			caption: '是否显示Y轴',
			type: 'switch',
			key: 'isShowY',
			value: true
		},
		{
			caption: '是否显示刻度点数值',
			type: 'switch',
			key: 'isShowLabel',
			value: false,
		},
		{
			caption: '是否是面积图',
			type: 'switch',
			key: 'isArea',
			value: false,
		},
		{
			caption: '是否平滑显示',
			type: 'switch',
			key: 'isSmooth',
			value: false,
		},
		{
			caption: '是否显示数据单位',
			type: 'switch',
			key: 'unitShow',
			value: true,
		},
		{
			caption: '数据单位内容',
			type: 'string',
			key: 'unit',
			value: 'kv'
		},
		{
			caption: '自定义配置项',
			type: 'code',
			key: 'configData',
			value: {
				colorArr: ['#ffb145', '#2cb3f1'], // 折线颜色
				splitLineColor: 'rgba(255,255,255,0.5)', // 辅助线颜色
				interval: 'auto', // xLabel显示刻度方式 默认自动,可设置间隔数值
				min: 'dataMin', // y轴最小刻度
				max: 'dataMax' // y轴最大刻度
			}
		},
		{
			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: 'dataStatic',
			// value(默认值)
			value: {
				xData: ['1:00', '2:00', '3:00', '4:00', '5:00', '6:00'],
				data: {
					本周: [19, 81, 24, 26, 52, 47],
					上月: [19, 50, 30, 40, 70, 30],
				}
			},
		},
		// 接口地址 dataApi
		{
			// 类型
			type: 'dataApi',
			// 标题
			caption: '接口地址',
			// 描述
			description: '',
			// 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: '更新频率',
			// 描述
			description: '',
			// key
			key: 'dataInterval',
			// value(默认值)
			value: '10000',
		},
	]
};

效果图