微信小程序-wx-charts 图表插件

最新推荐文章于 2025-10-23 02:21:53 发布

原创

最新推荐文章于 2025-10-23 02:21:53 发布 · 2.7k 阅读

CC 4.0 BY-SA版权

文章标签：

本文介绍了微信小程序的图表插件wx-charts，它基于canvas绘制，提供饼图、线图、柱状图等多种图表类型。使用方法包括下载js文件并放置于小程序目录，然后在wxml、wxss和js中进行相应配置。文章还提及了部分参数说明和简单示例。

微信小程序图表插件（wx-charts）基于canvas绘制，体积小巧，支持图表类型饼图、线图、柱状图、区域图等图表图形绘制。

支持图标类型

1.如何使用？

下载wxcharts-min.js或者wxcharts.js，存放在小程序文件夹目录，我一般存放在utils文件夹下面

.wxml页面中：

 <canvas class="canvas" canvas-id="radarGraph"></canvas>

2.部分参数说明

参数	说明
opts.canvasId	微信小程序canvas-id
opts.width	canvas宽度，单位为px
opts.height	canvas高度，单位为px
opts.title	（only for ring chart)
opts.title.name	标题内容
opts.title.fontSize	标题字体大小
opts.title.color	标题颜色可选
opts.legend	是否显示图标下方的标识
opts.type	图表类型：pie,line,column,area,ring
opts.categories	(饼图、圆环图不需要) 数据类别分类
opts.dataLabel	是否在图表中显示数据内容值
opts.dataPointShape	是否在图表中显示数据点标识
opts.xAxis	X轴配置
opts.yAxis	Y轴配置

3.简单的示例

wxml页面：

<!--pages/charts/charts.wxml-->
<!-- 切换栏 -->
<view class="swiper-tab">
  <block wx:for="{
  
  {swipertab}}" wx:key="sptab">
    &l