From d1448cb0ef10f358bb7bddb4e1ec268515e0b787 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 15 七月 2025 11:46:57 +0800
Subject: [PATCH] 项目初始化
---
uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue | 1607 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 1,607 insertions(+), 0 deletions(-)
diff --git a/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue b/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue
new file mode 100644
index 0000000..14e4365
--- /dev/null
+++ b/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue
@@ -0,0 +1,1607 @@
+<!--
+ * 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鍜孒5閲囩敤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-360 || MP-BAIDU || MP-QQ || MP-TOUTIAO || MP-WEIXIN || MP-KUAISHOU || MP-LARK || MP-JD -->
+ <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;
+}
+
+// 鏃堕棿杞崲鍑芥暟锛屼负浜嗗尮閰島niClinetDB璇诲彇鍑虹殑鏃堕棿涓巆ategories涓嶅悓
+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: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
+ //闈炲井淇″皬绋嬪簭绔己鍒跺叧闂璫anvas2d妯″紡
+ // #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 = !_this.echartsResize;
+ } 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 = '鍙傛暟閿欒锛歝hartData鏁版嵁绫诲瀷閿欒';
+ }
+ },
+ 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 = '鍙傛暟閿欒锛歰pts鏁版嵁绫诲瀷閿欒';
+ }
+ },
+ 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 = '鍙傛暟閿欒锛歟opts鏁版嵁绫诲瀷閿欒';
+ }
+ },
+ 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) {
+ //鎷疯礉涓�涓媍hartData锛屼负浜唎pts鍙樻洿鍚庣粺涓�鏁版嵁鏉ユ簮
+ 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鐨刢ategories
+ 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)
+ }
+ //鍚﹀垯浠庣粨鏋滀腑鍘婚噸骞舵嫾鎺ategories
+ }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: [] }];
+ //濡傛灉鏄渶瑕乧ategories鐨勫浘琛ㄧ被鍨�
+ 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++) {
+ //濡傛灉鏈塩ategories
+ 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
+ //鎷疯礉涓�涓媍hartData锛屼负浜唎pts鍙樻洿鍚庣粺涓�鏁版嵁鏉ユ簮
+ 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鎴杄opts
+ 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 = '鍙傛暟閿欒锛歱rops鍙傛暟涓璽ype绫诲瀷涓嶆纭�';
+ }
+ }
+ //鎸傝浇categories鍜宻eries
+ 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.echrts !== 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.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.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;
+ }
+ //濡傛灉鏄疕5鎴栬�匒pp绔紝閲囩敤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鑺傜偣锛宑anvas-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 = '甯冨眬閿欒锛氭湭鑾峰彇鍒扮埗鍏冪礌瀹介珮灏哄锛乧anvas-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}});
+ 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 + ' ' + 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}});
+ },
+ _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}});
+ },
+ _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}});
+ 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() {
+ //闃叉濡傛灉寮�鍚痚charts涓旂埗鍏冪礌涓簐-if鐨勬儏鍐祌enderjs鐩戝惉涓嶅埌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: {
+ //==============浠ヤ笅鏄疎Charts鐨勬柟娉�====================
+ 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鍜宻eries
+ 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 { origin, pathname } = window.location
+ const rooturl = origin + pathname
+ script.src = rooturl + '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寮�鍚悗鎵嶈Е鍙慶lick浜嬩欢
+ 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鐨刪ighlight娑堟伅锛屽疄鐜版寜涓嬬Щ鍔ㄨ繑鍥炵储寮曞姛鑳姐�俛dd 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鍐協ormat灞炴�т负formatter鐨勯瀹氫箟鏂规硶
+ option = rdformatterAssign(option,cfe.formatter)
+ if(option.tooltip){
+ option.tooltip.show = option.tooltipShow?true:false;
+ option.tooltip.position = this.tooltipPosition()
+ //tooltipFormat鏂规硶锛屾浛鎹㈢粍浠剁殑tooltipFormat涓篶onfig-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')
+ }
+ })
+ },
+ 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]
+ }
+ },
+ //==============浠ヤ笅鏄痷Charts鐨勬柟娉�====================
+ 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}})
+ cfu.instance[cid].delEventListener('renderComplete')
+ });
+ cfu.instance[cid].addEventListener('scrollLeft', () => {
+ that[cid].callMethod('emitMsg',{name:"scrollLeft",params:{type:"scrollLeft",scrollLeft:true,id:cid}})
+ });
+ cfu.instance[cid].addEventListener('scrollRight', () => {
+ that[cid].callMethod('emitMsg',{name:"scrollRight",params:{type:"scrollRight",scrollRight:true,id:cid}})
+ });
+ },
+ 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鎴栬�卌lick鐨勪簨浠�
+ 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}})
+ },
+ 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}})
+ },
+ 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}})
+ },
+ 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}})
+ },
+ 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}})
+ }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}})
+ },
+ }
+}
+</script>
+<!-- #endif -->
+
+<style scoped>
+.chartsview {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex: 1;
+ justify-content: center;
+ align-items: center;
+}
+</style>
--
Gitblit v1.9.3