vuepress-theme-plume/skills/vuepress-plume-markdown/resources/echarts.md

ECharts

The theme supports embedding ECharts charts within articles.

Configuration

Enable the feature in .vuepress/config.ts:

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

You also need to install the echarts library:

npm install echarts

Syntax

JSON Configuration

::: echarts Title
```json
{
  "xAxis": {
    "type": "category",
    "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  "yAxis": {
    "type": "value"
  },
  "series": [
    {
      "data": [150, 230, 224, 218, 135, 147, 260],
      "type": "line"
    }
  ]
}
```
:::

JavaScript Configuration

::: echarts Title
```js
const option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
}
```
:::