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

<!-- 
 * qiun-data-charts 秋云高性能跨全端图表组件
 * 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">
		<view v-if="mixinDatacomLoading">
			<!-- 自定义加载状态，请改这里 -->
			<qiun-loading :loadingType="loadingType" />
		</view>
		<view v-if="mixinDatacomErrorMessage && errorShow" @tap="reloading">
			<!-- 自定义错误提示，请改这里 -->
			<qiun-error :errorMessage="errorMessage" />
		</view>
		<!-- APP和H5采用renderjs渲染图表 -->
		<!-- #ifdef APP-VUE || H5 -->
		<block v-if="echarts">
			<view :style="{ background: background }" style="width: 100%;height: 100%;" :data-directory="directory"
				:id="'EC'+cid" :prop="echartsOpts" :change:prop="rdcharts.ecinit" :resize="echartsResize"
				:change:resize="rdcharts.ecresize" v-show="showchart" />
		</block>
		<block v-else>
			<view v-on:tap="rdcharts.tap" v-on:mousemove="rdcharts.mouseMove" v-on:mousedown="rdcharts.mouseDown"
				v-on:mouseup="rdcharts.mouseUp" v-on:touchstart="rdcharts.touchStart"
				v-on:touchmove="rdcharts.touchMove" v-on:touchend="rdcharts.touchEnd" :id="'UC'+cid" :prop="uchartsOpts"
				:change:prop="rdcharts.ucinit">
				<canvas :id="cid" :canvasId="cid"
					:style="{ width: cWidth + 'px', height: cHeight + 'px', background: background }"
					:disable-scroll="disableScroll" @error="_error" v-show="showchart" />
			</view>
		</block>
		<!-- #endif -->
		<!-- 支付宝小程序 -->
		<!-- #ifdef MP-ALIPAY -->
		<block v-if="ontouch">
			<canvas :id="cid" :canvasId="cid" :width="cWidth * pixel" :height="cHeight * pixel"
				:style="{ width: cWidth + 'px', height: cHeight + 'px', background: background }"
				:disable-scroll="disScroll" @tap="_tap" @touchstart="_touchStart" @touchmove="_touchMove"
				@touchend="_touchEnd" @error="_error" v-show="showchart" />
		</block>
		<block v-if="!ontouch">
			<canvas :id="cid" :canvasId="cid" :width="cWidth * pixel" :height="cHeight * pixel"
				:style="{ width: cWidth + 'px', height: cHeight + 'px', background: background }"
				:disable-scroll="disScroll" @tap="_tap" @error="_error" v-show="showchart" />
		</block>
		<!-- #endif -->
		<!-- 其他小程序通过vue渲染图表 -->
		<!-- #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-TOUTIAO || MP-KUAISHOU || MP-LARK || MP-JD || MP-360 -->
		<block v-if="type2d">
			<view v-if="ontouch" @tap="_tap">
				<canvas :id="cid" :canvasId="cid"
					:style="{ width: cWidth + 'px', height: cHeight + 'px', 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 + 'px', height: cHeight + 'px', 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 + 'px', height: cHeight + 'px', background: background }"
					@touchstart="_touchStart" @touchmove="_touchMove" @touchend="_touchEnd" :disable-scroll="disScroll"
					@error="_error" v-if="showchart" />
			</view>
			<view v-if="!ontouch">
				<canvas :id="cid" :canvasId="cid"
					:style="{ width: cWidth + 'px', height: cHeight + 'px', background: background }"
					:disable-scroll="disScroll" @tap="_tap" @error="_error" v-if="showchart" />
			</view>
		</block>
		<!-- #endif -->
	</view>
</template>

<script>
	import uCharts from '../../js_sdk/u-charts/u-charts.js';
	import cfu from '../../js_sdk/u-charts/config-ucharts.js';
	// #ifdef APP-VUE || H5
	import cfe from '../../js_sdk/u-charts/config-echarts.js';
	// #endif

	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.hasOwnProperty(key) && 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: 'rgba(0,0,0,0)'
			},
			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
			},
			optsWatch: {
				type: Boolean,
				default: true
			},
			onzoom: {
				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: {
				type: Object,
				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: '/'
			},
			tapLegend: {
				type: Boolean,
				default: true
			},
			menus: {
				type: Array,
				default () {
					return []
				}
			}
		},
		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: 375,
				cHeight: 250,
				showchart: false,
				echarts: false,
				echartsResize: {
					state: false
				},
				uchartsOpts: {},
				echartsOpts: {},
				drawData: {},
				lastDrawTime: null,
			};
		},
		created() {
			this.cid = this.canvasId
			if (this.canvasId == 'uchartsid' || this.canvasId == '') {
				let t = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
				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' || systemInfo.platform === 'mac') {
				this.inWin = true;
			}
			// #ifdef MP-WEIXIN
			this.inWx = true;
			if (this.canvas2d === false || systemInfo.platform === 'windows' || systemInfo.platform === 'mac') {
				this.type2d = false;
			} else {
				this.type2d = true;
				this.pixel = systemInfo.pixelRatio;
			}
			// #endif
			//非微信小程序端强制关闭canvas2d模式
			// #ifndef MP-WEIXIN
			this.type2d = false;
			// #endif
			// #ifdef  MP-TOUTIAO || MP-LARK || MP-ALIPAY
			this.type2d = this.canvas2d;
			// #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.$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.state = !_this.echartsResize.state;
					} else {
						_this.resizeHandler();
					}
				}, time)
			);
			// #endif
		},
		destroyed() {
			if (this.echarts === true) {
				delete cfe.option[this.cid]
				delete cfe.instance[this.cid]
			} else {
				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)) {
							this._clearChart();
							if (val.series && val.series.length > 0) {
								this.beforeInit();
							} else {
								this.mixinDatacomLoading = true;
								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.optsWatch ==
							true) {
							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.state = !this.echartsResize.state;
						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
				if (this.echarts === true) {
					needCategories = cfe.categories.includes(this.type)
				} else {
					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.echarts === true) {
					cfe.option[cid] = deepCloneAssign({}, this.eopts);
					cfe.option[cid].id = cid;
					cfe.option[cid].type = this.type;
				} else {
					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;
					if (this.echarts === true) {
						cfe.option[cid].chartData = newData;
						this.$nextTick(() => {
							this.init()
						})
					} else {
						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.echarts !== true && cfu.option[cid] && cfu.option[cid].context) {
					const ctx = cfu.option[cid].context;
					if (typeof ctx === "object" && !!!cfu.option[cid].update) {
						ctx.clearRect(0, 0, this.cWidth * this.pixel, this.cHeight * this.pixel);
						ctx.draw();
					}
				}
			},
			init() {
				let cid = this.cid
				let chartdom = uni
					.createSelectorQuery()
					// #ifndef MP-ALIPAY
					.in(this)
					// #endif
					.select('#ChartBoxId' + cid)
					.boundingClientRect(data => {
						if (data.width > 0 && data.height > 0) {
							this.mixinDatacomLoading = false;
							this.showchart = true;
							this.lastDrawTime = Date.now();
							this.cWidth = data.width;
							this.cHeight = data.height;
							if (this.echarts !== true) {
								cfu.option[cid].background = this.background == 'rgba(0,0,0,0)' ? '#FFFFFF' : this
									.background;
								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].onzoom = this.onzoom;
								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].tapLegend = this.tapLegend;
							}
							//如果是H5或者App端，采用renderjs渲染图表
							if (this.inH5 || this.inApp) {
								if (this.echarts == true) {
									cfe.option[cid].ontap = this.ontap;
									cfe.option[cid].onmouse = this.openmouse;
									cfe.option[cid].tooltipShow = this.tooltipShow;
									cfe.option[cid].tooltipFormat = this.tooltipFormat;
									cfe.option[cid].tooltipCustom = this.tooltipCustom;
									cfe.option[cid].lastDrawTime = this.lastDrawTime;
									this.echartsOpts = deepCloneAssign({}, cfe.option[cid]);
								} else {
									cfu.option[cid].rotateLock = cfu.option[cid].rotate;
									this.uchartsOpts = deepCloneAssign({}, cfu.option[cid]);
								}
								//如果是小程序端，采用uCharts渲染
							} else {
								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;
													cfu.option[cid].rotateLock = cfu.option[cid].rotate;
													if (cfu.instance[cid] && cfu.option[cid] && cfu.option[
															cid].update === true) {
														this._updataUChart(cid)
													} else {
														canvas.width = data.width * this.pixel;
														canvas.height = data.height * this.pixel;
														canvas._width = data.width * this.pixel;
														canvas._height = data.height * this.pixel;
														setTimeout(() => {
															cfu.option[cid].context.restore();
															cfu.option[cid].context.save();
															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] && cfu.option[cid] && cfu.option[cid].update ===
											true) {
											this._updataUChart(cid)
										} else {
											setTimeout(() => {
												cfu.option[cid].context.restore();
												cfu.option[cid].context.save();
												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);
			},
			getImage() {
				if (this.type2d == false) {
					uni.canvasToTempFilePath({
						canvasId: this.cid,
						success: res => {
							this.emitMsg({
								name: 'getImage',
								params: {
									type: "getImage",
									base64: res.tempFilePath
								}
							});
						}
					}, this);
				} else {
					const query = uni.createSelectorQuery().in(this)
					query
						.select('#' + this.cid)
						.fields({
							node: true,
							size: true
						})
						.exec(res => {
							if (res[0]) {
								const canvas = res[0].node;
								this.emitMsg({
									name: 'getImage',
									params: {
										type: "getImage",
										base64: canvas.toDataURL('image/png')
									}
								});
							}
						});
				}
			},
			// #ifndef APP-VUE || H5
			_newChart(cid) {
				if (this.mixinDatacomLoading == true) {
					return;
				}
				this.showchart = true;
				cfu.instance[cid] = new uCharts(cfu.option[cid]);
				cfu.instance[cid].addEventListener('renderComplete', () => {
					this.emitMsg({
						name: 'complete',
						params: {
							type: "complete",
							complete: true,
							id: cid,
							opts: cfu.instance[cid].opts
						}
					});
					cfu.instance[cid].delEventListener('renderComplete')
				});
				cfu.instance[cid].addEventListener('scrollLeft', () => {
					this.emitMsg({
						name: 'scrollLeft',
						params: {
							type: "scrollLeft",
							scrollLeft: true,
							id: cid,
							opts: cfu.instance[cid].opts
						}
					});
				});
				cfu.instance[cid].addEventListener('scrollRight', () => {
					this.emitMsg({
						name: 'scrollRight',
						params: {
							type: "scrollRight",
							scrollRight: true,
							id: cid,
							opts: cfu.instance[cid].opts
						}
					});
				});
			},
			_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 + ' ' + item.name + ':' + 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);
								if (this.tapLegend === true) {
									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,
										opts: cfu.instance[cid].opts
									}
								});
							}
						})
						.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);
						if (this.tapLegend === true) {
							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,
								opts: cfu.instance[cid].opts
							}
						});
					}
				}
			},
			_touchStart(e) {
				let cid = this.cid
				lastMoveTime = Date.now();
				if (cfu.option[cid].enableScroll === true && e.touches.length == 1) {
					cfu.instance[cid].scrollStart(e);
				}
				this.emitMsg({
					name: 'getTouchStart',
					params: {
						type: "touchStart",
						event: e.changedTouches[0],
						id: cid,
						opts: cfu.instance[cid].opts
					}
				});
			},
			_touchMove(e) {
				let cid = this.cid
				let currMoveTime = Date.now();
				let duration = currMoveTime - lastMoveTime;
				let touchMoveLimit = cfu.option[cid].touchMoveLimit || 24;
				if (duration < Math.floor(1000 / touchMoveLimit)) return; //每秒60帧
				lastMoveTime = currMoveTime;
				if (cfu.option[cid].enableScroll === true && e.changedTouches.length == 1) {
					cfu.instance[cid].scroll(e);
				}
				if (this.ontap === true && cfu.option[cid].enableScroll === false && this.onmovetip === true) {
					this._tap(e, true)
				}
				if (this.ontouch === true && cfu.option[cid].enableScroll === true && this.onzoom === true && e
					.changedTouches.length == 2) {
					cfu.instance[cid].dobuleZoom(e);
				}
				this.emitMsg({
					name: 'getTouchMove',
					params: {
						type: "touchMove",
						event: e.changedTouches[0],
						id: cid,
						opts: cfu.instance[cid].opts
					}
				});
			},
			_touchEnd(e) {
				let cid = this.cid
				if (cfu.option[cid].enableScroll === true && e.touches.length == 0) {
					cfu.instance[cid].scrollEnd(e);
				}
				this.emitMsg({
					name: 'getTouchEnd',
					params: {
						type: "touchEnd",
						event: e.changedTouches[0],
						id: cid,
						opts: cfu.instance[cid].opts
					}
				});
				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>

<!-- #ifdef APP-VUE || H5 -->
<script module="rdcharts" lang="renderjs">
	import uChartsRD from '../../js_sdk/u-charts/u-charts.js';
	import cfu from '../../js_sdk/u-charts/config-ucharts.js';
	import cfe from '../../js_sdk/u-charts/config-echarts.js';

	var that = {};
	var rootdom = null;

	function rddeepCloneAssign(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' ? rddeepCloneAssign(Array.isArray(args[
						i][key]) ? [] : {}, origin[key], args[i][key]) : args[i][key];
				}
			}
		}
		return origin;
	}

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

	export default {
		data() {
			return {
				rid: null
			}
		},
		mounted() {
			rootdom = {
				top: 0,
				left: 0
			}
			// #ifdef H5
			let dm = document.querySelectorAll('uni-main')[0]
			if (dm === undefined) {
				dm = document.querySelectorAll('uni-page-wrapper')[0]
			}
			rootdom = {
				top: dm.offsetTop,
				left: dm.offsetLeft
			}
			// #endif
			setTimeout(() => {
				if (this.rid === null) {
					this.$ownerInstance && this.$ownerInstance.callMethod('getRenderType')
				}
			}, 200)
		},
		destroyed() {
			delete cfu.option[this.rid]
			delete cfu.instance[this.rid]
			delete cfe.option[this.rid]
			delete cfe.instance[this.rid]
		},
		methods: {
			//==============以下是ECharts的方法====================
			ecinit(newVal, oldVal, owner, instance) {
				let cid = JSON.stringify(newVal.id)
				this.rid = cid
				that[cid] = this.$ownerInstance || instance
				let eopts = JSON.parse(JSON.stringify(newVal))
				let type = eopts.type;
				//载入并覆盖默认配置
				if (type && cfe.type.includes(type)) {
					cfe.option[cid] = rddeepCloneAssign({}, cfe[type], eopts);
				} else {
					cfe.option[cid] = rddeepCloneAssign({}, eopts);
				}
				let newData = eopts.chartData;
				if (newData) {
					//挂载categories和series
					if (cfe.option[cid].xAxis && cfe.option[cid].xAxis.type && cfe.option[cid].xAxis.type === 'category') {
						cfe.option[cid].xAxis.data = newData.categories
					}
					if (cfe.option[cid].yAxis && cfe.option[cid].yAxis.type && cfe.option[cid].yAxis.type === 'category') {
						cfe.option[cid].yAxis.data = newData.categories
					}
					cfe.option[cid].series = []
					for (var i = 0; i < newData.series.length; i++) {
						cfe.option[cid].seriesTemplate = cfe.option[cid].seriesTemplate ? cfe.option[cid].seriesTemplate :
						{}
						let Template = rddeepCloneAssign({}, cfe.option[cid].seriesTemplate, newData.series[i])
						cfe.option[cid].series.push(Template)
					}
				}

				if (typeof window.echarts === 'object') {
					this.newEChart()
				} else {
					const script = document.createElement('script')
					// #ifdef APP-VUE
					script.src = './uni_modules/qiun-data-charts/static/app-plus/echarts.min.js'
					// #endif
					// #ifdef H5
					const rooturl = window.location.origin
					const directory = instance.getDataset().directory
					script.src = rooturl + directory + 'uni_modules/qiun-data-charts/static/h5/echarts.min.js'
					// #endif
					script.onload = this.newEChart
					document.head.appendChild(script)
				}
			},
			ecresize(newVal, oldVal, owner, instance) {
				if (cfe.instance[this.rid]) {
					cfe.instance[this.rid].resize()
				}
			},
			newEChart() {
				let cid = this.rid
				if (cfe.instance[cid] === undefined) {
					cfe.instance[cid] = echarts.init(that[cid].$el.children[0])
					//ontap开启后才触发click事件
					if (cfe.option[cid].ontap === true) {
						cfe.instance[cid].on('click', resdata => {
							let event = JSON.parse(JSON.stringify({
								x: resdata.event.offsetX,
								y: resdata.event.offsetY
							}))
							that[cid].callMethod('emitMsg', {
								name: "getIndex",
								params: {
									type: "getIndex",
									event: event,
									currentIndex: resdata.dataIndex,
									value: resdata.data,
									seriesName: resdata.seriesName,
									id: cid
								}
							})
						})
						// 增加ECharts的highlight消息，实现按下移动返回索引功能。add by onefish 创建于 2021-12-11 09:50
						cfe.instance[cid].on('highlight', resdata => {
							that[cid].callMethod('emitMsg', {
								name: "getHighlight",
								params: {
									type: "highlight",
									res: resdata,
									id: cid
								}
							})
						})
					}
					this.updataEChart(cid, cfe.option[cid])
				} else {
					this.updataEChart(cid, cfe.option[cid])
				}
			},
			updataEChart(cid, option) {
				//替换option内format属性为formatter的预定义方法
				option = rdformatterAssign(option, cfe.formatter)
				if (option.tooltip) {
					option.tooltip.show = option.tooltipShow ? true : false;
					option.tooltip.position = this.tooltipPosition()
					//tooltipFormat方法，替换组件的tooltipFormat为config-echarts.js内对应的方法
					if (typeof option.tooltipFormat === 'string' && cfe.formatter[option.tooltipFormat]) {
						option.tooltip.formatter = option.tooltip.formatter ? option.tooltip.formatter : cfe.formatter[
							option.tooltipFormat]
					}
				}
				// 颜色渐变添加的方法
				if (option.series) {
					for (let i in option.series) {
						let linearGradient = option.series[i].linearGradient
						if (linearGradient) {
							option.series[i].color = new echarts.graphic.LinearGradient(linearGradient[0], linearGradient[
								1], linearGradient[2], linearGradient[3], linearGradient[4])
						}
					}
				}
				cfe.instance[cid].setOption(option, option.notMerge)
				cfe.instance[cid].on('finished', function() {
					that[cid].callMethod('emitMsg', {
						name: "complete",
						params: {
							type: "complete",
							complete: true,
							id: cid
						}
					})
					if (cfe.instance[cid]) {
						cfe.instance[cid].off('finished')
					}
				});

				//修复init初始化实例获取宽高不正确问题
				if (
					typeof that[cid].$el.children[0].clientWidth != 'undefined' &&
					(
						Math.abs(that[cid].$el.children[0].clientWidth - cfe.instance[cid].getWidth()) > 3 ||
						Math.abs(that[cid].$el.children[0].clientHeight - cfe.instance[cid].getHeight()) > 3
					)
				) {
					this.ecresize();
				}
			},
			tooltipPosition() {
				return (point, params, dom, rect, size) => {
					let x = point[0]
					let y = point[1]
					let viewWidth = size.viewSize[0]
					let viewHeight = size.viewSize[1]
					let boxWidth = size.contentSize[0]
					let boxHeight = size.contentSize[1]
					let posX = x + 30
					let posY = y + 30
					if (posX + boxWidth > viewWidth) {
						posX = x - boxWidth - 30
					}
					if (posY + boxHeight > viewHeight) {
						posY = y - boxHeight - 30
					}
					return [posX, posY]
				}
			},
			//==============以下是uCharts的方法====================
			ucinit(newVal, oldVal, owner, instance) {
				if (JSON.stringify(newVal) == JSON.stringify(oldVal)) {
					return;
				}
				if (!newVal.canvasId) {
					return;
				}
				let cid = JSON.parse(JSON.stringify(newVal.canvasId))
				this.rid = cid
				that[cid] = this.$ownerInstance || instance
				cfu.option[cid] = JSON.parse(JSON.stringify(newVal))
				cfu.option[cid] = rdformatterAssign(cfu.option[cid], cfu.formatter)
				let canvasdom = document.getElementById(cid)
				if (canvasdom && canvasdom.children[0]) {
					cfu.option[cid].context = canvasdom.children[0].getContext("2d")
					if (cfu.instance[cid] && cfu.option[cid] && cfu.option[cid].update === true) {
						this.updataUChart()
					} else {
						setTimeout(() => {
							cfu.option[cid].context.restore();
							cfu.option[cid].context.save();
							this.newUChart()
						}, 100)
					}
				}
			},
			newUChart() {
				let cid = this.rid
				cfu.instance[cid] = new uChartsRD(cfu.option[cid])
				cfu.instance[cid].addEventListener('renderComplete', () => {
					that[cid].callMethod('emitMsg', {
						name: "complete",
						params: {
							type: "complete",
							complete: true,
							id: cid,
							opts: cfu.instance[cid].opts
						}
					})
					cfu.instance[cid].delEventListener('renderComplete')
				});
				cfu.instance[cid].addEventListener('scrollLeft', () => {
					that[cid].callMethod('emitMsg', {
						name: "scrollLeft",
						params: {
							type: "scrollLeft",
							scrollLeft: true,
							id: cid,
							opts: cfu.instance[cid].opts
						}
					})
				});
				cfu.instance[cid].addEventListener('scrollRight', () => {
					that[cid].callMethod('emitMsg', {
						name: "scrollRight",
						params: {
							type: "scrollRight",
							scrollRight: true,
							id: cid,
							opts: cfu.instance[cid].opts
						}
					})
				});
			},
			updataUChart() {
				let cid = this.rid
				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 + ' ' + item.name + ':' + data;
				} else {
					if (item.properties && item.properties.name) {
						return item.properties.name;
					} else {
						return item.name + ':' + item.data;
					}
				}
			},
			showTooltip(e, 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) {
				let cid = this.rid
				let ontap = cfu.option[cid].ontap
				let tooltipShow = cfu.option[cid].tooltipShow
				let tapLegend = cfu.option[cid].tapLegend
				if (ontap == false) return;
				let currentIndex = null
				let legendIndex = null
				let rchartdom = document.getElementById('UC' + cid).getBoundingClientRect()
				let tmpe = {}
				if (e.detail.x) { //tap或者click的事件
					tmpe = {
						x: e.detail.x - rchartdom.left,
						y: e.detail.y - rchartdom.top + rootdom.top
					}
				} else { //mouse的事件
					tmpe = {
						x: e.clientX - rchartdom.left,
						y: e.clientY - rchartdom.top + rootdom.top
					}
				}
				e.changedTouches = [];
				e.changedTouches.unshift(tmpe)
				currentIndex = cfu.instance[cid].getCurrentDataIndex(e)
				legendIndex = cfu.instance[cid].getLegendDataIndex(e)
				if (tapLegend === true) {
					cfu.instance[cid].touchLegend(e);
				}
				if (tooltipShow == true) {
					this.showTooltip(e, cid)
				}
				that[cid].callMethod('emitMsg', {
					name: "getIndex",
					params: {
						type: "getIndex",
						event: tmpe,
						currentIndex: currentIndex,
						legendIndex: legendIndex,
						id: cid,
						opts: cfu.instance[cid].opts
					}
				})
			},
			touchStart(e) {
				let cid = this.rid
				let ontouch = cfu.option[cid].ontouch
				if (ontouch == false) return;
				if (cfu.option[cid].enableScroll === true && e.touches.length == 1) {
					cfu.instance[cid].scrollStart(e);
				}
				that[cid].callMethod('emitMsg', {
					name: "getTouchStart",
					params: {
						type: "touchStart",
						event: e.changedTouches[0],
						id: cid,
						opts: cfu.instance[cid].opts
					}
				})
			},
			touchMove(e) {
				let cid = this.rid
				let ontouch = cfu.option[cid].ontouch
				if (ontouch == false) return;
				if (cfu.option[cid].enableScroll === true && e.changedTouches.length == 1) {
					cfu.instance[cid].scroll(e);
				}
				if (cfu.option[cid].ontap === true && cfu.option[cid].enableScroll === false && cfu.option[cid]
					.onmovetip === true) {
					let rchartdom = document.getElementById('UC' + cid).getBoundingClientRect()
					let tmpe = {
						x: e.changedTouches[0].clientX - rchartdom.left,
						y: e.changedTouches[0].clientY - rchartdom.top + rootdom.top
					}
					e.changedTouches.unshift(tmpe)
					if (cfu.option[cid].tooltipShow === true) {
						this.showTooltip(e, cid)
					}
				}
				if (ontouch === true && cfu.option[cid].enableScroll === true && cfu.option[cid].onzoom === true && e
					.changedTouches.length == 2) {
					cfu.instance[cid].dobuleZoom(e);
				}
				that[cid].callMethod('emitMsg', {
					name: "getTouchMove",
					params: {
						type: "touchMove",
						event: e.changedTouches[0],
						id: cid,
						opts: cfu.instance[cid].opts
					}
				})
			},
			touchEnd(e) {
				let cid = this.rid
				let ontouch = cfu.option[cid].ontouch
				if (ontouch == false) return;
				if (cfu.option[cid].enableScroll === true && e.touches.length == 0) {
					cfu.instance[cid].scrollEnd(e);
				}
				that[cid].callMethod('emitMsg', {
					name: "getTouchEnd",
					params: {
						type: "touchEnd",
						event: e.changedTouches[0],
						id: cid,
						opts: cfu.instance[cid].opts
					}
				})
			},
			mouseDown(e) {
				let cid = this.rid
				let onmouse = cfu.option[cid].onmouse
				if (onmouse == false) return;
				let rchartdom = document.getElementById('UC' + cid).getBoundingClientRect()
				let tmpe = {}
				tmpe = {
					x: e.clientX - rchartdom.left,
					y: e.clientY - rchartdom.top + rootdom.top
				}
				e.changedTouches = [];
				e.changedTouches.unshift(tmpe)
				cfu.instance[cid].scrollStart(e)
				cfu.option[cid].mousedown = true;
				that[cid].callMethod('emitMsg', {
					name: "getTouchStart",
					params: {
						type: "mouseDown",
						event: tmpe,
						id: cid,
						opts: cfu.instance[cid].opts
					}
				})
			},
			mouseMove(e) {
				let cid = this.rid
				let onmouse = cfu.option[cid].onmouse
				let tooltipShow = cfu.option[cid].tooltipShow
				if (onmouse == false) return;
				let rchartdom = document.getElementById('UC' + cid).getBoundingClientRect()
				let tmpe = {}
				tmpe = {
					x: e.clientX - rchartdom.left,
					y: e.clientY - rchartdom.top + rootdom.top
				}
				e.changedTouches = [];
				e.changedTouches.unshift(tmpe)
				if (cfu.option[cid].mousedown) {
					cfu.instance[cid].scroll(e)
					that[cid].callMethod('emitMsg', {
						name: "getTouchMove",
						params: {
							type: "mouseMove",
							event: tmpe,
							id: cid,
							opts: cfu.instance[cid].opts
						}
					})
				} else if (cfu.instance[cid]) {
					if (tooltipShow == true) {
						this.showTooltip(e, cid)
					}
				}
			},
			mouseUp(e) {
				let cid = this.rid
				let onmouse = cfu.option[cid].onmouse
				if (onmouse == false) return;
				let rchartdom = document.getElementById('UC' + cid).getBoundingClientRect()
				let tmpe = {}
				tmpe = {
					x: e.clientX - rchartdom.left,
					y: e.clientY - rchartdom.top + rootdom.top
				}
				e.changedTouches = [];
				e.changedTouches.unshift(tmpe)
				cfu.instance[cid].scrollEnd(e)
				cfu.option[cid].mousedown = false;
				that[cid].callMethod('emitMsg', {
					name: "getTouchEnd",
					params: {
						type: "mouseUp",
						event: tmpe,
						id: cid,
						opts: cfu.instance[cid].opts
					}
				})
			},
		}
	}
</script>
<!-- #endif -->

<style scoped>
	.chartsview {
		width: 100%;
		height: 100%;
		display: flex;
		flex: 1;
		justify-content: center;
		align-items: center;
		z-index: 0;
	}
</style>