前言
在前端开发中，可视化图表的使用非常广泛。而 echarts 是一个优秀的数据可视化工具库，在实际开发中也经常使用。为了方便 echarts 生成图表，我们可以使用 zen-echart-render-core 这个 npm 包，通过它就能够快速轻松地在项目中使用 echarts 生成各种类型的图表。
安装
首先，我们需要在项目中安装 zen-echart-render-core 这个 npm 包。可以通过命令行执行以下命令进行安装：
npm install zen-echart-render-core --save-dev
接着，我们就可以在项目中引入 zen-echart-render-core 了。
使用方法
使用 zen-echart-render-core 生成图表非常简单，我们只需要将数据传递给 zen-echart-render-core，即可生成对应的图表。下面我们以 echarts 的饼图为例，介绍一下使用 zen-echart-render-core 的具体方法。
首先，我们需要引入 zen-echart-render-core：
import ZenEchartRenderCore from 'zen-echart-render-core';
然后，我们需要准备好要展示的数据：
const data = [
{name: '直接访问', value: 335},
{name: '搜索引擎', value: 310},
{name: '邮件营销', value: 234},
{name: '联盟广告', value: 135},
{name: '视频广告', value: 1548}
];接着，我们需要定义饼图的配置项：
-- -------------------- ---- -------
----- ------ - -
------ -
----- -------
-------- ------
--
-------- -
-------- -------
---------- ---- --------- --- -------
--
------- -
------- -----------
----- ---
---- ---
----- -------- ------- ------- ------- -------
--
------- -
-
----- -------
----- ------
------- ------- -------
------------------ ------
------ -
----- ------
--------- --------
--
--------- -
------ -
----- -----
--------- -----
----------- ------
-
--
---------- -
----- -----
--
----- ----
-
-
--最后，我们只需要使用 ZenEchartRenderCore 将数据和配置项传递给它：
const chart = new ZenEchartRenderCore({
domId: 'chart-container',
option
});
chart.render();上面的代码中，domId 表示 echarts 渲染图表的容器的 id。
实例
下面展示一个完整的实例，里面包含了使用 zen-echart-render-core 生成不同类型图表的示例代码。
-- -------------------- ---- -------
------ ------------------- ---- -------------------------
-- --
----- ------- - -
------ ------- ------ -----
------ ------- ------ -----
------ ------- ------ -----
------ ------- ------ -----
------ ------- ------ -----
--
----- --------- - -
------ -
----- -------
-------- ------
--
-------- -
-------- -------
---------- ---- --------- --- -------
--
------- -
------- -----------
----- ---
---- ---
----- -------- ------- ------- ------- -------
--
------- -
-
----- -------
----- ------
------- ------- -------
------------------ ------
------ -
----- ------
--------- --------
--
--------- -
------ -
----- -----
--------- -----
----------- ------
-
--
---------- -
----- -----
--
----- -------
-
-
--
----- -------- - --- ---------------------
------ ----------------------
------- ---------
---
------------------
-- ---
----- -------- - -
------ ------ ----- ----- ----- ----- ----- ------
------ -
-
----- -------
----- -------
----- ----- ---- ---- ---- ---- ---- ----
--
-
----- -------
----- -------
----- ----- ---- ---- ---- ----- ----- -----
--
-
----- -------
----- -------
----- ----- ---- ---- ---- ---- ---- ----
-
-
--
----- ---------- - -
------ -
----- -----
--
-------- -
-------- ------
--
------- -
----- -------- ------- -------
--
----- -
----- -----
------ -----
------- -----
------------- ----
--
------ -
----- -----------
------------ ------
----- --------------
--
------ -
----- -------
--
------- --------------
--
----- --------- - --- ---------------------
------ -----------------------
------- ----------
---
-------------------总结
使用 zen-echart-render-core，我们可以在项目中快速使用 echarts 生成各种类型的图表，方便简单，非常适合快速原型开发和小型项目。希望本文能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562df81e8991b448e05ea