react-native-echarts
react-native-echarts copied to clipboard
formatter函数访问外部对象的方法
因为是以HTML形式写入webview,所以无法直接访问外部对象;
看了一下renderChart里的代码,可以发现option是以${toString(props.option)})设置的;
所以这里可以抖机灵方式灵活通过props来获取外部对象的方法;
renderChart.js代码修改
const renderChart = (props) => { const height =
${props.height || 400}px; const width = props.width ?
${props.width}px: 'auto'; const backgroundColor = props.backgroundColor; return
document.getElementById('main').style.height = "${height}";
document.getElementById('main').style.width = "${width}";
document.getElementById('main').style.backgroundColor = "${backgroundColor}";
var myChart = echarts.init(document.getElementById('main'));
var props = ${toString(props)};//使用外部传入的props
myChart.setOption(${toString(props.option)});`
外部formatter调用
` tooltip: {
trigger: 'item',
formatter: function (params,ticket,callback) {
var res = params.data.title + '
' + params.data.valueFormat + '(份)
(' + params.percent + '%)';
res=unescape(res.replace(/\u/g, "%u"));
res=props.data[params.dataIndex].RATE;//props.的方式使用传入的外部数据
return res;
}
},`