From bb9e8871b4b1ebad935968ae32f3c747fac7c3a2 Mon Sep 17 00:00:00 2001
From: whycq <you@example.com>
Date: 星期四, 17 十一月 2022 20:24:04 +0800
Subject: [PATCH] #
---
Monitor-APP/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue | 193 +++++++++++++++++++++++++++++++----------------
1 files changed, 126 insertions(+), 67 deletions(-)
diff --git a/Monitor-APP/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue b/Monitor-APP/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue
index ef5375c..09ae81e 100644
--- a/Monitor-APP/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue
+++ b/Monitor-APP/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue
@@ -1,5 +1,5 @@
<!--
- * qiun-data-charts 绉嬩簯楂樻�ц兘璺ㄥ叏绔浘琛ㄧ粍浠� v2.3.7-20220118
+ * qiun-data-charts 绉嬩簯楂樻�ц兘璺ㄥ叏绔浘琛ㄧ粍浠�
* Copyright (c) 2021 QIUN庐 绉嬩簯 https://www.ucharts.cn All rights reserved.
* Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
* 澶嶅埗浣跨敤璇蜂繚鐣欐湰娈垫敞閲婏紝鎰熻阿鏀寔寮�婧愶紒
@@ -97,7 +97,7 @@
</block>
<!-- #endif -->
<!-- 鍏朵粬灏忕▼搴忛�氳繃vue娓叉煋鍥捐〃 -->
- <!-- #ifdef MP-360 || MP-BAIDU || MP-QQ || MP-TOUTIAO || MP-WEIXIN -->
+ <!-- #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
@@ -175,7 +175,7 @@
function formatterAssign(args,formatter) {
for (let key in args) {
- if(args[key] !== null && typeof args[key] === 'object'){
+ 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;
@@ -306,6 +306,14 @@
type: Boolean,
default: false
},
+ optsWatch: {
+ type: Boolean,
+ default: true
+ },
+ onzoom: {
+ type: Boolean,
+ default: false
+ },
ontap: {
type: Boolean,
default: true
@@ -399,7 +407,9 @@
cHeight: 250,
showchart: false,
echarts: false,
- echartsResize:false,
+ echartsResize:{
+ state:false
+ },
uchartsOpts: {},
echartsOpts: {},
drawData:{},
@@ -426,15 +436,16 @@
if (this.canvas2d === false || systemInfo.platform === 'windows' || systemInfo.platform === 'mac') {
this.type2d = false;
}else{
+ this.type2d = true;
this.pixel = systemInfo.pixelRatio;
- if (this.canvasId === 'uchartsid' || this.canvasId == '') {
- console.log('[uCharts]:寮�鍚痗anvas2d妯″紡锛屽繀椤绘寚瀹歝anvasId锛屽惁鍒欎細鍑虹幇鍋跺皵鑾峰彇涓嶅埌dom鑺傜偣鐨勯棶棰橈紒');
- }
}
// #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;
@@ -486,7 +497,7 @@
return;
}
if (_this.echarts) {
- _this.echartsResize = !_this.echartsResize;
+ _this.echartsResize.state = !_this.echartsResize.state;
} else {
_this.resizeHandler();
}
@@ -511,11 +522,11 @@
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._clearChart();
this.showchart = false;
this.mixinDatacomErrorMessage = null;
}
@@ -549,7 +560,7 @@
optsProps: {
handler(val, oldval) {
if (typeof val === 'object') {
- if (JSON.stringify(val) !== JSON.stringify(oldval) && this.echarts === false) {
+ if (JSON.stringify(val) !== JSON.stringify(oldval) && this.echarts === false && this.optsWatch == true) {
this.checkData(this.drawData);
}
} else {
@@ -581,7 +592,7 @@
if (val === true && this.mixinDatacomLoading === false) {
setTimeout(() => {
this.mixinDatacomErrorMessage = null;
- this.echartsResize = !this.echartsResize;
+ this.echartsResize.state = !this.echartsResize.state;
this.checkData(this.drawData);
}, 200);
}
@@ -854,10 +865,12 @@
},
_clearChart() {
let cid = this.cid
- if (this.echrts !== true) {
- const ctx = uni.createCanvasContext(cid, this);
- ctx.clearRect(0, 0, this.cWidth, this.cHeight);
- ctx.draw();
+ 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() {
@@ -882,6 +895,7 @@
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;
@@ -924,14 +938,14 @@
const canvas = res[0].node;
const ctx = canvas.getContext('2d');
cfu.option[cid].context = ctx;
- canvas.width = data.width * this.pixel;
- canvas.height = data.height * this.pixel;
- canvas._width = data.width * this.pixel;
- canvas._height = data.height * this.pixel;
cfu.option[cid].rotateLock = cfu.option[cid].rotate;
if(cfu.instance[cid] && cfu.option[cid] && 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();
@@ -983,17 +997,38 @@
//#endif
//#ifndef H5
uni.saveImageToPhotosAlbum({
- filePath: res.tempFilePath,
- success: function () {
- uni.showToast({
- title: '淇濆瓨鎴愬姛',
- duration: 2000
- });
- }
+ 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) {
@@ -1003,14 +1038,14 @@
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}});
+ 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}});
+ 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}});
+ this.emitMsg({name: 'scrollRight', params: {type:"scrollRight", scrollRight: true, id: cid, opts: cfu.instance[cid].opts}});
});
},
_updataUChart(cid) {
@@ -1124,31 +1159,35 @@
_touchStart(e) {
let cid = this.cid
lastMoveTime=Date.now();
- if(cfu.option[cid].enableScroll === true){
+ 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}});
+ 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;
- if (duration < Math.floor(1000 / 60)) return;//姣忕60甯�
+ let touchMoveLimit = cfu.option[cid].touchMoveLimit || 24;
+ if (duration < Math.floor(1000 / touchMoveLimit)) return;//姣忕60甯�
lastMoveTime = currMoveTime;
- if(cfu.option[cid].enableScroll === true){
+ if(cfu.option[cid].enableScroll === true && e.changedTouches.length == 1){
cfu.instance[cid].scroll(e);
}
- this.emitMsg({name: 'getTouchMove', params: {type:"touchMove", event:e.changedTouches[0], id: cid}});
if(this.ontap === true && cfu.option[cid].enableScroll === false && this.onmovetip === true){
this._tap(e,true)
}
+ 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){
+ 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}});
+ 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)
}
@@ -1195,7 +1234,7 @@
function rdformatterAssign(args,formatter) {
for (let key in args) {
- if(args[key] !== null && typeof args[key] === 'object'){
+ 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;
@@ -1246,19 +1285,22 @@
cfe.option[cid] = rddeepCloneAssign({}, eopts);
}
let newData = eopts.chartData;
- //鎸傝浇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(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(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{
@@ -1267,9 +1309,9 @@
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'
+ const { origin } = window.location
+ const rooturl = origin + process.env.BASE_URL
+ script.src = rooturl + 'uni_modules/qiun-data-charts/static/h5/echarts.min.js'
// #endif
script.onload = this.newEChart
document.head.appendChild(script)
@@ -1294,7 +1336,7 @@
})
// 澧炲姞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", dataIndex:resdata.batch[0].dataIndex, id:cid}})
+ that[cid].callMethod('emitMsg',{name:"getHighlight", params:{type:"highlight", res:resdata, id:cid}})
})
}
this.updataEChart(cid,cfe.option[cid])
@@ -1328,7 +1370,16 @@
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) => {
@@ -1380,14 +1431,14 @@
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}})
+ 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}})
+ 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}})
+ that[cid].callMethod('emitMsg',{name:"scrollRight",params:{type:"scrollRight",scrollRight:true,id:cid, opts: cfu.instance[cid].opts}})
});
},
updataUChart() {
@@ -1471,31 +1522,39 @@
let cid = this.rid
let ontouch = cfu.option[cid].ontouch
if(ontouch == false) return;
- cfu.instance[cid].scrollStart(e)
- that[cid].callMethod('emitMsg',{name:"getTouchStart",params:{type:"touchStart",event:e.changedTouches[0],id:cid}})
+ 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;
- cfu.instance[cid].scroll(e)
- that[cid].callMethod('emitMsg',{name:"getTouchMove",params:{type:"touchMove",event:e.changedTouches[0],id:cid}})
+ 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 = [];
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;
- cfu.instance[cid].scrollEnd(e)
- that[cid].callMethod('emitMsg',{name:"getTouchEnd",params:{type:"touchEnd",event:e.changedTouches[0],id:cid}})
+ 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
@@ -1508,7 +1567,7 @@
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}})
+ that[cid].callMethod('emitMsg',{name:"getTouchStart",params:{type:"mouseDown",event:tmpe,id:cid, opts: cfu.instance[cid].opts}})
},
mouseMove(e) {
let cid = this.rid
@@ -1522,7 +1581,7 @@
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}})
+ 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)
@@ -1540,7 +1599,7 @@
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}})
+ that[cid].callMethod('emitMsg',{name:"getTouchEnd",params:{type:"mouseUp",event:tmpe,id:cid, opts: cfu.instance[cid].opts}})
},
}
}
--
Gitblit v1.9.1