简介
ec-quote-widgets 是一个用于前端的 npm 包，它提供了一系列的报价组件，可以用于在 Web 页面上展示各种类型的报价，如股票、外汇、商品等。
这个包是由 ec-quote 出品的，ec-quote 是一个交易技术服务公司，致力于为金融从业者提供可靠、高效的交易技术解决方案。ec-quote-widgets 是 ec-quote 的一款开源产品，用户可以免费使用它提供的报价组件。
这篇文章将介绍如何在自己的前端项目中使用 ec-quote-widgets 包，包括安装、导入、配置等方面的内容。
安装
要使用 ec-quote-widgets，你需要先安装它。
可以通过 npm 安装，在命令行中输入以下命令：
--- ------- ----------------
安装成功后，你就可以在项目代码中引入 ec-quote-widgets 了。
导入
在代码中导入 ec-quote-widgets，可以使用 ES6 的模块化语法或者 CommonJS 的 require 语法。这里以 ES6 为例：
------ - ----------- - ---- -------------------
这个语句会从 ec-quote-widgets 包中导入 QuoteWidget 组件，并把它赋值给 QuoteWidget 变量。注意，这里使用了解构赋值语法，所以导出的是花括号中的 QuoteWidget 而不是整个包。
使用
导入 QuoteWidget 后，就可以使用它在页面上创建报价组件了。创建组件需要先准备一个 DOM 元素作为容器，然后把它传给 QuoteWidget 的构造函数。下面是一个简单的示例，它在 body 元素下创建了一个 id 为 quote-widget 的 div 元素，并使用这个元素作为容器：
------
---- ------------------------
------- --------------
------ - ----------- - ---- -------------------
----- --------- - ----------------------------------------
----- ------- - --- -----------------------
----------------
---------
-------这个示例中，通过调用 new QuoteWidget(container) 创建了一个 QuoteWidget 组件，把它加入了名为 quote-widget 的 div 元素中，并最后通过调用 qwidget.start() 方法启动了报价组件。在页面加载后，你应该能看到一个空的报价组件：
这时候需要配置报价组件以展示你想看到的市场行情。
配置
要配置 QuoteWidget，可以通过传入一个配置对象办法，这个对象可以指定要展示的市场、交易期限、数据更新频率等信息。下面是一个示例：
------ - ------------ ------- - ---- ------------------- ----- --------- - ---------------------------------------- ----- ------- - --- ---------------------- - ------- ----------- -- ------- ------- ----- -- ----- - -- --------- ----- -- --------- - - --- ----------------
这个示例中，通过在配置对象中指定了 market、expiry 和 interval 等属性来配置报价组件。Market 是一个枚举类型，可以指定为 fx（外汇）、stocks（股票）、commodities（大宗商品）等；expiry 是一个字符串，表示期限；interval 是一个数字，表示数据更新的毫秒数。
除了这些属性之外，还有很多别的属性可以配置，包括显示列、列宽度、时间格式等等。有关所有可用的配置选项，可以参考文档。
结论
ec-quote-widgets 是一个非常实用的 npm 包，可以方便地在前端项目中展示各种类型的市场数据。本文介绍了如何安装、导入、使用和配置这个包，在使用时需要注意一些细节，比如要传入一个 DOM 容器作为组件的父元素，并正确配置组件的参数。通过学习和实践，我们可以掌握这个包的基本用法，并在项目中灵活应用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/86580