formatter 自定义显示无法访问外部变量

[puxiaoshuai]

tooltip: {
trigger: 'item',
formatter: function(params,data) {
return data;
}
},
直接返回 item_xxxx_0

tooltip: {
trigger: 'item',
formatter: function(params) {
return this.state.data;
}
},
直接报错说 this.state.data没被定义。
formatter方法中无法执行console.log()

[memorybx]

你好：请问你这个问题解决吗？

[memorybx]

tooltip: {

trigger: 'item',
formatter: function(params,data) {
return data;
}
},
直接返回 item_xxxx_0
tooltip: {
trigger: 'item',
formatter: function(params) {
return this.state.data;
}
},
直接报错说 this.state.data没被定义。
formatter方法中无法执行console.log()

你好：请问你这个问题解决吗？

[congshengwu]

Hi @memorybx @puxiaoshuai, you can try this way:

First in the place of using echarts:

<Echarts
    option={this.getOption()}
    width="100%"
    customData={this.state.data}
    height={Platform.OS === StringConstant.PLATFORM_IOS ? 215 : 210}
/>

Second, modify the source code of echarts to transfer customData:
The position of file is node_modules/native-echarts/src/components/Echarts/renderChart.js

......

export default function renderChart(props) {
  ......
  return `
    ......
    
    // modify source code start, pass the out variable value to echart
    var props = ${toString(props)};
    // modify source code end
    
    myChart.setOption(${toString(props.option)});
    window.document.addEventListener('message', function(e) {
      var option = JSON.parse(e.data);
      myChart.setOption(option);
    });
    ......
  `
}

Last, use the data in formatter function:

formatter: function(params) {
    return props.customData;
}

[memorybx]

Hi @memorybx @puxiaoshuai, you can try this way:

First in the place of using echarts:

<Echarts
    option={this.getOption()}
    width="100%"
    customData={this.state.data}
    height={Platform.OS === StringConstant.PLATFORM_IOS ? 215 : 210}
/>

Second, modify the source code of echarts to transfer customData:
The position of file is node_modules/native-echarts/src/components/Echarts/renderChart.js

......

export default function renderChart(props) {
  ......
  return `
    ......
    
    // modify source code start, pass the out variable value to echart
    var props = ${toString(props)};
    // modify source code end
    
    myChart.setOption(${toString(props.option)});
    window.document.addEventListener('message', function(e) {
      var option = JSON.parse(e.data);
      myChart.setOption(option);
    });
    ......
  `
}

Last, use the data in formatter function:

formatter: function(params) {
    return props.customData;
}

Thank you very much! Your question completed very perfect!

[Mortydev]

Hi @memorybx @puxiaoshuai, you can try this way:

First in the place of using echarts:

<Echarts
    option={this.getOption()}
    width="100%"
    customData={this.state.data}
    height={Platform.OS === StringConstant.PLATFORM_IOS ? 215 : 210}
/>

Second, modify the source code of echarts to transfer customData: The position of file is node_modules/native-echarts/src/components/Echarts/renderChart.js

......

export default function renderChart(props) {
  ......
  return `
    ......
    
    // modify source code start, pass the out variable value to echart
    var props = ${toString(props)};
    // modify source code end
    
    myChart.setOption(${toString(props.option)});
    window.document.addEventListener('message', function(e) {
      var option = JSON.parse(e.data);
      myChart.setOption(option);
    });
    ......
  `
}

Last, use the data in formatter function:

formatter: function(params) {
    return props.customData;
}

我这样做ios打包之后图表不显示