744 lines
25 KiB
JavaScript
744 lines
25 KiB
JavaScript
|
/*
|
|||
|
|
* 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
|
|||
|
|
*
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
import uCharts from 'u-charts.js';
|
|||
|
|
import cfu from 'config-ucharts.js';
|
|||
|
|
|
|||
|
|
function deepCloneAssign(origin = {}, ...args) {
|
|||
|
|
for (let i in args) {
|
|||
|
|
for (let key in args[i]) {
|
|||
|
|
if (args[i].hasOwnProperty(key)) {
|
|||
|
|
origin[key] = args[i][key] && typeof args[i][key] === 'object' ? deepCloneAssign(Array.isArray(args[i][key]) ? [] : {}, origin[key], args[i][key]) : args[i][key];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return origin;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function formatterAssign(args,formatter) {
|
|||
|
|
for (let key in args) {
|
|||
|
|
if(args.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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function debounce(fn, wait) {
|
|||
|
|
let timer = false;
|
|||
|
|
return function() {
|
|||
|
|
clearTimeout(timer);
|
|||
|
|
timer && clearTimeout(timer);
|
|||
|
|
timer = setTimeout(() => {
|
|||
|
|
timer = false;
|
|||
|
|
fn.apply(this, arguments);
|
|||
|
|
}, wait);
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var lastMoveTime = null;
|
|||
|
|
var moveLength = 0;
|
|||
|
|
|
|||
|
|
Component({
|
|||
|
|
options: {
|
|||
|
|
pureDataPattern: /^_/
|
|||
|
|
},
|
|||
|
|
properties: {
|
|||
|
|
type: {
|
|||
|
|
type: String,
|
|||
|
|
value: null
|
|||
|
|
},
|
|||
|
|
canvasId: {
|
|||
|
|
type: String,
|
|||
|
|
value: 'uchartsid'
|
|||
|
|
},
|
|||
|
|
canvas2d: {
|
|||
|
|
type: Boolean,
|
|||
|
|
value: false
|
|||
|
|
},
|
|||
|
|
background: {
|
|||
|
|
type: String,
|
|||
|
|
value: 'rgba(0,0,0,0)'
|
|||
|
|
},
|
|||
|
|
animation: {
|
|||
|
|
type: Boolean,
|
|||
|
|
value: true
|
|||
|
|
},
|
|||
|
|
chartData: {
|
|||
|
|
type: Object,
|
|||
|
|
value: {
|
|||
|
|
categories: [],
|
|||
|
|
series: []
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
localdata:{
|
|||
|
|
type: Array,
|
|||
|
|
value: []
|
|||
|
|
},
|
|||
|
|
opts: {
|
|||
|
|
type: Object,
|
|||
|
|
value: {}
|
|||
|
|
},
|
|||
|
|
loadingType: {
|
|||
|
|
type: Number,
|
|||
|
|
value: 2
|
|||
|
|
},
|
|||
|
|
errorShow: {
|
|||
|
|
type: Boolean,
|
|||
|
|
value: true
|
|||
|
|
},
|
|||
|
|
errorReload: {
|
|||
|
|
type: Boolean,
|
|||
|
|
value: true
|
|||
|
|
},
|
|||
|
|
errorMessage: {
|
|||
|
|
type: String,
|
|||
|
|
value: null
|
|||
|
|
},
|
|||
|
|
inScrollView: {
|
|||
|
|
type: Boolean,
|
|||
|
|
value: false
|
|||
|
|
},
|
|||
|
|
reshow: {
|
|||
|
|
type: Boolean,
|
|||
|
|
value: false
|
|||
|
|
},
|
|||
|
|
reload: {
|
|||
|
|
type: Boolean,
|
|||
|
|
value: false
|
|||
|
|
},
|
|||
|
|
disableScroll: {
|
|||
|
|
type: Boolean,
|
|||
|
|
value: false
|
|||
|
|
},
|
|||
|
|
optsWatch: {
|
|||
|
|
type: Boolean,
|
|||
|
|
value: true
|
|||
|
|
},
|
|||
|
|
onzoom: {
|
|||
|
|
type: Boolean,
|
|||
|
|
value: false
|
|||
|
|
},
|
|||
|
|
ontap: {
|
|||
|
|
type: Boolean,
|
|||
|
|
value: true
|
|||
|
|
},
|
|||
|
|
ontouch: {
|
|||
|
|
type: Boolean,
|
|||
|
|
value: false
|
|||
|
|
},
|
|||
|
|
onmovetip: {
|
|||
|
|
type: Boolean,
|
|||
|
|
value: false
|
|||
|
|
},
|
|||
|
|
tooltipShow: {
|
|||
|
|
type: Boolean,
|
|||
|
|
value: true
|
|||
|
|
},
|
|||
|
|
tooltipFormat: {
|
|||
|
|
type: String,
|
|||
|
|
value: undefined
|
|||
|
|
},
|
|||
|
|
tooltipCustom: {
|
|||
|
|
type: Object,
|
|||
|
|
value: undefined
|
|||
|
|
},
|
|||
|
|
pageScrollTop: {
|
|||
|
|
type: Number,
|
|||
|
|
value: 0
|
|||
|
|
},
|
|||
|
|
tapLegend: {
|
|||
|
|
type: Boolean,
|
|||
|
|
value: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: {
|
|||
|
|
cid: 'uchartsid',
|
|||
|
|
type2d: true,
|
|||
|
|
cWidth: 375,
|
|||
|
|
cHeight: 250,
|
|||
|
|
showchart: false,
|
|||
|
|
mixinDatacomErrorMessage:null,
|
|||
|
|
mixinDatacomLoading:true,
|
|||
|
|
_inWin: false,
|
|||
|
|
_pixel: 1,
|
|||
|
|
_drawData:{},
|
|||
|
|
_lastDrawTime:null
|
|||
|
|
},
|
|||
|
|
observers: {
|
|||
|
|
'chartData.**': function(val) {
|
|||
|
|
if (typeof val === 'object') {
|
|||
|
|
this._clearChart();
|
|||
|
|
if (val.series && val.series.length > 0) {
|
|||
|
|
this.beforeInit();
|
|||
|
|
}else{
|
|||
|
|
let mixinDatacomLoading = true;
|
|||
|
|
let showchart = false;
|
|||
|
|
let mixinDatacomErrorMessage = null;
|
|||
|
|
this.setData({ mixinDatacomLoading, showchart, mixinDatacomErrorMessage });
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
let mixinDatacomLoading = false;
|
|||
|
|
let showchart = false;
|
|||
|
|
let mixinDatacomErrorMessage = '参数错误：chartData数据类型错误';
|
|||
|
|
this.setData({ mixinDatacomLoading, showchart, mixinDatacomErrorMessage });
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
'localdata': function(val) {
|
|||
|
|
if (val.length > 0) {
|
|||
|
|
this.beforeInit();
|
|||
|
|
}else{
|
|||
|
|
let mixinDatacomLoading = true;
|
|||
|
|
this._clearChart();
|
|||
|
|
let showchart = false;
|
|||
|
|
let mixinDatacomErrorMessage = null;
|
|||
|
|
this.setData({ mixinDatacomLoading, showchart, mixinDatacomErrorMessage });
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
'opts.**': function(val) {
|
|||
|
|
if (typeof val === 'object') {
|
|||
|
|
if (this.data.optsWatch == true) {
|
|||
|
|
this.checkData(this.data._drawData);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
let mixinDatacomLoading = false;
|
|||
|
|
let showchart = false;
|
|||
|
|
let mixinDatacomErrorMessage = '参数错误：opts数据类型错误';
|
|||
|
|
this.setData({ mixinDatacomLoading, showchart, mixinDatacomErrorMessage });
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
'reshow': function(val) {
|
|||
|
|
if (val === true && this.data.mixinDatacomLoading === false) {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
let mixinDatacomErrorMessage = null;
|
|||
|
|
this.setData({ mixinDatacomErrorMessage });
|
|||
|
|
this.checkData(this.data._drawData);
|
|||
|
|
}, 200);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
'reload': function(val) {
|
|||
|
|
if (val === true) {
|
|||
|
|
let showchart = false;
|
|||
|
|
let mixinDatacomErrorMessage = null;
|
|||
|
|
this.setData({ showchart, mixinDatacomErrorMessage });
|
|||
|
|
this.reloading();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
'mixinDatacomErrorMessage': function(val) {
|
|||
|
|
if (val) {
|
|||
|
|
this.emitMsg({name: 'error', params: {type:"error", errorShow: this.data.errorShow, msg: val, id: this.data.cid}});
|
|||
|
|
if(this.data.errorShow){
|
|||
|
|
console.log('[秋云图表组件]' + val);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
'errorMessage': function(val) {
|
|||
|
|
if (val && this.data.errorShow && val !== null && val !== 'null' && val !== '') {
|
|||
|
|
let mixinDatacomLoading = false;
|
|||
|
|
let showchart = false;
|
|||
|
|
let mixinDatacomErrorMessage = val;
|
|||
|
|
this.setData({ mixinDatacomLoading, showchart, mixinDatacomErrorMessage });
|
|||
|
|
} else {
|
|||
|
|
let showchart = false;
|
|||
|
|
let mixinDatacomErrorMessage = null;
|
|||
|
|
this.setData({ showchart, mixinDatacomErrorMessage });
|
|||
|
|
this.reloading();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
lifetimes: {
|
|||
|
|
attached: function () {
|
|||
|
|
let cid = this.data.canvasId;
|
|||
|
|
if (this.data.canvasId == 'uchartsid' || this.data.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));
|
|||
|
|
}
|
|||
|
|
cid = id;
|
|||
|
|
}
|
|||
|
|
let _inWin = false;
|
|||
|
|
const systemInfo = wx.getSystemInfoSync();
|
|||
|
|
if(systemInfo.platform === 'windows' || systemInfo.platform === 'mac'){
|
|||
|
|
_inWin = true;
|
|||
|
|
}
|
|||
|
|
let type2d = false;
|
|||
|
|
let _pixel = 1;
|
|||
|
|
if (this.data.canvas2d === false || systemInfo.platform === 'windows' || systemInfo.platform === 'mac') {
|
|||
|
|
type2d = false;
|
|||
|
|
}else{
|
|||
|
|
type2d = true;
|
|||
|
|
_pixel = systemInfo.pixelRatio;
|
|||
|
|
}
|
|||
|
|
this.setData({ cid, type2d, _pixel });
|
|||
|
|
},
|
|||
|
|
ready: function () {
|
|||
|
|
wx.nextTick(() => {
|
|||
|
|
this.beforeInit();
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
detached: function () {
|
|||
|
|
delete cfu.option[this.data.cid]
|
|||
|
|
delete cfu.instance[this.data.cid]
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
pageLifetimes: {
|
|||
|
|
show: function() {
|
|||
|
|
// 页面被展示，可以选择执行重绘，参考下面resize的方法
|
|||
|
|
},
|
|||
|
|
hide: function() {
|
|||
|
|
// 页面被隐藏
|
|||
|
|
},
|
|||
|
|
resize: function(size) {
|
|||
|
|
const _this = this;
|
|||
|
|
debounce(function(res) {
|
|||
|
|
if (_this.data.mixinDatacomLoading == true) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const errmsg = _this.data.mixinDatacomErrorMessage;
|
|||
|
|
if (errmsg !== null && errmsg !== 'null' && errmsg !== '') {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
_this.resizeHandler();
|
|||
|
|
}, 200)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
beforeInit(){
|
|||
|
|
this.data.mixinDatacomErrorMessage = null;
|
|||
|
|
if (typeof this.data.chartData === 'object' && this.data.chartData != null && this.data.chartData.series !== undefined && this.data.chartData.series.length > 0) {
|
|||
|
|
//拷贝一下chartData，为了opts变更后统一数据来源
|
|||
|
|
let _drawData = deepCloneAssign({}, this.data.chartData);
|
|||
|
|
let mixinDatacomLoading = false;
|
|||
|
|
let showchart = true;
|
|||
|
|
this.setData({ _drawData, mixinDatacomLoading, showchart });
|
|||
|
|
this.checkData(this.data.chartData);
|
|||
|
|
}else if(this.data.localdata.length>0){
|
|||
|
|
let mixinDatacomLoading = false;
|
|||
|
|
let showchart = true;
|
|||
|
|
this.setData({ mixinDatacomLoading, showchart });
|
|||
|
|
this.localdataInit(this.data.localdata);
|
|||
|
|
}else{
|
|||
|
|
let mixinDatacomLoading = true;
|
|||
|
|
this.setData({ mixinDatacomLoading });
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
localdataInit(resdata){
|
|||
|
|
let needCategories = false;
|
|||
|
|
let tmpData = {categories:[], series:[]};
|
|||
|
|
let tmpcategories = [];
|
|||
|
|
let tmpseries = [];
|
|||
|
|
//拼接categories
|
|||
|
|
needCategories = cfu.categories.includes(this.data.type);
|
|||
|
|
if(needCategories === true){
|
|||
|
|
//如果props中的chartData带有categories，则优先使用chartData的categories
|
|||
|
|
if(this.data.chartData && this.data.chartData.categories && this.data.chartData.categories.length>0){
|
|||
|
|
tmpcategories = this.data.chartData.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变更后统一数据来源
|
|||
|
|
let _drawData = deepCloneAssign({}, tmpData);
|
|||
|
|
this.setData({ _drawData });
|
|||
|
|
this.checkData(tmpData)
|
|||
|
|
},
|
|||
|
|
_clearChart() {
|
|||
|
|
let cid = this.data.cid
|
|||
|
|
if (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.data.cWidth, this.data.cHeight);
|
|||
|
|
ctx.draw();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
reloading() {
|
|||
|
|
if(this.data.errorReload === false){
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
let showchart = false;
|
|||
|
|
let mixinDatacomErrorMessage = null;
|
|||
|
|
this.setData({ showchart, mixinDatacomErrorMessage });
|
|||
|
|
this.beforeInit();
|
|||
|
|
},
|
|||
|
|
checkData(anyData) {
|
|||
|
|
let cid = this.data.cid
|
|||
|
|
//复位opts或eopts
|
|||
|
|
if (this.data.type && cfu.type.includes(this.data.type)) {
|
|||
|
|
cfu.option[cid] = deepCloneAssign({}, cfu[this.data.type], this.data.opts);
|
|||
|
|
cfu.option[cid].canvasId = cid;
|
|||
|
|
} else {
|
|||
|
|
let mixinDatacomLoading = false;
|
|||
|
|
let showchart = false;
|
|||
|
|
let mixinDatacomErrorMessage = '参数错误：props参数中type类型不正确';
|
|||
|
|
this.setData({ mixinDatacomLoading, showchart, mixinDatacomErrorMessage });
|
|||
|
|
}
|
|||
|
|
//挂载categories和series
|
|||
|
|
let newData = deepCloneAssign({}, anyData);
|
|||
|
|
if (newData.series !== undefined && newData.series.length > 0) {
|
|||
|
|
let mixinDatacomErrorMessage = null;
|
|||
|
|
this.setData({ mixinDatacomErrorMessage });
|
|||
|
|
cfu.option[cid].categories = newData.categories;
|
|||
|
|
cfu.option[cid].series = newData.series;
|
|||
|
|
wx.nextTick(()=>{
|
|||
|
|
this.init()
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
resizeHandler() {
|
|||
|
|
//渲染防抖
|
|||
|
|
let currTime = Date.now();
|
|||
|
|
let lastDrawTime = this.data._lastDrawTime?this.data._lastDrawTime:currTime-3000;
|
|||
|
|
let duration = currTime - lastDrawTime;
|
|||
|
|
if (duration < 1000) return;
|
|||
|
|
let chartdom = wx.createSelectorQuery().in(this)
|
|||
|
|
.select('#boxid'+this.data.cid)
|
|||
|
|
.boundingClientRect(data => {
|
|||
|
|
let showchart = true;
|
|||
|
|
this.setData({ showchart });
|
|||
|
|
if (data.width > 0 && data.height > 0) {
|
|||
|
|
if (data.width !== this.data.cWidth || data.height !== this.data.cHeight) {
|
|||
|
|
this.checkData(this.data._drawData)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.exec();
|
|||
|
|
},
|
|||
|
|
init() {
|
|||
|
|
let cid = this.data.cid
|
|||
|
|
let chartdom = wx.createSelectorQuery().in(this)
|
|||
|
|
.select('#boxid'+cid)
|
|||
|
|
.boundingClientRect(data => {
|
|||
|
|
if (data.width > 0 && data.height > 0) {
|
|||
|
|
let mixinDatacomLoading = false;
|
|||
|
|
let showchart = true;
|
|||
|
|
let _lastDrawTime = Date.now();
|
|||
|
|
let cWidth = data.width;
|
|||
|
|
let cHeight = data.height;
|
|||
|
|
let mixinDatacomErrorMessage = null;
|
|||
|
|
this.setData({ mixinDatacomLoading, showchart, _lastDrawTime, cWidth, cHeight, mixinDatacomErrorMessage });
|
|||
|
|
cfu.option[cid].background = this.data.background == 'rgba(0,0,0,0)' ? '#FFFFFF' : this.data.background;
|
|||
|
|
cfu.option[cid].canvas2d = this.data.type2d;
|
|||
|
|
cfu.option[cid].pixelRatio = this.data._pixel;
|
|||
|
|
cfu.option[cid].animation = this.data.animation;
|
|||
|
|
cfu.option[cid].width = data.width * this.data._pixel;
|
|||
|
|
cfu.option[cid].height = data.height * this.data._pixel;
|
|||
|
|
cfu.option[cid].ontap = this.data.ontap;
|
|||
|
|
cfu.option[cid].ontouch = this.data.ontouch;
|
|||
|
|
cfu.option[cid].onmovetip = this.data.onmovetip;
|
|||
|
|
cfu.option[cid].tooltipShow = this.data.tooltipShow;
|
|||
|
|
cfu.option[cid].tooltipFormat = this.data.tooltipFormat;
|
|||
|
|
cfu.option[cid].tooltipCustom = this.data.tooltipCustom;
|
|||
|
|
cfu.option[cid].inScrollView = this.data.inScrollView;
|
|||
|
|
cfu.option[cid].lastDrawTime = this.data._lastDrawTime;
|
|||
|
|
cfu.option[cid].tapLegend = this.data.tapLegend;
|
|||
|
|
cfu.option[cid] = formatterAssign(cfu.option[cid],cfu.formatter)
|
|||
|
|
if (this.data.type2d === true) {
|
|||
|
|
const query = wx.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.data._pixel;
|
|||
|
|
canvas.height = data.height * this.data._pixel;
|
|||
|
|
canvas._width = data.width * this.data._pixel;
|
|||
|
|
canvas._height = data.height * this.data._pixel;
|
|||
|
|
setTimeout(()=>{
|
|||
|
|
cfu.option[cid].context.restore();
|
|||
|
|
cfu.option[cid].context.save();
|
|||
|
|
this._newChart(cid)
|
|||
|
|
},100)
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
this.data.showchart = false;
|
|||
|
|
this.data.mixinDatacomErrorMessage = '参数错误：开启2d模式后，未获取到dom节点，canvas-id:' + cid;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
cfu.option[cid].context = wx.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 {
|
|||
|
|
let mixinDatacomLoading = false;
|
|||
|
|
let showchart = false;
|
|||
|
|
this.setData({ mixinDatacomLoading, showchart });
|
|||
|
|
if (this.data.reshow == true) {
|
|||
|
|
this.data.mixinDatacomErrorMessage = '布局错误：未获取到父元素宽高尺寸！canvas-id:' + cid;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.exec();
|
|||
|
|
},
|
|||
|
|
saveImage(){
|
|||
|
|
wx.canvasToTempFilePath({
|
|||
|
|
canvasId: this.data.cid,
|
|||
|
|
success: res=>{
|
|||
|
|
wx.saveImageToPhotosAlbum({
|
|||
|
|
filePath: res.tempFilePath,
|
|||
|
|
success: function () {
|
|||
|
|
wx.showToast({
|
|||
|
|
title: '保存成功',
|
|||
|
|
duration: 2000
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},this);
|
|||
|
|
},
|
|||
|
|
_newChart(cid) {
|
|||
|
|
if (this.data.mixinDatacomLoading == true) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
let showchart = true;
|
|||
|
|
this.setData({ showchart });
|
|||
|
|
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.data.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.data.cid
|
|||
|
|
let currentIndex = null;
|
|||
|
|
let legendIndex = null;
|
|||
|
|
if (this.data.inScrollView === true) {
|
|||
|
|
let chartdom = wx.createSelectorQuery().in(this)
|
|||
|
|
.select('#boxid'+cid)
|
|||
|
|
.boundingClientRect(data => {
|
|||
|
|
e.changedTouches=[];
|
|||
|
|
e.changedTouches.unshift({ x: e.detail.x - data.left, y: e.detail.y - data.top - this.data.pageScrollTop});
|
|||
|
|
if(move){
|
|||
|
|
if (this.data.tooltipShow === true) {
|
|||
|
|
this._showTooltip(e);
|
|||
|
|
}
|
|||
|
|
}else{
|
|||
|
|
currentIndex = cfu.instance[cid].getCurrentDataIndex(e);
|
|||
|
|
legendIndex = cfu.instance[cid].getLegendDataIndex(e);
|
|||
|
|
if(this.data.tapLegend === true){
|
|||
|
|
cfu.instance[cid].touchLegend(e);
|
|||
|
|
}
|
|||
|
|
if (this.data.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.data.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.data.tapLegend === true){
|
|||
|
|
cfu.instance[cid].touchLegend(e);
|
|||
|
|
}
|
|||
|
|
if (this.data.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.data.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, id:cid}});
|
|||
|
|
},
|
|||
|
|
_touchMove(e) {
|
|||
|
|
let cid = this.data.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.data.ontap === true && cfu.option[cid].enableScroll === false && this.data.onmovetip === true){
|
|||
|
|
this._tap(e,true)
|
|||
|
|
}
|
|||
|
|
if(this.data.ontouch === true && cfu.option[cid].enableScroll === true && this.data.onzoom === true && e.changedTouches.length == 2){
|
|||
|
|
cfu.instance[cid].dobuleZoom(e);
|
|||
|
|
}
|
|||
|
|
this.emitMsg({name: 'getTouchMove', params: {type:"touchMove", event:e.changedTouches, id: cid}});
|
|||
|
|
},
|
|||
|
|
_touchEnd(e) {
|
|||
|
|
let cid = this.data.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, id:cid}});
|
|||
|
|
if(this.data.ontap === true && cfu.option[cid].enableScroll === false && this.data.onmovetip === true){
|
|||
|
|
this._tap(e,true)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
_error(e) {
|
|||
|
|
this.data.mixinDatacomErrorMessage = e.detail.errMsg;
|
|||
|
|
},
|
|||
|
|
emitMsg(msg) {
|
|||
|
|
this.triggerEvent(msg.name, msg.params);
|
|||
|
|
},
|
|||
|
|
toJSON(){
|
|||
|
|
return this
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|