ECharts 插件
原创...大约 2 分钟
ECharts 插件
让你的 VuePress 站点的 Markdown 文件支持 ECharts 图表。
使用本插件时,需要自己安装 echarts
依赖,本插件会将 echarts
加到 optimizeDeps
中。
另外,本插件使用了 vueuse
,用来做宽度自适应。
注意
本插件已经提交 PR,不需要自己实现,使用 vuepress-theme-hope
主题内置即可,这里仅保留记录。
配置
// customConfig.ts
export const customConfig: CustomConfig = {
mdEnhance: {
echarts: true,
},
}
格式
::: echarts 标题
```json
{
// 此处为图表配置
}
```
:::
案例
折线图
ECharts 折线图
代码
::: echarts ECharts 折线图
```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",
"smooth": true
}
]
}
```
:::
柱状图
ECharts 柱状图
代码
::: echarts ECharts 柱状图
```json
{
"xAxis": {
"type": "category",
"data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
"yAxis": {
"type": "value"
},
"series": [
{
"data": [120, 200, 150, 80, 70, 110, 130],
"type": "bar",
"showBackground": true,
"backgroundStyle": {
"color": "rgba(180, 180, 180, 0.2)"
}
}
]
}
```
:::
饼图
ECharts 饼图
代码
::: echarts ECharts 饼图
```json
{
"title": {
"text": "Referer of a Website",
"subtext": "Fake Data",
"left": "center"
},
"tooltip": {
"trigger": "item"
},
"legend": {
"orient": "vertical",
"left": "left"
},
"series": [
{
"name": "Access From",
"type": "pie",
"radius": "50%",
"data": [
{
"value": 1048,
"name": "Search Engine"
},
{
"value": 735,
"name": "Direct"
},
{
"value": 580,
"name": "Email"
},
{
"value": 484,
"name": "Union Ads"
},
{
"value": 300,
"name": "Video Ads"
}
],
"emphasis": {
"itemStyle": {
"shadowBlur": 10,
"shadowOffsetX": 0,
"shadowColor": "rgba(0, 0, 0, 0.5)"
}
}
}
]
}
```
:::
文档
相关详情,详见 ECharts 文档.