小程序进阶-图表库uchart-CSDN博客

本文链接：https://blog.csdn.net/weixin_43166227/article/details/125186918

本文介绍了如何在微信小程序中使用uCharts库来创建高性能图表，包括柱状图、线图等多种类型。uCharts是专为小程序设计的，支持多平台，并提供了丰富的定制选项。通过引入js文件、配置数据和样式，可以轻松实现图表的绘制。示例代码展示了从获取数据到绘制图表的完整流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、图标库

常用图标库有：echart,wx-chart,ucharts。

wx-chart：没有维护了；
echart：更倾向于pc；
ucharts：专为小程序而生，他是伴随小程序跨端框架uni-app而来的，所以uchart更小程序更具有一种天然的属性。

二、ucharts

官方文档：https://www.ucharts.cn
ucharts是高性能跨平台图表库，支持H5图表、APP图表、小程序图表（微信小程序、支付宝小程序、百度小程序、头条小程序、QQ小程序、360小程序），支持饼图、圆环图、线图、柱状图、区域图、雷达图、圆弧进度图、仪表盘、K线图、条状图、混合图、玫瑰图、漏斗图、词云图、地图等。

（1）获取uCharts

原生 uCharts 您只需获取 u-charts.js 或 u-charts.min.js 单个文件，在页面中引用这个 js 即可开始使用，您可通过以下方式获得 uCharts：

通过码云 uCharts 项目开源地址获取 u-charts.js，点击进入码云。
通过 npm 命令npm i @qiun/ucharts安装，成功后即可使用 import 或 require 进行引用。
通过 uCharts 官网定制功能，定制您的专属 uCharts，体积更小、速度更快！

（2）index.wxml

<view class="charts">
  <canvas canvas-id="column" id="column" class="charts" bindtouchend="tap"/>
</view>

（3）index.js

import uCharts from '../../js_sdk/u-charts.js';
var uChartsInstance = {
   };
Page({
   
  data: