- 当前 Bug 的表现(可附上截图)
- 预期表现
- 复现路径
- 提供一个最简复现 Demo
,最近再做echarts,官网的demo所有的initCharts全在page页面外,在page页面外的函数获取数据后,想渲染在页面上,但是不能用that.set.急急急
急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急
我现在也是这种情况,我也是使用的ECharts官网的代码,项目要求是吧蓝牙的数据刷出来,现在卡在Page外部吧我初始化的Chart 对象赋值给内部
不想传this就用箭头函数呗
麻烦上下代码
不好意思,纯箭头函数this为undefined,传入this才可以正常使用page上下文
帅哥,谢谢你啊,我这个方法是echart官网demo,他的initChart方法就在page外,并且不是靠onload调用的方法,是不能传参数的.我给你看源码
import * as echarts from
'../../ec-canvas/echarts'
;
import geoJson from
'./mapData.js'
;
var
textObj;
const app = getApp();
function
initChart(canvas, width, height) {
const chart = echarts.init(canvas,
null
, {
width: width,
height: height
});
canvas.setChart(chart);
echarts.registerMap(
'henan'
, geoJson);
const option = {
tooltip: {
trigger:
'item'
},
visualMap: {
min: 0,
max: 100,
left:
'left'
,
top:
'bottom'
,
text: [
'高'
,
'低'
],
// 文本,默认为数值文本
calculable:
true
},
toolbox: {
show:
true
,
orient:
'vertical'
,
left:
'right'
,
top:
'center'
,
feature: {
dataView: { readOnly:
false
},
restore: {},
saveAsImage: {}
}
},
series: [{
type:
'map'
,
mapType:
'henan'
,
label: {
normal: {
show:
true
},
emphasis: {
textStyle: {
color:
'#fff'
}
}
},
itemStyle: {
normal: {
borderColor:
'#389BB7'
,
areaColor:
'#fff'
,
},
emphasis: {
areaColor:
'#389BB7'
,
borderWidth: 0
}
},
animation:
false
,
data: [
{ name:
'郑州市'
, value: 100 },
{ name:
'洛阳市'
, value: 10 },
{ name:
'开封市'
, value: 20 },
{ name:
'信阳市'
, value: 30 },
{ name:
'三门峡市'
, value: 35 },
{ name:
'济源市'
, value: 35 },
{ name:
'焦作市'
, value: 35 },
{ name:
'安阳市'
, value: 35 },
{ name:
'鹤壁市'
, value: 35 },
{ name:
'濮阳市'
, value: 35 },
{ name:
'开封市'
, value: 45 }
]
}],
};
chart.setOption(option);
chart.on(
'click'
,
function
(param) {
var
name = param.data.name;
var
value = param.data.value;
//在这里报错,报setData没这个方法 (this,that都试过)
this
.setData({
name: name,
value:value
}
)
});
return
chart;
}
Page({
onShareAppMessage:
function
(res) {
return
{
title:
'ECharts 可以在微信小程序中使用啦!'
,
path:
'/pages/index/index'
,
success:
function
() { },
fail:
function
() { }
}
},
data: {
ec: {
onInit: initChart
},
name:
''
,
value:
''
},
onReady() {
}
});
//在这里报错,报setData没这个方法 (this,that都试过)
this
.setData({
this后面这么大一个空格怎么可能成功啊
特地下载了下,官方给的示例没有给地图绑定事件,但是官方文档中绑定事件与事件处理不是这么直接this.setData进行数据处理的,https://echarts.baidu.com/api.html#action,他是通过dispatchAction触发action弄得,你在研究研究events和actions
把this作为参数传进去
我用的是echart官网的demo,initCharts方法里用this是不行的,我可以把源码给你看看
import
* as echarts from
'../../ec-canvas/echarts'
;
import
geoJson from
'./mapData.js'
;
const
app = getApp();
function initChart(canvas, width, height) {
const
chart = echarts.init(canvas,
null
, {
width: width,
height: height
});
canvas.setChart(chart);
echarts.registerMap(
'henan'
, geoJson);
const
option = {
tooltip: {
trigger:
'item'
},
visualMap: {
min:
0
,
max:
100
,
left:
'left'
,
top:
'bottom'
,
text: [
'高'
,
'低'
],
// 文本,默认为数值文本
calculable:
true
},
toolbox: {
show:
true
,
orient:
'vertical'
,
left:
'right'
,
top:
'center'
,
feature: {
dataView: { readOnly:
false
},
restore: {},
saveAsImage: {}
}
},
series: [{
type:
'map'
,
mapType:
'henan'
,
label: {
normal: {
show:
true
},
emphasis: {
textStyle: {
color:
'#fff'
}
}
},
itemStyle: {
normal: {
borderColor:
'#389BB7'
,
areaColor:
'#fff'
,
},
emphasis: {
areaColor:
'#389BB7'
,
borderWidth:
0
}
},
animation:
false
,
data: [
{ name:
'郑州市'
, value:
100
},
]
}],
};
chart.setOption(option);
chart.on(
'click'
, function (param) {
var name = param.data.name;
var value = param.data.value;
//在这里报错,报setData没这个方法 (this,that都试过)
this
.setData({
name: name,
value:value
}
)
});
return
chart;
}
Page({
onShareAppMessage: function (res) {
return
{
title:
'ECharts 可以在微信小程序中使用啦!'
,
path:
'/pages/index/index'
,
success: function () { },
fail: function () { }
}
},
data: {
ec: {
onInit: initChart
},
name:
''
,
value:
''
},
onReady() {
}
});
方法很多呀。最野的就是
//页外页面指针
let that =
null
;
function
initChart(
canvas, width, height){//...省略...
chart.on(
'click'
,
function
(param) {
that.setData({
name: name,
value: value
});
});
//...省略...
}
Page({
//...省略...
onLoad(){
that =
this
;
//页外保存page指针
},
onUnload(){
that =
null
;
//记得释放
}
//...省略...
});
你是在页面用的,这个基本都能搞定,但是不优雅。
最好就在Page onLoad时才把ec这个对象setData进去,这个时候就能拿到页面的this指针。(没仔细研究过echarts,不确定onLoad时setData能否生效)。
function
initChart(page, canvas, width, height){
chart.on(
'click'
,
function
(param) {
page.setData({
name: name,
value: value
});
});
}
Page({
onLoad(){
let warpped = (
function
(that){
return
function
(){
let context =
this
;
//保存调用者的上下文
initChart.apply(context, [].concat([that], arguments));
//切换为调用者的上下文调用,并把that指针传入initCharts
}
})(
this
);
this
.setData({
ec: {
onInit: warpped
}
});
}
});