shifeng1993 / react-native-secharts

一个webview封装的图表组件。基于百度echarts4
MIT License
219 stars 57 forks source link

formatter函数无法访问外部对象 #24

Closed chenmf6 closed 6 years ago

chenmf6 commented 6 years ago

const list = [4, 5, 6] ... const option = { ... label: { formatter: ({dataIndex, value}) => { return list[dataIndex] } } } 此时label不显示,而且画出来的bar不完整

chenmf6 commented 6 years ago

Echarts组件内部用Webview来封装了,所以访问不到外部的对象。

gao520sun commented 5 years ago

那怎么操作呢?怎么解决呢?

chenmf6 commented 5 years ago

不能访问外部对象,就只能把对象放进里面。比如上面的例子,要把list放到formatter函数里面

Ayaybob commented 1 year ago

刚刚试了个方法, 可以访问外部参数, 稍微有点麻烦

    let formatter = new Function('param', `
        let { name, value } = param;
        let titleArr = ${JSON.stringify(titleArr)};
        let valueArr = (value || []).map((item, index) => {
            return titleArr[index] + ": " + (item * 100) + "%";
        });
        let result = name + "<br>" + valueArr.join("<br>");
        return result;
    `);

        tooltip: {
            trigger: 'item',
            formatter: formatter,
        },

通过new Function将字符串转为方法, 在转之前通过${}动态地注入外部参数, 使生成函数前动态参数成为生成函数后的静态参数, 比如我贴出来的代码通过let titleArr = ${JSON.stringify(titleArr)}; 把titleArr注入到字符串中

需要注意的是字符串里每行代码的结束符分号;一定要带, 不然设置进去之后图表渲染不出来, 或者悬浮的信息框显示不出来