修改首页地图
This commit is contained in:
@ -636,12 +636,20 @@ export default {
|
||||
},
|
||||
},
|
||||
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;
|
||||
beforeInit(){
|
||||
this.mixinDatacomErrorMessage = null;
|
||||
console.log('[map-debug] beforeInit', {
|
||||
echarts: this.echarts,
|
||||
type: this.type,
|
||||
hasEopts: !!this.eopts,
|
||||
eoptsMapName: this.eopts && this.eopts.mapName,
|
||||
hasGeo: !!(this.eopts && this.eopts.mapGeoJSON),
|
||||
chartSeriesLen: this.chartData && this.chartData.series ? this.chartData.series.length : -1
|
||||
});
|
||||
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){
|
||||
@ -782,11 +790,19 @@ export default {
|
||||
this.beforeInit();
|
||||
}
|
||||
},
|
||||
checkData(anyData) {
|
||||
let cid = this.cid
|
||||
//复位opts或eopts
|
||||
if(this.echarts === true){
|
||||
cfe.option[cid] = deepCloneAssign({}, this.eopts);
|
||||
checkData(anyData) {
|
||||
let cid = this.cid
|
||||
console.log('[map-debug] checkData', {
|
||||
cid,
|
||||
echarts: this.echarts,
|
||||
type: this.type,
|
||||
eoptsMapName: this.eopts && this.eopts.mapName,
|
||||
hasGeo: !!(this.eopts && this.eopts.mapGeoJSON),
|
||||
dataSeriesLen: anyData && anyData.series ? anyData.series.length : -1
|
||||
});
|
||||
//复位opts或eopts
|
||||
if(this.echarts === true){
|
||||
cfe.option[cid] = deepCloneAssign({}, this.eopts);
|
||||
cfe.option[cid].id = cid;
|
||||
cfe.option[cid].type = this.type;
|
||||
}else{
|
||||
@ -908,16 +924,22 @@ export default {
|
||||
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 {
|
||||
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;
|
||||
console.log('[map-debug] set echartsOpts', {
|
||||
cid,
|
||||
type: cfe.option[cid].type,
|
||||
mapName: cfe.option[cid].mapName,
|
||||
hasGeo: !!cfe.option[cid].mapGeoJSON
|
||||
});
|
||||
this.echartsOpts = deepCloneAssign({}, cfe.option[cid]);
|
||||
} else {
|
||||
cfu.option[cid].rotateLock = cfu.option[cid].rotate;
|
||||
this.uchartsOpts = deepCloneAssign({}, cfu.option[cid]);
|
||||
}
|
||||
@ -1272,24 +1294,25 @@ export default {
|
||||
},
|
||||
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;
|
||||
ecinit(newVal, oldVal, owner, instance){
|
||||
let cid = JSON.stringify(newVal.id || newVal.canvasId || (owner && owner.cid) || (instance && instance.cid))
|
||||
console.log('[map-debug] ecinit', { cid, type: newVal.type, hasMapName: !!newVal.mapName, hasGeo: !!newVal.mapGeoJSON });
|
||||
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
|
||||
}
|
||||
let newData = eopts.chartData;
|
||||
if(newData && !eopts.skipChartData){
|
||||
//挂载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
|
||||
}
|
||||
@ -1297,14 +1320,26 @@ export default {
|
||||
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')
|
||||
cfe.option[cid].series.push(Template)
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof window.echarts === 'object' && eopts.mapName && eopts.mapGeoJSON) {
|
||||
try {
|
||||
if (!window.echarts.getMap(eopts.mapName)) {
|
||||
window.echarts.registerMap(eopts.mapName, eopts.mapGeoJSON);
|
||||
}
|
||||
} catch (e) {
|
||||
console.log('[map-debug] registerMap error', e);
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof window.echarts === 'object') {
|
||||
console.log('[map-debug] echarts exists, init');
|
||||
this.newEChart()
|
||||
}else{
|
||||
console.log('[map-debug] echarts not found, load script');
|
||||
const script = document.createElement('script')
|
||||
// #ifdef APP-VUE
|
||||
script.src = './uni_modules/qiun-data-charts/static/app-plus/echarts.min.js'
|
||||
// #endif
|
||||
@ -1322,10 +1357,21 @@ export default {
|
||||
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])
|
||||
newEChart(){
|
||||
let cid = this.rid
|
||||
console.log('[map-debug] newEChart', { cid });
|
||||
if (cfe.option[cid] && cfe.option[cid].mapName && cfe.option[cid].mapGeoJSON) {
|
||||
try {
|
||||
if (!echarts.getMap(cfe.option[cid].mapName)) {
|
||||
echarts.registerMap(cfe.option[cid].mapName, cfe.option[cid].mapGeoJSON);
|
||||
}
|
||||
} catch (e) {
|
||||
console.log('[map-debug] registerMap error in newEChart', e);
|
||||
}
|
||||
}
|
||||
if(cfe.instance[cid] === undefined){
|
||||
cfe.instance[cid] = echarts.init(that[cid].$el.children[0])
|
||||
console.log('[map-debug] echarts init instance created');
|
||||
//ontap开启后才触发click事件
|
||||
if(cfe.option[cid].ontap === true){
|
||||
cfe.instance[cid].on('click', resdata => {
|
||||
@ -1339,14 +1385,15 @@ export default {
|
||||
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)
|
||||
this.updataEChart(cid,cfe.option[cid])
|
||||
}else{
|
||||
this.updataEChart(cid,cfe.option[cid])
|
||||
}
|
||||
},
|
||||
updataEChart(cid,option){
|
||||
console.log('[map-debug] updateEChart', { cid, hasSeries: !!option.series, seriesLen: option.series ? option.series.length : 0 });
|
||||
//替换option内format属性为formatter的预定义方法
|
||||
option = rdformatterAssign(option,cfe.formatter)
|
||||
if(option.tooltip){
|
||||
option.tooltip.show = option.tooltipShow?true:false;
|
||||
option.tooltip.position = this.tooltipPosition()
|
||||
|
||||
Reference in New Issue
Block a user