npm 包 @vowo/chart-elements 使用教程

简介

@vowo/chart-elements 是一个基于 Vue2.x 和 Echarts4.x 开发的前端图表组件库，它提供了丰富的图表类型和配置选项，使前端开发人员可以轻松快捷地创建各种高度定制化的图表。

安装

使用 npm 进行安装：

--- ------- -------------------- ------

引入

------ --- ---- -----
------ ------------- ---- ----------------------
----------------------

使用

基础使用

----------
  -----
    ---------
      ------------
      ------------------
    ------------
  ------
-----------

--------
------ ------- -
  ----- ------
  ------ -
    ------ -
      ----- -
        ------ ------ ----- ----- ----- ----- ----- ------
        ----------- ----- ---- ---- --- --- ---- ----
      --
      -------- -
        ------ -
          ----- -------
        -
      -
    -
  -
-
---------

自定义样式

----------
  -----
    --------
      ------------
      ------------------
      --------------
      -------------
      -------------------
    -----------
  ------
-----------

--------
------ ------- -
  ----- ------
  ------ -
    ------ -
      ----- -
        ------ ------ ----- ----- ----- ------
        ----------- ----- ---- ---- --- ---
      --
      -------- -
        ------ -
          ----- -------
        -
      --
      ----------- -
        ------- ---- ----- ------
        ------------- ------
        ---------- -- - ---- -----
      -
    -
  -
-
---------

动态绑定

----------
  -----
    --------
      ---------------
      ------------------
    -----------
    ------- ---------------------------------
  ------
-----------

--------
------ ------- -
  ----- ------
  ------ -
    ------ -
      -------- -
        ----------- ------ ----- ----- ----- ------
        ----------- -
          - ----- ----- ------ --- --
          - ----- ----- ------ --- --
          - ----- ----- ------ --- --
          - ----- ----- ------ -- --
          - ----- ----- ------ -- -
        -
      --
      -------- -
        ------ -
          ----- ------
        -
      -
    -
  --
  -------- -
    ------------ -
      ----------------------- - -
        - ----- ----- ------ ------------------------ - ---- --
        - ----- ----- ------ ------------------------ - ---- --
        - ----- ----- ------ ------------------------ - ---- --
        - ----- ----- ------ ------------------------ - ---- --
        - ----- ----- ------ ------------------------ - ---- -
      -
    -
  -
-
---------

API 文档

VueLine

Prop Type Required Default Description
data Object Yes - 折线图数据，具体配置参考 Echarts 标准配置，必须包含 xData 和 seriesData 字段
options Object No - 折线图配置，具体配置参考 Echarts 标准配置
width String/Number No 100% 折线图宽度
height String/Number No 400px 折线图高度

VueBar

Prop Type Required Default Description
data Object Yes - 柱状图数据，具体配置参考 Echarts 标准配置，必须包含 xData 和 seriesData 字段
options Object No - 柱状图配置，具体配置参考 Echarts 标准配置
width String/Number No 100% 柱状图宽度
height String/Number No 400px 柱状图高度

VuePie

Prop Type Required Default Description
data Object Yes - 饼图数据，具体配置参考 Echarts 标准配置，必须包含 legendData 和 seriesData 字段
options Object No - 饼图配置，具体配置参考 Echarts 标准配置
width String/Number No 100% 饼图宽度
height String/Number No 400px 饼图高度

结语

本文介绍了如何使用 @vowo/chart-elements 这个前端图表组件库，它支持折线图、柱状图和饼图等多种图表类型，并提供了丰富的配置选项和自定义样式的功能。希望本文对你学习和使用 @vowo/chart-elements 有所帮助。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066b6051ab1864dac67250

阅读全文

猜你喜欢

  • npm 包 @yoitsro/lerna-package 使用教程

    前言 在前端开发中，随着项目规模的增大，单个仓库管理的代码量也会相应增加。为了方便地管理和维护代码，我们常常会使用 lerna 来进行项目管理。而 lerna 配合 npm 包可以使得我们更加方便地进...

    3 年前
  • npm 包 @yoitsro/lerna-get-npm-exec-opts 使用教程

    介绍 在前端开发中，我们通常会使用 npm 包管理工具来管理项目中的依赖项。而 @yoitsro/lerna-get-npm-exec-opts 就是一款基于 Lerna 的工具包，它可以帮助我们获取...

    3 年前
  • npm 包 @yoitsro/lerna-listable 使用教程

    简介 @yoitsro/lerna-listable 是一个方便快捷的命令行工具，它可以让你在使用 Lerna 进行多包管理时，快速统计所有 packages 下的依赖和 devDependencie...

    3 年前
  • npm 包 @yoitsro/lerna-prompt 使用教程

    npm 包 @yoitsro/lerna-prompt 使用教程 本文将为大家介绍 Lerna Prompt，一款基于 npm 包 @yoitsro/lerna-prompt 的工具。

    3 年前
  • npm 包 @yoitsro/lerna-validation-error 使用教程

    引言 在前端开发中，我们经常会使用到 npm 包来帮助我们完成各种工作。其中，@yoitsro/lerna-validation-error 就是一个非常有用的 npm 包，它可以在 lerna 项目...

    3 年前
  • npm 包 @zukame/worker 使用教程

    在前端开发中，我们经常需要处理一些耗时的任务，比如大数据处理、复杂图形计算等。如果我们使用主线程去处理这些任务，会导致页面出现卡顿现象，影响用户体验。这时候，我们可以使用 Web Worker 技术，...

    3 年前
  • npm 包 babel-plugin-empty-import 使用教程

    在前端开发中，我们经常使用 JavaScript 作为开发语言，而通过 webpack、babel 等工具优化打包流程已成为现代前端开发的常见操作。babel 是一个常用的 JavaScript 编译...

    3 年前
  • npm 包 angular2-library-example-chen 使用教程

    前言 随着 Angular 2 越来越流行，越来越多的开发者开始尝试封装自己的 Angular 2 库，方便多个项目重用代码。angular2-library-example-chen 是一款优秀的 ...

    3 年前
  • npm 包 jsonmaker 使用教程

    在前端开发中，经常需要处理 JSON 数据。为了更方便地创建和操作 JSON，有许多工具和库可供选择。其中一个非常有用的工具是 npm 包 jsonmaker。它可以帮助我们快速创建任何格式的 JSO...

    3 年前
  • npm 包 easy-spotify 使用教程

    什么是 easy-spotify easy-spotify 是一款 npm 包，它提供了简单易用的接口来使用 Spotify 的 API。Spotify 提供了一个基于 REST 的 Web API，...

    3 年前
  • npm 包 js-zrim-core 使用教程

    什么是 npm npm（即 Node.js Package Manager），是 Node.js 官方的包管理器，是世界上最大的软件包注册表，每周大约有 1000 万次的下载量。

    3 年前
  • npm 包 renderplus 使用教程

    前言 在前端开发中，页面渲染是很重要的一环。当我们需要在页面中渲染大量数据时，传统的 DOM 操作会变得非常低效。而在这种情况下，使用 JavaScript 模板引擎成为了解决这个问题的途径之一。

    3 年前
  • npm 包 mdme 使用教程

    如果你是一名前端开发者，那么你肯定会接触到许多npm包。今天，我要介绍的是一个非常有用的npm包——mdme。 什么是 mdme mdme是一个能够将 Markdown 文档转化为HTML的npm包。

    3 年前
  • npm 包 rsuite-uploader 使用教程

    在前端开发中，文件上传是一个常见的需求，而使用 npm 包 rsuite-uploader 可以方便地实现文件上传功能。本文将介绍 rsuite-uploader 的使用方法，包括安装、配置、使用和实...

    3 年前
  • npm 包 search-engine-client2 使用教程

    搜索引擎是现代互联网世界中基础而又重要的部分。由于搜索结果的质量直接决定了用户的满意度，因此搜索引擎的开发变得越来越重要。npm 包 search-engine-client2 是一种基于 Node....

    3 年前
  • 前端开发必备：npm 包 @carpenter/miniprogram-datepicker 的使用教程

    日期选择器是许多 Web 应用程序中必不可少的功能，但很多时候我们需要自己手动编写这个组件，为了让前端开发变得更加高效， @carpenter 团队开发了一个小程序的日期选择器组件，供大家在 Web ...

    3 年前
  • npm 包 @yoitsro/lerna-create-symlink 使用教程

    简介 在前端项目开发中，经常会使用到 lerna 来管理多个包。而 lerna 在管理包时，是将每个包分别放在各自的目录内进行开发的。这样做虽然方便管理，但也带来一些问题。

    3 年前
  • npm 包 @yoitsro/lerna-log-packed 使用教程

    前言 在前端开发中，经常会使用到多个 NPM 包组成一个项目，而这些 NPM 包可能会存在依赖关系。此时我们往往需要使用 lerna 来管理这些包之间的依赖关系，以方便开发和维护。

    3 年前
  • npm 包 @hackstudio/puppeteer-lambda-launcher 使用教程

    前言 随着前端领域的不断发展，前端工具的重要性也日益凸显。其中，Node.js 已成为前端开发者不可或缺的工具之一。而在 Node.js 中，npm 包更是具有非常巨大的影响力。

    3 年前
  • npm 包 @hadim/jupyterlab_gist 使用教程

    前言 JupyterLab 是 Jupyter 的下一代用户界面，它是一个开源的交互式环境，可以用于编写代码、文本、数学公式和可视化等多种工作。 @hadim/jupyterlab_gist 是一个可...

    3 年前

相关推荐

    暂无文章