从零开始使用微信小程序图表库 WXCharts：新手友好指南-优快云博客

从零开始使用微信小程序图表库 WXCharts：新手友好指南

【免费下载链接】wx-charts xiaolin3303/wx-charts 是一个基于微信小程序的图表组件库。适合在微信小程序开发中使用，并提供了多种常用的图表类型。特点是提供了丰富的图表类型、灵活的自定义选项和良好的兼容性。项目地址: https://gitcode.com/gh_mirrors/wx/wx-charts

关于 WXCharts：你需要知道的核心信息

WXCharts 是一款专为微信小程序打造的轻量级图表组件库 📊，采用 JavaScript 结合 Canvas API 开发，让开发者能轻松在小程序中集成各类数据可视化图表。这个开源项目遵循 MIT 协议，持续维护更新，确保对不同微信客户端版本的兼容性。

💡 为什么选择它？ 相比其他图表库，WXCharts 体积小巧（压缩后仅 30KB 左右），无需引入庞大依赖，特别适合对性能敏感的小程序环境。支持折线图、柱状图、饼图等 10+ 种常见图表类型，基本满足日常数据展示需求。

准备工作：开发环境搭建

在开始前，请确保你的开发环境满足以下要求：

安装 微信开发者工具（最新稳定版）
配置 Node.js 环境（v14+ 推荐）
安装 Git 工具（用于获取源码）

如果需要通过命令行操作，建议使用 VSCode 或其他支持终端的编辑器，这样可以更方便地执行后续的编译命令。

第一步：获取 WXCharts 源码

📌 推荐方式：通过 Git 克隆（适合需要自定义或贡献代码的场景）

打开终端，执行以下命令将项目克隆到本地：

# 克隆仓库到本地
git clone https://gitcode.com/gh_mirrors/wx/wx-charts.git

# 进入项目目录
cd wx-charts

如果不需要修改源码，也可以直接到项目仓库下载 ZIP 压缩包，解压后同样进入项目目录。

第二步：安装依赖与编译项目

2.1 安装必要依赖

项目使用 Rollup 作为构建工具，需要先安装依赖包：

# 安装项目依赖
npm install

2.2 编译生成可用文件

执行编译命令生成小程序可用的组件文件：

# 执行构建命令
npm run build

执行成功后，会在项目根目录生成 dist 文件夹，里面包含两个重要文件：

wxcharts.js（未压缩版，适合开发调试）
wxcharts-min.js（压缩版，适合生产环境）

💡 小贴士：如果需要全局使用 Rollup 工具，可以执行 npm install -g rollup 进行安装，但这不是必须的，因为项目已配置 npm scripts。

常见问题

Q：执行 npm install 时报错怎么办？
A：尝试删除 node_modules 文件夹和 package-lock.json 文件，然后重新执行 npm install。如果是网络问题，可以配置淘宝镜像：npm config set registry https://registry.npmmirror.com

Q：编译后没有生成 dist 文件夹？
A：检查终端输出的错误信息，通常是依赖安装不完整或 Node.js 版本过低导致，建议使用 Node.js v14 及以上版本。

第三步：集成到小程序项目

3.1 复制编译产物

将编译生成的 dist 文件夹复制到你的小程序项目中，推荐放在 utils 或 components 目录下，例如：

你的小程序项目/
├── components/
│   └── wxcharts/       # 复制过来的 dist 文件夹
│       ├── wxcharts.js
│       └── wxcharts-min.js

3.2 页面配置引用

在需要使用图表的页面 JSON 文件中声明组件引用：

{
  "usingComponents": {
    "chart-component": "../../components/wxcharts/wxcharts-min"
  }
}

这里的 chart-component 是自定义的组件名称，可以根据需要修改，路径需根据实际存放位置调整。

第四步：创建你的第一个图表

4.1 编写页面结构

在页面的 WXML 文件中添加图表组件标签：

<!-- 图表容器 -->
<view class="chart-container">
  <chart-component 
    type="line"          <!-- 图表类型：line/column/pie 等 -->
    series="{{chartData}}"  <!-- 数据系列 -->
    categories="{{xAxis}}"  <!-- X轴分类 -->
    width="100%"         <!-- 宽度（支持百分比或具体像素） -->
    height="300"         <!-- 高度（建议固定像素值） -->
    option="{{chartConfig}}" <!-- 额外配置项 -->
  ></chart-component>
</view>

4.2 配置图表数据

在页面的 JS 文件中定义图表数据和配置：

Page({
  data: {
    // 图表数据系列
    chartData: [
      { 
        name: '用户增长',  // 系列名称
        data: [120, 190, 150, 230, 290],  // 数据数组
        color: '#3498db'  // 自定义线条颜色（可选）
      }
    ],
    // X轴分类标签
    xAxis: ['1月', '2月', '3月', '4月', '5月'],
    // 图表配置项
    chartConfig: {
      legend: true,  // 显示图例
      dataLabel: false,  // 是否在图表上显示数据值
      backgroundColor: '#f5f5f5'  // 图表背景色
    }
  }
})

4.3 效果预览

保存文件后，在微信开发者工具中预览页面，你应该能看到一个蓝色线条的折线图，展示了5个月的用户增长数据。

常见问题

Q：图表显示不完整或变形怎么办？
A：检查宽度设置，建议在小程序中使用固定像素高度，宽度可以用 100% 配合父容器控制。如果在 scroll-view 中使用，需要确保容器有明确高度。

Q：如何修改图表颜色和样式？
A：通过 option 参数配置，具体可参考项目 example 目录中的演示案例，或查看源码中的配置说明。

图表类型与高级配置

WXCharts 支持多种图表类型，只需修改组件的 type 属性即可切换，常用类型包括：

line：折线图（支持曲线/直线切换）
column：柱状图（支持堆叠效果）
pie：饼图（支持环形图变种）
radar：雷达图（适合多维度对比）

实用配置示例：

// 柱状图配置示例
chartConfig: {
  barWidth: 20,  // 柱子宽度
  stack: true,   // 启用堆叠效果
  animation: true  // 开启动画
}

// 饼图配置示例
chartConfig: {
  radius: [40, 60],  // 设置内半径和外半径（环形图效果）
  label: true       // 显示标签
}