npm 包 bmc-charts 使用教程

在前端开发中，经常需要使用图表来展示数据。而 bmc-charts 是一个基于 echarts 开发的 npm 包，使得前端开发人员可以更方便地使用 echarts 进行图表展示。

本文将详细介绍如何使用 bmc-charts 包进行图表展示，并提供一些示例代码以供参考。

安装 bmc-charts

bmc-charts 可通过 npm 进行安装。在命令行输入以下命令进行安装：

npm install bmc-charts

安装完成后，即可引入 bmc-charts 包进行图表展示。

使用 bmc-charts

引入 bmc-charts 包后，需要调用相应的函数来绘制不同类型的图表。下面将分别介绍如何使用 bmc-charts 绘制柱状图、折线图和饼图。

绘制柱状图

使用 bmc-charts 绘制柱状图的代码如下：

// www.javascriptcn.com code example
import { barChart } from 'bmc-charts';

barChart({
  el: 'bar-chart',
  data: {
    categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    series: [
      {
        name: 'Sales',
        data: [120, 200, 150, 80, 70, 110, 130],
      },
    ],
  },
});

上述代码中，el 表示绘制图表的容器，需要传入容器的 id 或 class 名称。data 表示图表的数据，包括 categories 和 series 两个属性。categories 表示 x 轴显示的分类，series 数组中包含多个系列数据，每个系列数据有 name 和 data 两个属性，name 表示系列名称，data 表示系列数据。

绘制出的柱状图如下图所示：

绘制折线图

使用 bmc-charts 绘制折线图的代码如下：

// www.javascriptcn.com code example
import { lineChart } from 'bmc-charts';

lineChart({
  el: 'line-chart',
  data: {
    categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    series: [
      {
        name: 'Sales',
        data: [120, 200, 150, 80, 70, 110, 130],
      },
    ],
  },
});

折线图的绘制方式与柱状图类似，只需要将函数名称改为 lineChart 即可。绘制出的折线图如下图所示：

绘制饼图

使用 bmc-charts 绘制饼图的代码如下：

// www.javascriptcn.com code example
import { pieChart } from 'bmc-charts';

pieChart({
  el: 'pie-chart',
  data: [
    { name: 'Mon', value: 120 },
    { name: 'Tue', value: 200 },
    { name: 'Wed', value: 150 },
    { name: 'Thu', value: 80 },
    { name: 'Fri', value: 70 },
    { name: 'Sat', value: 110 },
    { name: 'Sun', value: 130 },
  ],
});

饼图的数据格式与柱状图和折线图不同，直接传入一个数组，数组中每个元素都包含名称和数值两个属性。绘制出的饼图如下图所示：

总结

使用 bmc-charts 包，可以非常方便地进行图表展示。在绘制图表时，可以自由地调整各项参数，根据自己的需求进行定制化。希望本篇文章能够给您带来指导意义，并帮助您更快地了解和使用 bmc-charts 包。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/600573aa81e8991b448e9a4c