{
console.log('onblur');
setIsFocus(false);
}}
onFocus={() => {
console.log('onfocus');
setIsFocus(true);
}}
/>
```
### On-demand ECharts plugins (v0.1.8)
```jsx
```
## Advanced usage
_Available since v0.1.0._
### String functions in `option`
You cannot pass real functions across the JS ↔ RJS bridge. Instead, pass a **string** whose content is an ES5 function body.
- No arrow functions.
- ES5 syntax only.
- For HTML tooltips, plain string concatenation is fine; the optional **`html()`** helper (exported from this package) is only a convenience.
**Globals available inside the evaluated string:**
| Name | Description |
| :--------- | :---------------------------------- |
| `_` | [lodash](https://www.lodashjs.com/) |
| `myChart` | ECharts instance |
| `option` | Current `option` |
| `Echarts` | ECharts class |
| `dayjs` | dayjs |
| `unit` | `unit` prop |
| `theme` | `theme` prop |
| _(custom)_ | Values from `injectVars` |
```ts
// Manual HTML strings
{
tooltip: {
formatter: `function (params) {
var text = _.reduce(params, function (acc, cur, idx) {
var lineText = cur.marker + cur.seriesName + ": " + cur.value;
return acc + "" + lineText + "
";
}, "");
return "" +
dayjs(Date.now()).format("YYYY-MM-DD HH:mm:ss") + "
" + text;
}`,
},
}
```
```ts
// Optional: same tooltip using the html() helper (import html from this package)
{
tooltip: {
formatter: `function (params) {
var text = _.reduce(params, function (acc, cur, idx) {
return acc + ${html(
'div',
{ style: { fontSize: '10px' } },
"cur.marker + cur.seriesName + ':' + cur.value"
)}
}, '');
return ${html(
'div',
{
style: {
color: 'red',
fontSize: '10px',
textAlign: 'center',
},
},
'dayjs(Date.now()).format("YYYY-MM-DD HH:mm:ss")'
)} + text;
}`,
},
}
```
### `usingPlugin` — beyond the default ECharts bundle
1. **Install ECharts** in the app that enables plugins:
```bash
npm install echarts
```
2. **Enable on the component:**
```jsx
```
3. **Register RJS plugins** in `global.config.ts` via `usingPlugins`. Official plugin IDs are documented in the [plugin guide](https://developer.tuya.com/en/miniapp/develop/miniapp/framework/plugin/intro).
`package.json` (example — match the version your toolchain expects, often **5.4.2** for the default plugin set):
```json
{
"echarts": "5.4.2"
}
```
```ts
{
"usingPlugins": ["rjs://echarts"]
}
```
4. **`usingPluginList` (v0.1.8+)** — If omitted or empty, **all** ECharts plugins load and the bundle grows. List only the RJS entry files you need.
The built-in plugin set targets **ECharts 5.4.2**. For on-demand loading, keep your `echarts` version aligned. To override the bundled plugin version completely, add **`echarts/core`** to `usingPluginList`.
Example — **visualMap (piecewise)** only:
```ts
{
"usingPlugins": ["rjs://echarts/lib/component/visualMap/installVisualMapPiecewise.js"]
}
```
```tsx
```
## FAQ
1. **Functions inside `option` do nothing**
JS → RJS carries data only. Use **string** function bodies (v0.1.0+). See [Advanced usage](#advanced-usage).
2. **Some event callback fields are `null`**
ECharts sometimes uses circular references or getters; the bridge serializes a safe subset.
3. **`getEchartsProxy` calls don’t return real results**
The instance lives in RJS; the JS side is a proxy for fire-and-forget calls and events.
4. **Can I use only merge helpers and render ECharts myself?**
Yes — `import { autoInject } from '@tuya-miniapp/common-charts/lib/core/inject.js'`. Rendering still goes through the mini program [plugin system](https://developer.tuya.com/en/miniapp/develop/miniapp/framework/plugin/intro).
5. **Disable merging completely**
Use `notMerge` (v0.0.4+). Same limitation: no real `function` values in props.
6. **Works on echarts.apache.org but not in the mini program**
Check `renderMode: 'html'` and any raw `function` in options; use string functions as in FAQ 1.