You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1618 lines
53 KiB
1618 lines
53 KiB
<!-- |
|
* 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; |
|
} |
|
</style>
|
|
|