230 lines
4.2 KiB
Markdown
230 lines
4.2 KiB
Markdown
---
|
|
title: ECharts
|
|
createTime: 2024/03/16 19:34:03
|
|
icon: raphael:piechart
|
|
permalink: /guide/chart/echarts/
|
|
---
|
|
|
|
## 概述
|
|
|
|
主题支持在文章中嵌入 [ECharts](https://echarts.apache.org/zh/index.html) 图表。
|
|
|
|
该功能由 [@vuepress/plugin-markdown-chart](https://ecosystem.vuejs.press/plugins/markdown/markdown-chart/) 提供支持。
|
|
|
|
## 配置
|
|
|
|
主题默认不启用该功能。
|
|
|
|
你需要在你的项目中安装 [ECharts](https://echarts.apache.org/zh/index.html) 库。
|
|
|
|
::: npm-to
|
|
|
|
```sh
|
|
npm install echarts
|
|
```
|
|
|
|
:::
|
|
|
|
然后在 `.vuepress/config.ts` 配置文件中，启用该功能：
|
|
|
|
```ts title=".vuepress/config.ts"
|
|
export default defineUserConfig({
|
|
theme: plumeTheme({
|
|
markdown: {
|
|
echarts: true, // [!code ++]
|
|
},
|
|
})
|
|
})
|
|
```
|
|
|
|
::: note
|
|
以下文档 Fork 自 [@vuepress/plugin-markdown-chart](https://ecosystem.vuejs.press/plugins/markdown/markdown-chart/echarts.html),
|
|
遵循 [MIT](https://github.com/vuepress/ecosystem/blob/main/LICENSE) 许可证。
|
|
:::
|
|
|
|
## 语法
|
|
|
|
### JSON 配置
|
|
|
|
如果你可以很轻松的生成数据，你可以直接通过一个 JSON 代码块来提供 Echarts 配置:
|
|
|
|
````md
|
|
::: echarts 标题
|
|
|
|
```json
|
|
{
|
|
// 此处为 ECharts 图表配置
|
|
}
|
|
```
|
|
|
|
:::
|
|
````
|
|
|
|
### JavaScript 配置
|
|
|
|
如果你需要通过脚本来获取数据，你可以使用 js 和 javascript 的代码块。
|
|
|
|
我们将通过 `echarts` 变量暴露 Echarts 实例，并且你应该将 Echart 配置赋值给 `option` 变量。
|
|
同时，你也可以赋值 `width` 和 `height` 来设置图表大小。
|
|
|
|
````md
|
|
::: echarts Title
|
|
```js
|
|
const option = {
|
|
// 此处为 ECharts 图表配置
|
|
}
|
|
```
|
|
:::
|
|
````
|
|
|
|
:::tip
|
|
你可以使用顶级 `await` 和 `fetch` 来从网络请求中获取数据。
|
|
:::
|
|
|
|
相关配置，详见 [ECharts 文档](https://echarts.apache.org/handbook/zh/get-started/)
|
|
|
|
## 高级
|
|
|
|
你可以在 [客户端配置文件](https://vuejs.press/zh/guide/configuration.html##使用脚本) 中导入并使用 `defineEchartsConfig` 来自定义 Echarts:
|
|
|
|
```ts
|
|
import { defineEchartsConfig } from '@vuepress/plugin-markdown-chart/client'
|
|
import { defineClientConfig } from 'vuepress/client'
|
|
|
|
defineEchartsConfig({
|
|
options: {
|
|
// 全局 Echarts 配置
|
|
},
|
|
setup: async () => {
|
|
// Echarts 设置
|
|
// 例如: await import("echarts-wordcloud")
|
|
},
|
|
})
|
|
|
|
export default defineClientConfig({
|
|
// ...
|
|
})
|
|
```
|
|
|
|
## 示例
|
|
|
|
### 线图
|
|
|
|
**输入：**
|
|
|
|
:::: details 查看代码
|
|
<!-- @include: ../../snippet/echarts-1.snippet.md -->
|
|
::::
|
|
|
|
**输出：**
|
|
|
|
<!-- @include: ../../snippet/echarts-1.snippet.md{2-100} -->
|
|
|
|
### 柱状图
|
|
|
|
**输入：**
|
|
|
|
:::: details 查看代码
|
|
<!-- @include: ../../snippet/echarts-2.snippet.md -->
|
|
::::
|
|
|
|
**输出：**
|
|
|
|
<!-- @include: ../../snippet/echarts-2.snippet.md{2-75} -->
|
|
|
|
### 饼图
|
|
|
|
**输入：**
|
|
|
|
:::: details 查看代码
|
|
<!-- @include: ../../snippet/echarts-3.snippet.md -->
|
|
::::
|
|
|
|
**输出：**
|
|
|
|
<!-- @include: ../../snippet/echarts-3.snippet.md{2-74} -->
|
|
|
|
### 散点图
|
|
|
|
**输入：**
|
|
|
|
:::: details 查看代码
|
|
<!-- @include: ../../snippet/echarts-4.snippet.md -->
|
|
::::
|
|
|
|
**输出：**
|
|
|
|
<!-- @include: ../../snippet/echarts-4.snippet.md{2-39} -->
|
|
|
|
### 极坐标图
|
|
|
|
**输入：**
|
|
|
|
:::: details 查看代码
|
|
<!-- @include: ../../snippet/echarts-5.snippet.md -->
|
|
::::
|
|
|
|
**输出：**
|
|
|
|
<!-- @include: ../../snippet/echarts-5.snippet.md{2-40} -->
|
|
|
|
### 烛台图
|
|
|
|
**输入：**
|
|
|
|
:::: details 查看代码
|
|
<!-- @include: ../../snippet/echarts-6.snippet.md -->
|
|
::::
|
|
|
|
**输出：**
|
|
|
|
<!-- @include: ../../snippet/echarts-6.snippet.md{2-308} -->
|
|
|
|
### 雷达图
|
|
|
|
**输入：**
|
|
|
|
:::: details 查看代码
|
|
<!-- @include: ../../snippet/echarts-7.snippet.md -->
|
|
::::
|
|
|
|
**输出：**
|
|
|
|
<!-- @include: ../../snippet/echarts-7.snippet.md{2-36} -->
|
|
|
|
### 热力图
|
|
|
|
**输入：**
|
|
|
|
:::: details 查看代码
|
|
<!-- @include: ../../snippet/echarts-8.snippet.md -->
|
|
::::
|
|
|
|
**输出：**
|
|
|
|
<!-- @include: ../../snippet/echarts-8.snippet.md{2-179} -->
|
|
|
|
### 树图
|
|
|
|
**输入：**
|
|
|
|
:::: details 查看代码
|
|
<!-- @include: ../../snippet/echarts-9.snippet.md -->
|
|
::::
|
|
|
|
**输出：**
|
|
|
|
<!-- @include: ../../snippet/echarts-9.snippet.md{2-33} -->
|
|
|
|
### 多图
|
|
|
|
**输入：**
|
|
|
|
:::: details 查看代码
|
|
<!-- @include: ../../snippet/echarts-10.snippet.md -->
|
|
::::
|
|
|
|
**输出：**
|
|
|
|
<!-- @include: ../../snippet/echarts-10.snippet.md{2-69} -->
|