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打包之后图表不显示