docs: align badge images in on-demand importing and slots sections

This commit is contained in:
Justineo
2025-10-12 23:55:41 +08:00
parent ad0e17ad9e
commit 842e013663
2 changed files with 4 additions and 4 deletions

View File

@ -94,7 +94,7 @@ const option = ref({
</details> </details>
#### On-demand importing <img src="https://img.shields.io/badge/recommended-10B981" alt="recommended"> #### On-demand importing <sup><img src="https://img.shields.io/badge/recommended-10B981" alt="recommended" align="middle" height="16"></sup>
To keep your bundle size small, we recommend manually importing the components and charts you need from ECharts. To make this easier, weve created an [import code generator](https://vue-echarts.dev/#codegen). Simply paste your `option` code into the tool, and it will generate the exact import statements for you. To keep your bundle size small, we recommend manually importing the components and charts you need from ECharts. To make this easier, weve created an [import code generator](https://vue-echarts.dev/#codegen). Simply paste your `option` code into the tool, and it will generate the exact import statements for you.
@ -341,7 +341,7 @@ export default {
> - [`showLoading`](https://echarts.apache.org/en/api.html#echartsInstance.showLoading) / [`hideLoading`](https://echarts.apache.org/en/api.html#echartsInstance.hideLoading): use the `loading` and `loading-options` props instead. > - [`showLoading`](https://echarts.apache.org/en/api.html#echartsInstance.showLoading) / [`hideLoading`](https://echarts.apache.org/en/api.html#echartsInstance.hideLoading): use the `loading` and `loading-options` props instead.
> - [`setTheme`](https://echarts.apache.org/en/api.html#echartsInstance.setTheme): use the `theme` prop instead. > - [`setTheme`](https://echarts.apache.org/en/api.html#echartsInstance.setTheme): use the `theme` prop instead.
### Slots <img src="https://img.shields.io/badge/new-A855F7" alt="new"> ### Slots <sup><img src="https://img.shields.io/badge/new-A855F7" alt="new" align="middle" height="16"></sup>
Vue ECharts allows you to define ECharts option's [`tooltip.formatter`](https://echarts.apache.org/en/option.html#tooltip.formatter) and [`toolbox.feature.dataView.optionToContent`](https://echarts.apache.org/en/option.html#toolbox.feature.dataView.optionToContent) callbacks via Vue slots instead of defining them in your `option` object. This simplifies custom HTMLElement rendering using familiar Vue templating. Vue ECharts allows you to define ECharts option's [`tooltip.formatter`](https://echarts.apache.org/en/option.html#tooltip.formatter) and [`toolbox.feature.dataView.optionToContent`](https://echarts.apache.org/en/option.html#toolbox.feature.dataView.optionToContent) callbacks via Vue slots instead of defining them in your `option` object. This simplifies custom HTMLElement rendering using familiar Vue templating.

View File

@ -94,7 +94,7 @@ const option = ref({
</details> </details>
#### 按需导入 <img src="https://img.shields.io/badge/%E6%8E%A8%E8%8D%90-10B981" alt="推荐"> #### 按需导入 <sup><img src="https://img.shields.io/badge/%E6%8E%A8%E8%8D%90-10B981" alt="推荐" align="middle" height="16"></sup>
为了减小打包体积,我们建议手动从 ECharts 中导入所需的组件和图表。我们提供了一个[导入代码生成器](https://vue-echarts.dev/#codegen),可以帮你自动生成导入语句。只需将你的 `option` 代码粘贴进去,工具就会为你生成精确的导入代码。 为了减小打包体积,我们建议手动从 ECharts 中导入所需的组件和图表。我们提供了一个[导入代码生成器](https://vue-echarts.dev/#codegen),可以帮你自动生成导入语句。只需将你的 `option` 代码粘贴进去,工具就会为你生成精确的导入代码。
@ -340,7 +340,7 @@ export default {
> - [`showLoading`](https://echarts.apache.org/zh/api.html#echartsInstance.showLoading) / [`hideLoading`](https://echarts.apache.org/zh/api.html#echartsInstance.hideLoading):请使用 `loading` 和 `loading-options` prop。 > - [`showLoading`](https://echarts.apache.org/zh/api.html#echartsInstance.showLoading) / [`hideLoading`](https://echarts.apache.org/zh/api.html#echartsInstance.hideLoading):请使用 `loading` 和 `loading-options` prop。
> - [`setTheme`](https://echarts.apache.org/zh/api.html#echartsInstance.setTheme):请使用 `theme` prop。 > - [`setTheme`](https://echarts.apache.org/zh/api.html#echartsInstance.setTheme):请使用 `theme` prop。
### 插槽 <img src="https://img.shields.io/badge/%E6%96%B0%E5%8A%9F%E8%83%BD-A855F7" alt="新功能"> ### 插槽 <sup><img src="https://img.shields.io/badge/%E6%96%B0%E5%8A%9F%E8%83%BD-A855F7" alt="新功能" align="middle" height="16"></sup>
Vue ECharts 允许你通过 Vue 插槽来定义 ECharts 配置中的 [`tooltip.formatter`](https://echarts.apache.org/zh/option.html#tooltip.formatter) 和 [`toolbox.feature.dataView.optionToContent`](https://echarts.apache.org/zh/option.html#toolbox.feature.dataView.optionToContent) 回调,而无需在 `option` 对象中定义它们。你可以使用熟悉的 Vue 模板语法来编写自定义提示框或数据视图中的内容。 Vue ECharts 允许你通过 Vue 插槽来定义 ECharts 配置中的 [`tooltip.formatter`](https://echarts.apache.org/zh/option.html#tooltip.formatter) 和 [`toolbox.feature.dataView.optionToContent`](https://echarts.apache.org/zh/option.html#toolbox.feature.dataView.optionToContent) 回调,而无需在 `option` 对象中定义它们。你可以使用熟悉的 Vue 模板语法来编写自定义提示框或数据视图中的内容。