Tuya Developer Forum

由于开发者对于图表能力增强的强烈意愿，CommonCharts组件 悄悄更新了部分功能。
戳我查看组件文档

用过CommonCharts的朋友应该知道，目前组件有两大痛点

1. 无法使用函数进行formatter定制文案。
2. 部分echarts特性无法使用（由于使用了内置锁定的图表库版本）。

在CommonCharts v1.1 版本升级了两大功能。

1. 组件底层实现了js解释器进行解析，使用了 lodash用来代码增强。
2. 组件底层在启用了插件配置后，将会尝试加载echarts全量库（后续或许会追加按需引入能力）。

传入函数的方式如下

1. 需要传入函数字符串而非函数！
2. 不支持解析es6代码，不支持箭头函数，支持使用“_”(lodash)进行代码编写
3. 内置的变量请参考 详细的进阶使用技术文档
4. 为了增强内置变量使用，组件提供了 injectVars 对象类型，顾名思义 这里可以传入对象如 传入<CommonCharts injectVars={{dateType: "hour" }} /> 使用的字符串函数中就可以直接使用 dateType变量，无需声明。

字符串函数使用示例

// @example
tooltip: {
    // 注意 只能用es5 \n 需要转译
    formatter: `function (params) {
      var text = _.reduce(params, function (acc, cur, idx) {
        var lineText = cur.marker + cur.seriesName + ": " + cur.value;
        return 0 === idx ?  (acc + lineText) : (acc + "\\n" + lineText);
      }, "");
      

  return params[0].name + "\\n" + text;
}`;
 }

使用echarts能力增强可以开启参数 usingPlugin=true （非必要，建议在当前图表无法支持的情况下使用，会增大包体大小）
使用步骤如下：

1. 自行选用echarts版本进行安装 yarn add echarts
2. 配置全局参数 global.config.ts 增加配置项 "usingPlugins": ["rjs://echarts"] rjs配置文档
3. 组件增加属性 <CommonCharts usingPlugin={true} .../>

更多详细细节请参考 组件文档

持续更新中...
欢迎评论，更多建议/需求 请打在评论区