vuepress-theme-plume/echarts.md at 1182f3edc0ba27b7a6eb4827158c106918c9f38a

forked from gitea-yuany3721/vuepress-theme-plume

pengzhanbo 1182f3edc0 perf: supplement content MIT protocol

2024-05-02 17:53:39 +08:00

4.3 KiB

Raw Blame History

title, author, createTime, icon, permalink

title	author	createTime	icon	permalink
ECharts	pengzhanbo	2024/03/16 19:34:03	raphael:piechart	/guide/chart/echarts/

概述

主题支持在文章中嵌入 ECharts 图表。

该功能由 vuepress-plugin-md-enhance 提供支持。

配置

主题默认不启用该功能。

你需要在你的项目中安装 ECharts 库。

::: code-tabs @tab pnpm

pnpm add echarts

@tab npm

npm install echarts

@tab yarn

yarn add echarts

:::

然后在 .vuepress/config.ts 配置文件中，启用该功能：

::: code-tabs @tab .vuepress/config.ts

export default defineUserConfig({
  theme: plumeTheme({
    plugins: {
      markdownEnhance: {
        echarts: true,
      },
    }
  })
})

:::

::: note 以下文档 Fork 自 vuepress-theme-hope, 遵循 MIT 许可证。 :::

语法

JSON 配置

如果你可以很轻松的生成数据，你可以直接通过一个 JSON 代码块来提供 Echarts 配置:

::: echarts 标题

```json
{
  // 此处为 ECharts 图表配置
}
```

:::

JavaScript 配置

如果你需要通过脚本来获取数据，你可以使用 js 和 javascript 的代码块。

我们将通过 myChart 变量暴露 Echarts 实例，并且你应该将 Echart 配置赋值给 option 变量。同时，你也可以赋值 width 和 height 来设置图表大小。

::: echarts Title
```js
const option = {
  // 此处为 ECharts 图表配置
}
```
:::

:::tip 你可以使用顶级 await 和 fetch 来从网络请求中获取数据。 :::

高级

你可以在客户端配置文件中导入并使用 defineEchartsConfig 来自定义 Echarts:

import { defineClientConfig } from 'vuepress/client'
import { defineEchartsConfig } from 'vuepress-theme-plume/client'

defineEchartsConfig({
  options: {
    // 全局 Echarts 配置
  },
  setup: async () => {
    // Echarts 设置
    // 例如: await import("echarts-wordcloud")
  },
})

export default defineClientConfig({
  // ...
})

输出：

4.3 KiB Raw Blame History

概述

配置

语法

JSON 配置

JavaScript 配置

高级

示例

线图

柱状图

饼图

散点图

极坐标图

烛台图

雷达图

热力图

树图

多图

4.3 KiB

Raw Blame History