介绍
@[toc]
前端数据可视化一直是前端应用中的一个热门话题，而 ECharts 是一个基于 JavaScript 的开源可视化库，它提供了丰富的图形化制图能力，帮助开发人员将数据以图表的形式呈现出来，增强用户体验。
VuePress 是一个以 Vue 单文件组件为基本单位的静态网站生成器，它内置了 Markdown 渲染和扩展性强的插件机制。这里介绍的 @codeciting/vuepress-plugin-echarts 就是一个基于 VuePress 的插件，它可以在 VuePress 中使用 ECharts，让我们可以方便的将数据展示在网页上。
安装
直接使用 npm 安装 @codeciting/vuepress-plugin-echarts :
npm install @codeciting/vuepress-plugin-echarts --save
配置
在 .vuepress/config.js 文件中，添加以下代码即可：
-- -------------------- ---- -------
-------------- - -
-------- -
-
----------------------
-
-------- -
-- -- ------- - --- --
---- -------------------------------------------------
-
-
-
-
-其中：
echarts是插件的配置项cdn是 ECharts 的 CDN 地址
也可以将 ECharts 的 js 文件下载到本地，并指定路径：
-- -------------------- ---- -------
-------------- - -
-------- -
-
----------------------
-
-------- -
-- ----- ------- --
----- --------------------------
-
-
-
-
-使用
局部组件注册
在页面中使用 ECharts，需要先注册为 Vue 的一个局部组件，使用 ECharts 提供的 API echarts.init 初始化组件，setOption 方法设置参数，具体实现代码示例：
-- -------------------- ---- -------
----------
---- ------------------------ ------------------
-----------
--------
------ - --------- - ---- -----
------ ------- -
--------- -
------------ -- -
----- ----- - ---------------------------------
-----------------
-- ---
--
--
-
-
---------这里使用了 Vue 3 的 onMounted 生命周期，保证组件已经渲染完成，才初始化。
全局自定义块
由于 ECharts 的配置项较多，为了简化使用，在该插件中定义了全局自定义块 echart，可以省略注册局部组件的步骤，直接配置即可展示图形结果：
-- -------------------- ---- -------
--- ------
-
-------- -
------- -------- -----
--
---------- ---
--------- -
-------------
--
-------- -
------- ----------------------------------
--
-------- ---
--------- --
------- -----
------- ------
------- --- --- --- --- --- ---
--
-
---其中 echart 是自定义块名称，在 MD 文件中使用时必须加上，该代码会渲染为柱状图:
属性
当使用自定义块的时候，可以使用以下属性：
| 属性名 | 默认值 | 描述 |
|---|---|---|
height |
400 |
Number，图表的高度 |
loading |
true |
Boolean，是否使用 ECharts 的 loading 动画，启动后需在 data 中添加 ecLoading: false（取消 loading） |
data |
{} |
Object，ECharts 的配置，在这里编写，详情参考 ECharts 中的例子，支持异步加载和Promise的方式 |
实例
下面我们来编写一个 ECharts 的 Demo。按照上面的方式安装插件和配置，然后在 .md 文件中添加一以下代码：
-- -------------------- ---- -------
--- ------
-
---------- -
---------- -------
-------------- - ------- ------- -
--
--------- -
------- ------- ------ -------
--
------- -
------- -----
-------- -----
--------- -----
--------------- ----
--
---------- -
---------- -
-------------- --
-
--
-------- -
------- -----------
-------------- ------
------- --------- -------- -------- -------- -------- -------- --------
--
-------- ---
--------- -
-
------- ------
------- -------
-------- -----
------------ ---
------- ----- ---- ---- ----- ----- ----- ------
--
-
------- ------
------- -------
-------- -----
------------ ---
------- ----- ---- ---- ----- ----- ----- ------
--
-
------- -------
------- -------
-------- ------
-------- -
--------- -
------- -----
----------- -----
-
--
------------ ---
------- ------ ----- ----- ----- ----- ----- -----
-
-
-
---渲染结果如下：
这里展示的是一个带有多条折线引用的 ECharts 示例，通过自定义块的方式配置了数据和图表样式，渲染的效果非常好。
最后提醒大家在使用的时候考虑 ECharts 的配置和展示的数据结构，也可以参考官方文档和示例，希望大家有所收获。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/115843