首页 > 分享 > 【微信小程序】wx

【微信小程序】wx

花匠小妙招
2025-01-11 22:34

wx-charts
微信小程序主流的图表工具

基于 Canvas，体积小

注意：wx-charts 插件无法在组件内使用。

支持图表类型

饼图 pie圆环图 ring线图 line柱状图 column区域图 area雷达图 radar

如何使用

直接拷贝编译好的文件 dist/wxcharts-min.js 到项目中（js下载地址）

import wxCharts from '../../utils/wxcharts-min.js' 1 wxml 中定义

<canvas canvas-id="pieCanvas" disable-scroll="true" class="pieCanvas" style="width:300px; height:300px;"></canvas> 1

canvas-id 与 new wxCharts({canvasId: ‘’}) 中的 canvasId 值一致。

Demo

饼图 pie

let chart = new wxCharts({ animation: true, canvasId: 'pieCanvas', type: 'pie', series: [{ name: '成交量1', data: 15, }, { name: '成交量2', data: 35, }, { name: '成交量3', data: 78, }], width: 300, height: 300, })

1234567891011121314151617

在这里插入图片描述
2. 圆环图 ring

let chart = new wxCharts({ animation: true, canvasId: 'ringCanvas', type: 'ring', extra: { ringWidth: 25, pie: { offsetAngle: -45 } }, title: { name: '70%', color: '#7cb5ec', fontSize: 25 }, subtitle: { name: '收益率', color: '#666666', fontSize: 15 }, series: [{ name: '成交量1', data: 15, stroke: false }, { name: '成交量2', data: 35, stroke: false }, { name: '成交量3', data: 78, stroke: false }, { name: '成交量4', data: 63, stroke: false }], disablePieStroke: true, width: 300, height: 300, dataLabel: false, legend: false, padding: 0 })

1234567891011121314151617181920212223242526272829303132333435363738394041424344

在这里插入图片描述

线图 line

123456789101112131415161718192021222324252627282930313233343536

在这里插入图片描述

柱状图 column

12345678910111213141516171819202122232425262728293031

在这里插入图片描述

区域图 area

1234567891011121314151617181920212223242526272829303132333435363738

在这里插入图片描述

雷达图 radar

let chart = new wxCharts({ canvasId: 'radarCanvas', type: 'radar', categories: ['1', '2', '3', '4', '5', '6'], series: [{ name: '成交量1', data: [90, 110, 125, 95, 87, 122] }], width: 300, height: 200, extra: { radar: { max: 150 } } });

12345678910111213141516

在这里插入图片描述

参数说明

参数类型说明optsObjectopts.canvasIdString Required对应wxml中的canvasIdopts.typeString Required图表类型，可选值为：pie、line、column、area、opts.widthNumber Requiredcanvas宽度，单位pxopts.heightNumber Requiredcanvas高度，单位pxopts.legendBoolean是否显示图表下方各类别的标识，默认trueopts.backgroundStringcanvas背景颜色，默认#fffopts.animationBoolean是否动画展示，默认trueopts.enableScrollBoolean是否开启图表可拖拽滚动，默认false，支持 line、area 图表类型（需配合绑定scrollStart, scroll, scrollEnd 方法）opts.categoriesArray Required数据类别分类 (pie、ring 图表不需要)opts.dataLabelBoolean是否在图表中显示数据内容值，默认trueopts.dataPointShareBoolean是否在图表中显示数据点图形标识，默认trueopts.xAxisObjectX轴配置opts.xAxis.gridColorStringX轴网格颜色opts.xAxis.fontColorStringX轴数据点颜色opts.xAxis.disableGridBoolean不绘制X轴网格，默认falseopts.xAxis.typeString可选值：calibration（刻度），默认包含样式opts.yAxisObjectY轴配置opts.yAxis.formatFunction自定义Y轴文案显示opts.yAxis.minNumberY轴起始值opts.yAxis.manNumberY轴终止值opts.yAxis.titleStringY轴titleopts.yAxis.gridColorStringY轴网格颜色opts.yAxis.fontColorStringY轴数据点颜色opts.yAxis.titleFontColorStringY轴title颜色opts.yAxis.disabledBoolean不绘制Y轴，默认falseopts.extraObject其它非通用配置项opts.extra.ringWidthNumberring圆环宽度，单位pxopts.extra.lineStyleString仅对line、area图表有效，可选值：curve曲线、straight直线，默认straightopts.extra.columnObjectcolumn图表相关配置opts.extra.column.widthNumber柱状图每项的图形宽度，单位pxopts.extra.legendTextColorStringlegend文案颜色opts.seriesArray Required数据列表

数据列表series每项参数说明

参数类型说明dataItemObjectdataItem.dataArray Required饼图、圆环图为Number数据，如果传入null，图表、该处出现断点dataItem.colorString不传入则使用系统默认的配色方案dataItem.nameString数据名称dataItem.formatFunction自定义显示数据内容

ring 图表相关配置

参数类型说明opts.titleObject仅支持 ring 图表类型opts.title.nameString标题内容opts.title.fontSizeNumber标题字体大小，单位pxopts.title.colorString标题颜色opts.title.offsetXNumber标题横向位置偏移量，单位px，默认0opts.subtitleObject仅支持 ring 图表类型opts.subtitle.nameString副标题内容opts.subtitle.fontSizeNumber副标题字体大小，单位pxopts.subtitle.colorString副标题颜色opts.subtitle.offsetXNumber副标题横向位置偏移量，单位px，默认0

radar 图表相关配置

参数类型说明opts.extra.radarObjectradar图表相关配置opts.extra.radar.maxNumber数据区间最大值，用于调整数据显示的比例，默认series data的最大值opts.extra.radar.labelColorString各项标识文案的颜色，默认#666opts.extra.radar.gridColorString雷达图网格颜色，默认#ccc

pie、ring 图表相关配置

参数类型说明opts.disablePieStrokeBoolean不绘制pie、ring图表各区块的白色分割线，默认falseopts.extra.pieObjectpie、ring图表相关配置opts.extra.pie.offsetAngleNumber起始角度偏移度数，顺时针方向，起点为3点钟位置（比如要设置起点为12点钟位置，即逆时针偏移90度，传入-90即可），默认0

wx-charts 方法

updateData(data) 更新图表数据。data: object，data.categories(可选)，data.series(可选)，data.title(可选)，data.subtitle(可选)stopAnimation()，停止当前正在展示的动画效果，直接展示渲染的最终结果。addEventListener(type, listener) 添加事件监听，type: string 事件类型，listener: function 处理函数。getCurrentDataIndex(e) 获取图表中点击时的数据序列编号（-1表示未找到对应的数据区域），e: object 微信小程序标准事件，需要在 wxml 上绑定 touch 事件。

<canvas bindtouchstart="touchHandler" canvas-id="pieCanvas" disable-scroll="true" class="pieCanvas" style="width:300px; height:300px;"></canvas> touchHandler (e) { let index = this.data.chart.getCurrentDataIndex(e); console.log('index', index) } 123456 howToolTip(e, options?) 图表中展示数据详细内容（目前仅支持 line 和 area 图表类型），详见githubscrollStart(e), scroll(e), scrollEnd(e) 设置支持图表拖拽系列事件（支持 line，area，column），详见github