adultDeviceApp/uni_modules/qiun-data-charts/components/qiun-data-charts.vue

<!-- 
 * qiun-data-charts 秋云高性能跨全端图表组件 v2.1.5-20210517
 * Copyright (c) 2021 QIUN® 秋云 https://www.ucharts.cn All rights reserved.
 * Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
 * 复制使用请保留本段注释，感谢支持开源！
 * 为方便更多开发者使用，如有更好的建议请提交码云 Pull Requests ！
 *
 * uCharts®官方网站
 * https://www.uCharts.cn
 * 
 * 开源地址:
 * https://gitee.com/uCharts/uCharts
 * 
 * uni-app插件市场地址：
 * http://ext.dcloud.net.cn/plugin?id=271
 * 
 -->
<template>
	<view class="chartsview" :id="'ChartBoxId'+cid">
		<block v-if="type2d">
			<view v-if="ontouch" @tap="_tap">
				<canvas :id="cid" :canvasId="cid"
					:style="{ width: cWidth + 'rpx', height: cHeight + 'rpx', background: background }" type="2d"
					:disable-scroll="disScroll" @touchstart="_touchStart" @touchmove="_touchMove" @touchend="_touchEnd"
					@error="_error" v-show="showchart" />
			</view>
			<view v-if="!ontouch" @tap="_tap">
				<canvas :id="cid" :canvasId="cid"
					:style="{ width: cWidth + 'rpx', height: cHeight + 'rpx', background: background }" type="2d"
					:disable-scroll="disScroll" @error="_error" v-show="showchart" />
			</view>
		</block>
		<block v-if="!type2d">
			<view v-if="ontouch" @tap="_tap">
				<canvas :id="cid" :canvasId="cid"
					:style="{ width: cWidth + 'rpx', height: cHeight + 'rpx', background: background }"
					@touchstart="_touchStart" @touchmove="_touchMove" @touchend="_touchEnd" :disable-scroll="disScroll"
					@error="_error" v-show="showchart" />
			</view>
			<view v-if="!ontouch">
				<canvas :id="cid" :canvasId="cid"
					:style="{ width: cWidth + 'rpx', height: cHeight + 'rpx', background: background }"
					:disable-scroll="disScroll" @tap="_tap" @error="_error" v-show="showchart" />
			</view>
		</block>
	</view>
</template>

<script>
	import uChartsMp from '@/uni_modules/qiun-data-charts/js_sdk/u-charts.js';
	import cfu from '@/uni_modules/qiun-data-charts/js_sdk/config-ucharts.js';

	function deepCloneAssign(origin = {}, ...args) {
		for (let i in args) {
			for (let key in args[i]) {
				if (args[i].hasOwnProperty(key)) {
					origin[key] = args[i][key] && typeof args[i][key] === 'object' ? deepCloneAssign(Array.isArray(args[i][
						key
					]) ? [] : {}, origin[key], args[i][key]) : args[i][key];
				}
			}
		}
		return origin;
	}

	function formatterAssign(args, formatter) {
		for (let key in args) {
			if (args[key] !== null && typeof args[key] === 'object') {
				formatterAssign(args[key], formatter)
			} else if (key === 'format' && typeof args[key] === 'string') {
				args['formatter'] = formatter[args[key]] ? formatter[args[key]] : undefined;
			}
		}
		return args;
	}

	// 时间转换函数，为了匹配uniClinetDB读取出的时间与categories不同
	function getFormatDate(date) {
		var seperator = "-";
		var year = date.getFullYear();
		var month = date.getMonth() + 1;
		var strDate = date.getDate();
		if (month >= 1 && month <= 9) {
			month = "0" + month;
		}
		if (strDate >= 0 && strDate <= 9) {
			strDate = "0" + strDate;
		}
		var currentdate = year + seperator + month + seperator + strDate;
		return currentdate;
	}

	var lastMoveTime = null;
	/**
	 * 防抖
	 *
	 * @param { Function } fn 要执行的方法
	 * @param { Number } wait  防抖多少毫秒
	 *
	 * 在 vue 中使用（注意：不能使用箭头函数，否则this指向不对，并且不能再次封装如：
	 * move(){  // 错误调用方式
	 *   debounce(function () {
	 *   console.log(this.title);
	 * }, 1000)}）;
	 * 应该直接使用：// 正确调用方式
	 * move: debounce(function () {
	 *   console.log(this.title);
	 * }, 1000)
	 */
	function debounce(fn, wait) {
		let timer = false;
		return function() {
			clearTimeout(timer);
			timer && clearTimeout(timer);
			timer = setTimeout(() => {
				timer = false;
				fn.apply(this, arguments); // 把参数传进去
			}, wait);
		};
	}

	export default {
		name: 'qiun-data-charts',
		mixins: [uniCloud.mixinDatacom],
		props: {
			type: {
				type: String,
				default: null
			},
			canvasId: {
				type: String,
				default: 'uchartsid'
			},
			canvas2d: {
				type: Boolean,
				default: false
			},
			background: {
				type: String,
				default: 'none'
			},
			animation: {
				type: Boolean,
				default: true
			},
			chartData: {
				type: Object,
				default () {
					return {
						categories: [],
						series: []
					};
				}
			},
			opts: {
				type: Object,
				default () {
					return {};
				}
			},
			eopts: {
				type: Object,
				default () {
					return {};
				}
			},
			loadingType: {
				type: Number,
				default: 2
			},
			errorShow: {
				type: Boolean,
				default: true
			},
			errorReload: {
				type: Boolean,
				default: true
			},
			errorMessage: {
				type: String,
				default: null
			},
			inScrollView: {
				type: Boolean,
				default: false
			},
			reshow: {
				type: Boolean,
				default: false
			},
			reload: {
				type: Boolean,
				default: false
			},
			disableScroll: {
				type: Boolean,
				default: false
			},
			ontap: {
				type: Boolean,
				default: true
			},
			ontouch: {
				type: Boolean,
				default: false
			},
			onmouse: {
				type: Boolean,
				default: true
			},
			onmovetip: {
				type: Boolean,
				default: false
			},
			echartsH5: {
				type: Boolean,
				default: false
			},
			echartsApp: {
				type: Boolean,
				default: false
			},
			tooltipShow: {
				type: Boolean,
				default: true
			},
			tooltipFormat: {
				type: String,
				default: undefined
			},
			tooltipCustom: {
				default: undefined
			},
			startDate: {
				type: String,
				default: undefined
			},
			endDate: {
				type: String,
				default: undefined
			},
			textEnum: {
				type: Array,
				default () {
					return []
				}
			},
			groupEnum: {
				type: Array,
				default () {
					return []
				}
			},
			pageScrollTop: {
				type: Number,
				default: 0
			},
			directory: {
				type: String,
				default: '/'
			},
			cHeight: {
				type: Number,
				default: 700
			},
			cWidth: {
				type: Number,
				default: 600
			}
		},
		data() {
			return {
				cid: 'uchartsid',
				inWx: false,
				inAli: false,
				inTt: false,
				inBd: false,
				inH5: false,
				inApp: false,
				inWin: false,
				type2d: true,
				disScroll: false,
				openmouse: false,
				pixel: 1,
				// cWidth: 320,
				// cHeight: 250,
				showchart: false,
				echarts: false,
				echartsResize: false,
				uchartsOpts: {},
				echartsOpts: {},
				drawData: {},
				lastDrawTime: null,
			};
		},
		created() {
			this.cid = this.canvasId
			if (this.canvasId == 'uchartsid' || this.canvasId == '') {
				let t = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
				let len = t.length
				let id = ''
				for (let i = 0; i < 32; i++) {
					id += t.charAt(Math.floor(Math.random() * len))
				}
				this.cid = id
			}
			const systemInfo = uni.getSystemInfoSync()
			if (systemInfo.platform === 'windows') {
				this.inWin = true;
			}
			// #ifdef MP-WEIXIN
			this.inWx = true;
			if (this.canvas2d === false || systemInfo.platform === 'windows') {
				this.type2d = false;
			} else {
				this.pixel = systemInfo.pixelRatio;
				if (this.canvasId === 'uchartsid' || this.canvasId == '') {
					console.log('[uCharts]:开启canvas2d模式，必须指定canvasId，否则会出现偶尔获取不到dom节点的问题！');
				}
			}
			// #endif
			//非微信小程序端强制关闭canvas2d模式
			// #ifndef MP-WEIXIN
			this.type2d = false;
			// #endif
			// #ifdef MP-ALIPAY
			this.inAli = true;
			this.pixel = systemInfo.pixelRatio;
			// #endif
			// #ifdef MP-BAIDU
			this.inBd = true;
			// #endif
			// #ifdef MP-TOUTIAO
			this.inTt = true;
			// #endif
			this.disScroll = this.disableScroll;
		},
		mounted() {
			// #ifdef APP-VUE
			this.inApp = true;
			if (this.echartsApp === true) {
				this.echarts = true;
				this.openmouse = false;
			}
			// #endif
			// #ifdef APP-NVUE
			this.inApp = true;
			this.mixinDatacomLoading = false
			this.mixinDatacomErrorMessage = "暂不支持NVUE"
			// #endif
			// #ifdef H5
			this.inH5 = true;
			if (this.inWin === true) {
				this.openmouse = this.onmouse;
			}
			if (this.echartsH5 === true) {
				this.echarts = true;
			}
			// #endif
			this.cWidth = this.cWidth ? this.cWidth : uni.upx2px(640);
			this.cHeight = this.cHeight ? this.cHeight : uni.upx2px(500);
			this.$nextTick(() => {
				this.beforeInit();
			})
			// #ifndef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || APP-VUE
			const time = this.inH5 ? 500 : 200;
			const _this = this;
			uni.onWindowResize(
				debounce(function(res) {
					if (_this.mixinDatacomLoading == true) {
						return;
					}
					let errmsg = _this.mixinDatacomErrorMessage;
					if (errmsg !== null && errmsg !== 'null' && errmsg !== '') {
						return;
					}
					if (_this.echarts) {
						_this.echartsResize = !_this.echartsResize;
					} else {
						_this.resizeHandler();
					}
				}, time)
			);
			// #endif
		},
		destroyed() {
			delete cfu.option[this.cid]
			delete cfu.instance[this.cid]
			// #ifndef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO
			uni.offWindowResize(() => {})
			// #endif
		},
		watch: {
			chartDataProps: {
				handler(val, oldval) {
					if (typeof val === 'object') {
						if (JSON.stringify(val) !== JSON.stringify(oldval)) {
							if (val.series && val.series.length > 0) {
								this.beforeInit();
							} else {
								this.mixinDatacomLoading = true;
								this._clearChart();
								this.showchart = false;
								this.mixinDatacomErrorMessage = null;
							}
						}
					} else {
						this.mixinDatacomLoading = false;
						this._clearChart();
						this.showchart = false;
						this.mixinDatacomErrorMessage = '参数错误：chartData数据类型错误';
					}
				},
				immediate: false,
				deep: true
			},
			localdata: {
				handler(val, oldval) {
					if (JSON.stringify(val) !== JSON.stringify(oldval)) {
						if (val.length > 0) {
							this.beforeInit();
						} else {
							this.mixinDatacomLoading = true;
							this._clearChart();
							this.showchart = false;
							this.mixinDatacomErrorMessage = null;
						}
					}
				},
				immediate: false,
				deep: true
			},
			optsProps: {
				handler(val, oldval) {
					if (typeof val === 'object') {
						if (JSON.stringify(val) !== JSON.stringify(oldval) && this.echarts === false) {
							this.checkData(this.drawData);
						}
					} else {
						this.mixinDatacomLoading = false;
						this._clearChart();
						this.showchart = false;
						this.mixinDatacomErrorMessage = '参数错误：opts数据类型错误';
					}
				},
				immediate: false,
				deep: true
			},
			eoptsProps: {
				handler(val, oldval) {
					if (typeof val === 'object') {
						if (JSON.stringify(val) !== JSON.stringify(oldval) && this.echarts === true) {
							this.checkData(this.drawData);
						}
					} else {
						this.mixinDatacomLoading = false;
						this.showchart = false;
						this.mixinDatacomErrorMessage = '参数错误：eopts数据类型错误';
					}
				},
				immediate: false,
				deep: true
			},
			reshow(val, oldval) {
				if (val === true && this.mixinDatacomLoading === false) {
					setTimeout(() => {
						this.mixinDatacomErrorMessage = null;
						this.echartsResize = !this.echartsResize;
						this.checkData(this.drawData);
					}, 200);
				}
			},
			reload(val, oldval) {
				if (val === true) {
					this.showchart = false;
					this.mixinDatacomErrorMessage = null;
					this.reloading();
				}
			},
			mixinDatacomErrorMessage(val, oldval) {
				if (val) {
					this.emitMsg({
						name: 'error',
						params: {
							type: "error",
							errorShow: this.errorShow,
							msg: val,
							id: this.cid
						}
					});
					if (this.errorShow) {
						console.log('[秋云图表组件]' + val);
					}
				}
			},
			errorMessage(val, oldval) {
				if (val && this.errorShow && val !== null && val !== 'null' && val !== '') {
					this.showchart = false;
					this.mixinDatacomLoading = false;
					this.mixinDatacomErrorMessage = val;
				} else {
					this.showchart = false;
					this.mixinDatacomErrorMessage = null;
					this.reloading();
				}
			}
		},
		computed: {
			optsProps() {
				return JSON.parse(JSON.stringify(this.opts));
			},
			eoptsProps() {
				return JSON.parse(JSON.stringify(this.eopts));
			},
			chartDataProps() {
				return JSON.parse(JSON.stringify(this.chartData));
			},
		},
		methods: {
			beforeInit() {
				this.mixinDatacomErrorMessage = null;
				if (typeof this.chartData === 'object' && this.chartData != null && this.chartData.series !== undefined &&
					this.chartData.series.length > 0) {
					//拷贝一下chartData，为了opts变更后统一数据来源
					this.drawData = deepCloneAssign({}, this.chartData);
					this.mixinDatacomLoading = false;
					this.showchart = true;
					this.checkData(this.chartData);
				} else if (this.localdata.length > 0) {
					this.mixinDatacomLoading = false;
					this.showchart = true;
					this.localdataInit(this.localdata);
				} else if (this.collection !== '') {
					this.mixinDatacomLoading = false;
					this.getCloudData();
				} else {
					this.mixinDatacomLoading = true;
				}
			},
			localdataInit(resdata) {
				//替换enum类型为正确的描述
				if (this.groupEnum.length > 0) {
					for (let i = 0; i < resdata.length; i++) {
						for (let j = 0; j < this.groupEnum.length; j++) {
							if (resdata[i].group === this.groupEnum[j].value) {
								resdata[i].group = this.groupEnum[j].text
							}
						}
					}
				}
				if (this.textEnum.length > 0) {
					for (let i = 0; i < resdata.length; i++) {
						for (let j = 0; j < this.textEnum.length; j++) {
							if (resdata[i].text === this.textEnum[j].value) {
								resdata[i].text = this.textEnum[j].text
							}
						}
					}
				}
				let needCategories = false;
				let tmpData = {
					categories: [],
					series: []
				}
				let tmpcategories = []
				let tmpseries = [];
				//拼接categories
				needCategories = cfu.categories.includes(this.type)
				if (needCategories === true) {
					//如果props中的chartData带有categories，则优先使用chartData的categories
					if (this.chartData && this.chartData.categories && this.chartData.categories.length > 0) {
						tmpcategories = this.chartData.categories
					} else {
						//如果是日期类型的数据，不管是本地数据还是云数据，都按起止日期自动拼接categories
						if (this.startDate && this.endDate) {
							let idate = new Date(this.startDate)
							let edate = new Date(this.endDate)
							while (idate <= edate) {
								tmpcategories.push(getFormatDate(idate))
								idate = idate.setDate(idate.getDate() + 1)
								idate = new Date(idate)
							}
							//否则从结果中去重并拼接categories
						} else {
							let tempckey = {};
							resdata.map(function(item, index) {
								if (item.text != undefined && !tempckey[item.text]) {
									tmpcategories.push(item.text)
									tempckey[item.text] = true
								}
							});
						}
					}
					tmpData.categories = tmpcategories
				}
				//拼接series
				let tempskey = {};
				resdata.map(function(item, index) {
					if (item.group != undefined && !tempskey[item.group]) {
						tmpseries.push({
							name: item.group,
							data: []
						});
						tempskey[item.group] = true;
					}
				});
				//如果没有获取到分组名称(可能是带categories的数据，也可能是不带的饼图类)
				if (tmpseries.length == 0) {
					tmpseries = [{
						name: '默认分组',
						data: []
					}];
					//如果是需要categories的图表类型
					if (needCategories === true) {
						for (let j = 0; j < tmpcategories.length; j++) {
							let seriesdata = 0;
							for (let i = 0; i < resdata.length; i++) {
								if (resdata[i].text == tmpcategories[j]) {
									seriesdata = resdata[i].value;
								}
							}
							tmpseries[0].data.push(seriesdata);
						}
						//如果是饼图类的图表类型
					} else {
						for (let i = 0; i < resdata.length; i++) {
							tmpseries[0].data.push({
								"name": resdata[i].text,
								"value": resdata[i].value
							});
						}
					}
					//如果有分组名
				} else {
					for (let k = 0; k < tmpseries.length; k++) {
						//如果有categories
						if (tmpcategories.length > 0) {
							for (let j = 0; j < tmpcategories.length; j++) {
								let seriesdata = 0;
								for (let i = 0; i < resdata.length; i++) {
									if (tmpseries[k].name == resdata[i].group && resdata[i].text == tmpcategories[j]) {
										seriesdata = resdata[i].value;
									}
								}
								tmpseries[k].data.push(seriesdata);
							}
							//如果传了group而没有传text，即没有categories（正常情况下这种数据是不符合数据要求规范的）
						} else {
							for (let i = 0; i < resdata.length; i++) {
								if (tmpseries[k].name == resdata[i].group) {
									tmpseries[k].data.push(resdata[i].value);
								}
							}
						}
					}
				}
				tmpData.series = tmpseries
				//拷贝一下chartData，为了opts变更后统一数据来源
				this.drawData = deepCloneAssign({}, tmpData);
				this.checkData(tmpData)
			},
			reloading() {
				if (this.errorReload === false) {
					return;
				}
				this.showchart = false;
				this.mixinDatacomErrorMessage = null;
				if (this.collection !== '') {
					this.mixinDatacomLoading = false;
					this.onMixinDatacomPropsChange(true);
				} else {
					this.beforeInit();
				}
			},
			checkData(anyData) {
				let cid = this.cid
				//复位opts或eopts
				if (this.type && cfu.type.includes(this.type)) {
					cfu.option[cid] = deepCloneAssign({}, cfu[this.type], this.opts);
					cfu.option[cid].canvasId = cid;
				} else {
					this.mixinDatacomLoading = false;
					this.showchart = false;
					this.mixinDatacomErrorMessage = '参数错误：props参数中type类型不正确';
				}
				//挂载categories和series
				let newData = deepCloneAssign({}, anyData);
				if (newData.series !== undefined && newData.series.length > 0) {
					this.mixinDatacomErrorMessage = null;
					cfu.option[cid].categories = newData.categories;
					cfu.option[cid].series = newData.series;
					this.$nextTick(() => {
						this.init()
					})
				}
			},
			resizeHandler() {
				//渲染防抖
				let currTime = Date.now();
				let lastDrawTime = this.lastDrawTime ? this.lastDrawTime : currTime - 3000;
				let duration = currTime - lastDrawTime;
				if (duration < 1000) return;
				let chartdom = uni
					.createSelectorQuery()
					// #ifndef MP-ALIPAY
					.in(this)
					// #endif
					.select('#ChartBoxId' + this.cid)
					.boundingClientRect(data => {
						this.showchart = true;
						if (data.width > 0 && data.height > 0) {
							if (data.width !== this.cWidth || data.height !== this.cHeight) {
								this.checkData(this.drawData)
							}
						}
					})
					.exec();
			},
			getCloudData() {
				if (this.mixinDatacomLoading == true) {
					return;
				}
				this.mixinDatacomLoading = true;
				this.mixinDatacomGet()
					.then(res => {
						this.mixinDatacomResData = res.result.data;
						this.localdataInit(this.mixinDatacomResData);
					})
					.catch(err => {
						this.mixinDatacomLoading = false;
						this.showchart = false;
						this.mixinDatacomErrorMessage = '请求错误：' + err;
					});
			},
			onMixinDatacomPropsChange(needReset, changed) {
				if (needReset == true && this.collection !== '') {
					this.showchart = false;
					this.mixinDatacomErrorMessage = null;
					this._clearChart();
					this.getCloudData();
				}
			},
			_clearChart() {
				let cid = this.cid
				if (this.echrts !== true) {
					const ctx = uni.createCanvasContext(cid, this);
					ctx.clearRect(0, 0, this.cWidth, this.cHeight);
					ctx.draw();
				}
			},
			init() {
				let cid = this.cid
				let chartdom = uni
					.createSelectorQuery()
					// #ifndef MP-ALIPAY
					.in(this)
					// #endif
					.select('#ChartBoxId' + cid)
					.boundingClientRect(data => {
						if (data&&data.width > 0 && data.height > 0) {
							this.mixinDatacomLoading = false;
							this.showchart = true;
							this.lastDrawTime = Date.now();
							// this.cWidth = this.cWidth?this.cWidth:data.width;
							// this.cHeight = this.cHeight?this.cHeight:data.height;
							if (this.echarts !== true) {
								// cfu.option[cid].background = !this.background? '#FFFFFF' : this.background;
								cfu.option[cid].background = '#FFFFFF';
								cfu.option[cid].canvas2d = this.type2d;
								cfu.option[cid].pixelRatio = this.pixel;
								cfu.option[cid].animation = this.animation;
								cfu.option[cid].width = data.width * this.pixel;
								cfu.option[cid].height = data.height * this.pixel;
								cfu.option[cid].ontap = this.ontap;
								cfu.option[cid].ontouch = this.ontouch;
								cfu.option[cid].onmouse = this.openmouse;
								cfu.option[cid].onmovetip = this.onmovetip;
								cfu.option[cid].tooltipShow = this.tooltipShow;
								cfu.option[cid].tooltipFormat = this.tooltipFormat;
								cfu.option[cid].tooltipCustom = this.tooltipCustom;
								cfu.option[cid].inScrollView = this.inScrollView;
								cfu.option[cid].lastDrawTime = this.lastDrawTime;
							}
							cfu.option[cid] = formatterAssign(cfu.option[cid], cfu.formatter)
							this.mixinDatacomErrorMessage = null;
							this.mixinDatacomLoading = false;
							this.showchart = true;
							this.$nextTick(() => {
								if (this.type2d === true) {
									const query = uni.createSelectorQuery().in(this)
									query
										.select('#' + cid)
										.fields({
											node: true,
											size: true
										})
										.exec(res => {
											if (res[0]) {
												const canvas = res[0].node;
												const ctx = canvas.getContext('2d');
												cfu.option[cid].context = ctx;
												canvas.width = data.width * this.pixel;
												canvas.height = data.height * this.pixel;
												canvas._width = data.width * this.pixel;
												canvas._height = data.height * this.pixel;
												cfu.option[cid].rotateLock = cfu.option[cid].rotate;
												if (cfu.instance[cid]) {
													cfu.option[cid].context.restore();
													cfu.option[cid].context.save();
													this._updataUChart(cid)
												} else {
													setTimeout(() => {
														this._newChart(cid)
													}, 100)
												}
											} else {
												this.showchart = false;
												this.mixinDatacomErrorMessage =
													'参数错误：开启2d模式后，未获取到dom节点，canvas-id:' + cid;
											}
										});
								} else {
									if (this.inAli) {
										cfu.option[cid].rotateLock = cfu.option[cid].rotate;
									}
									cfu.option[cid].context = uni.createCanvasContext(cid, this);
									if (cfu.instance[cid]) {
										this._updataUChart(cid)
									} else {
										setTimeout(() => {
											this._newChart(cid)
										}, 100)
									}
								}
							})

						} else {
							this.mixinDatacomLoading = false;
							this.showchart = false;
							if (this.reshow == true) {
								this.mixinDatacomErrorMessage = '布局错误：未获取到父元素宽高尺寸！canvas-id:' + cid;
							}
						}
					})
					.exec();
			},
			saveImage() {
				uni.canvasToTempFilePath({
					canvasId: this.cid,
					success: res => {
						//#ifdef H5
						var a = document.createElement("a");
						a.href = res.tempFilePath;
						a.download = this.cid;
						a.target = '_blank'
						a.click();
						//#endif
						//#ifndef H5
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								uni.showToast({
									title: '保存成功',
									duration: 2000
								});
							}
						});
						//#endif
					}
				}, this);
			},
			// #ifndef APP-VUE || H5
			_newChart(cid) {
				if (this.mixinDatacomLoading == true) {
					return;
				}
				this.showchart = true;
				cfu.instance[cid] = new uChartsMp(cfu.option[cid]);
				cfu.instance[cid].addEventListener('renderComplete', () => {
					this.emitMsg({
						name: 'complete',
						params: {
							type: "complete",
							complete: true,
							id: cid
						}
					});
					cfu.instance[cid].delEventListener('renderComplete')
				});
				cfu.instance[cid].addEventListener('scrollLeft', () => {
					this.emitMsg({
						name: 'scrollLeft',
						params: {
							type: "scrollLeft",
							scrollLeft: true,
							id: cid
						}
					});
				});
				cfu.instance[cid].addEventListener('scrollRight', () => {
					this.emitMsg({
						name: 'scrollRight',
						params: {
							type: "scrollRight",
							scrollRight: true,
							id: cid
						}
					});
				});
			},
			_updataUChart(cid) {
				cfu.instance[cid].updateData(cfu.option[cid])
			},
			_tooltipDefault(item, category, index, opts) {
				if (category) {
					let data = item.data
					if (typeof item.data === "object") {
						data = item.data.value
					}
					return category + ':' + data;
				} else {
					if (item.properties && item.properties.name) {
						return item.properties.name;
					} else {
						return item.name + ':' + item.data;
					}
				}
			},
			_showTooltip(e) {
				let cid = this.cid
				let tc = cfu.option[cid].tooltipCustom
				if (tc && tc !== undefined && tc !== null) {
					let offset = undefined;
					if (tc.x >= 0 && tc.y >= 0) {
						offset = {
							x: tc.x,
							y: tc.y + 10
						};
					}
					cfu.instance[cid].showToolTip(e, {
						index: tc.index,
						offset: offset,
						textList: tc.textList,
						formatter: (item, category, index, opts) => {
							if (typeof cfu.option[cid].tooltipFormat === 'string' && cfu.formatter[cfu.option[
									cid].tooltipFormat]) {
								return cfu.formatter[cfu.option[cid].tooltipFormat](item, category, index,
									opts);
							} else {
								return this._tooltipDefault(item, category, index, opts);
							}
						}
					});
				} else {
					cfu.instance[cid].showToolTip(e, {
						formatter: (item, category, index, opts) => {
							if (typeof cfu.option[cid].tooltipFormat === 'string' && cfu.formatter[cfu.option[
									cid].tooltipFormat]) {
								return cfu.formatter[cfu.option[cid].tooltipFormat](item, category, index,
									opts);
							} else {
								return this._tooltipDefault(item, category, index, opts);
							}
						}
					});
				}
			},
			_tap(e, move) {
				let cid = this.cid
				let currentIndex = null;
				let legendIndex = null;
				if (this.inScrollView === true || this.inAli) {
					let chartdom = uni
						.createSelectorQuery()
						// #ifndef MP-ALIPAY
						.in(this)
						.select('#ChartBoxId' + cid)
						// #endif
						// #ifdef MP-ALIPAY
						.select('#' + this.cid)
						// #endif
						.boundingClientRect(data => {
							e.changedTouches = [];
							if (this.inAli) {
								e.changedTouches.unshift({
									x: e.detail.clientX - data.left,
									y: e.detail.clientY - data.top
								});
							} else {
								e.changedTouches.unshift({
									x: e.detail.x - data.left,
									y: e.detail.y - data.top - this.pageScrollTop
								});
							}
							if (move) {
								if (this.tooltipShow === true) {
									this._showTooltip(e);
								}
							} else {
								currentIndex = cfu.instance[cid].getCurrentDataIndex(e);
								legendIndex = cfu.instance[cid].getLegendDataIndex(e);
								cfu.instance[cid].touchLegend(e);
								if (this.tooltipShow === true) {
									this._showTooltip(e);
								}
								this.emitMsg({
									name: 'getIndex',
									params: {
										type: "getIndex",
										event: {
											x: e.detail.x - data.left,
											y: e.detail.y - data.top
										},
										currentIndex: currentIndex,
										legendIndex: legendIndex,
										id: cid
									}
								});
							}
						})
						.exec();
				} else {
					if (move) {
						if (this.tooltipShow === true) {
							this._showTooltip(e);
						}
					} else {
						e.changedTouches = [];
						e.changedTouches.unshift({
							x: e.detail.x - e.currentTarget.offsetLeft,
							y: e.detail.y - e.currentTarget.offsetTop
						});
						currentIndex = cfu.instance[cid].getCurrentDataIndex(e);
						legendIndex = cfu.instance[cid].getLegendDataIndex(e);
						cfu.instance[cid].touchLegend(e);
						if (this.tooltipShow === true) {
							this._showTooltip(e);
						}
						this.emitMsg({
							name: 'getIndex',
							params: {
								type: "getIndex",
								event: {
									x: e.detail.x,
									y: e.detail.y - e.currentTarget.offsetTop
								},
								currentIndex: currentIndex,
								legendIndex: legendIndex,
								id: cid
							}
						});
					}
				}
			},
			_touchStart(e) {
				let cid = this.cid
				lastMoveTime = Date.now();
				if (cfu.option[cid].enableScroll === true) {
					cfu.instance[cid].scrollStart(e);
				}
				this.emitMsg({
					name: 'getTouchStart',
					params: {
						type: "touchStart",
						event: e.changedTouches[0],
						id: cid
					}
				});
			},
			_touchMove(e) {
				let cid = this.cid
				let currMoveTime = Date.now();
				let duration = currMoveTime - lastMoveTime;
				if (duration < Math.floor(1000 / 60)) return; //每秒60帧
				lastMoveTime = currMoveTime;
				if (cfu.option[cid].enableScroll === true) {
					cfu.instance[cid].scroll(e);
				}
				this.emitMsg({
					name: 'getTouchMove',
					params: {
						type: "touchMove",
						event: e.changedTouches[0],
						id: cid
					}
				});
				if (this.ontap === true && cfu.option[cid].enableScroll === false && this.onmovetip === true) {
					this._tap(e, true)
				}
			},
			_touchEnd(e) {
				let cid = this.cid
				if (cfu.option[cid].enableScroll === true) {
					cfu.instance[cid].scrollEnd(e);
				}
				this.emitMsg({
					name: 'getTouchEnd',
					params: {
						type: "touchEnd",
						event: e.changedTouches[0],
						id: cid
					}
				});
				if (this.ontap === true && cfu.option[cid].enableScroll === false && this.onmovetip === true) {
					this._tap(e, true)
				}
			},
			// #endif
			_error(e) {
				this.mixinDatacomErrorMessage = e.detail.errMsg;
			},
			emitMsg(msg) {
				this.$emit(msg.name, msg.params);
			},
			getRenderType() {
				//防止如果开启echarts且父元素为v-if的情况renderjs监听不到prop变化的问题
				if (this.echarts === true && this.mixinDatacomLoading === false) {
					this.beforeInit()
				}
			},
			toJSON() {
				return this
			}
		}
	};
</script>
<style scoped>
	.chartsview {
		width: 100%;
		height: auto;
		display: flex;
		flex: 1;
		margin-top: 15px;
		justify-content: center;
		align-items: center;
	}
</style>