vuepress-theme-plume/docs/en/guide/chart/echarts.md

title, createTime, icon, permalink

title	createTime	icon	permalink
ECharts	2025/10/08 19:34:03	raphael:piechart	/en/guide/chart/echarts/

Overview

The theme supports embedding ECharts charts within articles.

This feature is powered by @vuepress/plugin-markdown-chart.

Configuration

This feature is disabled by default in the theme.

You need to install the ECharts library in your project.

::: npm-to

npm install echarts

:::

Then, enable the feature in the .vuepress/config.ts configuration file:

export default defineUserConfig({
  theme: plumeTheme({
    markdown: {
      echarts: true, // [!code ++]
    },
  })
})

::: note The following documentation is forked from @vuepress/plugin-markdown-chart, licensed under MIT. :::

Syntax

JSON Configuration

If you can easily generate data, you can provide ECharts configuration directly through a JSON code block:

::: echarts Title

```json
{
  // ECharts chart configuration goes here
}
```

:::

JavaScript Configuration

If you need to fetch data through scripts, you can use js and javascript code blocks.

The Echarts instance is exposed through the echarts variable, and you should assign the Echarts configuration to the option variable. You can also assign width and height to set the chart dimensions.

::: echarts Title
```js
const option = {
  // ECharts chart configuration goes here
}
```
:::

:::tip You can use top-level await and fetch to retrieve data from network requests. :::

Refer to the ECharts documentation for configuration details.

Advanced

You can import and use defineEchartsConfig in the client configuration file to customize ECharts:

import { defineEchartsConfig } from '@vuepress/plugin-markdown-chart/client'
import { defineClientConfig } from 'vuepress/client'

defineEchartsConfig({
  options: {
    // Global ECharts configuration
  },
  setup: async () => {
    // ECharts setup
    // Example: await import("echarts-wordcloud")
  },
})

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

Examples

Line Chart

Input:

:::: details View Code

::::

Output:

Bar Chart

Input:

:::: details View Code

::::

Output:

Pie Chart

Input:

:::: details View Code

::::

Output:

Scatter Chart

Input:

:::: details View Code

::::

Output:

Polar Chart

Input:

:::: details View Code

::::

Output:

Candlestick Chart

Input:

:::: details View Code

::::

Output:

Radar Chart

Input:

:::: details View Code

::::

Output:

Heatmap

Input:

:::: details View Code

::::

Output:

Tree Chart

Input:

:::: details View Code

::::

Output:

Multiple Charts

Input:

:::: details View Code

::::

Output: