收藏人数:
购买源码授权版（
试用
使用 HBuilderX 导入示例项目
赞赏（0）
更新记录
1.0.8（2026-02-09）
新增加山峰图表mountain 为了方便自定义颜色增加或修改了数据配置属性 柱状图增加了自定义线性渐变，详情请看下面文档。
1.0.7（2026-02-04）
新增加雷达图radar2 雷达图模式下type属性有原来的radar改为radar1和radar2可分别生成不同的效果。
1.0.6（2026-01-26）
雷达图添加自定义是否显示数字，如果不需要显示数字 设置isnum为false即可。
查看更多平台兼容性
uni-app x(4.42)
| Chrome | Safari | Android | iOS | 鸿蒙 | 微信小程序 |
|---|---|---|---|---|---|
| √ | - | 5.0 | - | - | - |
wui-charts开发文档介绍
简介：
wui-charts 它不是通过 Webview 套壳来实现图表功能，而是纯UTS编写 Canvas 绘制的轻量级图表库，
弥补了 uniapp-x 在app端渲染画布图表追求性能的需求，同时也填补了uniapp-x的插件生态
目前包含了大多数常用的图表，后期会陆续增加。特此声明：不兼容旧版uniapp他是uniapp-x的api优势：
纯 UTS 编写：wui-charts 完全采用 UTS 编程语言，保证了图表的执行效率和性能。
Canvas 绘制：直接在 Canvas 上绘制图表，避免了 Webview 的性能开销，使得图表更加流畅。
轻量级：无需依赖额外的 Webview，减少了应用的包体积，提升了加载速度。使用说明：
通过插件市场下载会自动导入插件到项目中之后只需简单三部。
1.在使用的页需面引入插件。
import { wuiCharts } from '@/uni_modules/wui-charts';
2.实例化wui-charts插件并绑定Canvas的id 以vue的选项api为例。
<template>
<view style="background-color: aqua;align-items: center;padding:2px; ">
<canvas canvas-id="canvas" id="canvas" @click="setData"></canvas>
</view>
</template>
export default {
import { wuiCharts } from '@/uni_modules/wui-charts';
data() {
return {
// 处理双击事件
clickTimes: 0,
//实例化插件传入canvas的id
charts: null as wuiCharts | null,
//初始化前准备的配置项
opts: {
//图表类型
type: 'columnar1',
//初始化canvas的宽请与css设置一直rpx需要转成px
width: 350,
//初始化canvas的高请与css设置一直rpx需要转成px
height: 250,
//初始化canvas的背景色
bgColor: 'rgba(255,255,255,1)',
//初始化内边距，绘制时按照内边距向内绘制
padding: 10,
//初始竖轴刻度和参照标识
reference: ["0", "20", "40", "60", "80", "100"],
//初始横轴刻度和参照标识和数据长度一直,设置series后会覆盖data中每一项的seriesName
series: ['2021', '2022', '2023', '2024', '2025', '2026', '2027'],
//动画过度时间animate为true时有效
speed: 50,
//是否开启过度动画，设定固定数据时的过度动画
animate: true,
//总刻度值，数据参照的最大值
total: 100,
numDisplayTop:true,//数据数字true在定部显示,false在矩形内部显示
data: [
{ "seriesName": '2021', "value": 30, cPeak: '#555', cTop: 'rgba(0, 180, 160, 0.6)', cBottom: 'green' },
{ "seriesName": '2022', "value": 90, cPeak: '#555', cTop: 'rgba(0, 180, 160, 0.3)', cBottom: 'green' },
{ "seriesName": '2023', "value": 50, cPeak: '#555', cTop: 'rgba(0, 180, 160, 0.3)', cBottom: 'green' },
{ "seriesName": '2024', "value": 100, cPeak: '#555', cTop: 'rgba(0, 180, 160, 0.3)', cBottom: 'green' },
{ "seriesName": '2025', "value": 60, cPeak: '#555', cTop: 'rgba(0, 180, 160, 0.3)', cBottom: 'green' },
{ "seriesName": '2026', "value": 40, cPeak: '#555', cTop: 'rgba(0, 180, 160, 0.3)', cBottom: 'green' },
{ "seriesName": '2027', "value": 30, cPeak: '#555', cTop: 'rgba(0, 180, 160, 0.3)', cBottom: 'green' },
] as UTSJSONObject[]
} as UTSJSONObject,
//数据和横轴series长度一直
data: [] as UTSJSONObject[]
}
},
onLoad() {
this.data = this.opts.data as UTSJSONObject[];
},
onReady() {
//初始化画布
this.charts = new wuiCharts('canvas', this.opts);
},
methods: {
/* 更新canvas数据 */
setData(e : UniPointerEvent) {
this.clickTimes++;
if (this.clickTimes == 2) {
this.clickTimes = 0;
// 处理双击事件...
this.charts!.setSpeed(50);
this.charts!.setAnimate(true);
this.charts!.drawing(this.data);
}
setTimeout(() => {
if (this.clickTimes == 1) {
this.clickTimes = 0;
// 处理单击事件...
this.charts!.menuEvent(e.clientX, e.clientY);
}
}, 250)
}
}
}vue组合API 简单实用实例
vue组合API也是在生命周期onReady之后初始化画布和更新数据。
<template>
<scroll-view style="flex:1" bounces="false">
<view style="background-color: aqua;align-items: center;padding:2px; ">
<canvas canvas-id="canvas" id="canvas" @click="setData"></canvas>
</view>
</scroll-view>
</template>
<script setup lang="uts">
/* 引入wui-charts插件 */
import { wuiCharts } from '@/uni_modules/wui-charts';
let charts : wuiCharts | null = null;
let clickTimes = 0;
let data = [
{ seriesName: '一班', value: 80,cPeak: '#666', cTop: '#00CFF9', cBottom: 'rgba(0, 150, 220, 0.3)' },
{ seriesName: '二班', value: 120, cPeak: '#666', cTop: '#00E8C6', cBottom: 'rgba(0, 180, 160, 0.3)' },
{ seriesName: '三班', value: 70, cPeak: '#666', cTop: '#FFE880', cBottom: 'rgba(255, 190, 80, 0.3)' },
{ seriesName: '四班', value: 100, cPeak: '#666', cTop: '#FFA8A8', cBottom: 'rgba(255, 120, 120, 0.3)' },
] as UTSJSONObject[];
let opts = {
//图表类型
type: 'mountain',
//初始化canvas的宽请与css设置一直rpx需要转成px
font: 10,
width: 350,
//初始化canvas的高请与css设置一直rpx需要转成px
height: 250,
//初始化canvas的背景色
bgColor: 'rgba(255,255,255,1)',
//初始化内边距，绘制时按照内边距向内绘制
padding: 10,
//初始横轴刻度和参照标识和数据长度一直,设置series后会覆盖data中每一项的seriesName
series: ['2021', '2022', '2023', '2024'],
//初始竖轴刻度和参照标识
reference: ["0", "20", "40", "60", "80", "100", "120"],
//总刻度值，数据参照的最大值
// total: 100,
//动画过度时间animate为true时有效
speed: 50,
//是否开启过度动画，设定固定数据时的过度动画
animate: true,
data: data
} as UTSJSONObject;
onReady(() => {
charts = new wuiCharts('canvas', opts);
});
/* 更新canvas数据 */
let setData = (e : UniPointerEvent) => {
clickTimes++;
if (clickTimes == 2) {
clickTimes = 0;
// 处理双击事件...
charts!.setSpeed(50);
charts!.setAnimate(true);
charts!.drawing(data);
}
setTimeout(() => {
if (clickTimes == 1) {
clickTimes = 0;
// 处理单击事件...
charts!.menuEvent(e.clientX, e.clientY);
}
}, 250)
}
</script>wui-charts目前暴露的方法有drawing ，setSpeed，setAnimate，getPainted，getimgData，toDataURL，clear，menuEvent，setScale
其余的绘制方法都是模块化的只需在初始化传入的opts配置项中配置即可。
除了type是必须配置其他可忽略。
注意：初始化绑定了 canvas 的 id 后设置canvas的宽和高只有在opts配置有效，css设置宽和高无效果，其它css属性可以正常设置。每个图表种类的配置项说明
columnar1 单柱状图 columnar2 重叠双柱状图 columnar3 正负单柱状图 line1 单折线图 和 line2 多折线图 mountain山峰图 配置都是一样的
opts:{
type: 'columnar1', //图表类型 必须
font: 10, //字体大小
width: 350, //画布的宽
height: 250, //画布的高
bgColor: 'rgba(255,255,255,1)', //初始化canvas画布的背景色
padding: 10, //初始化内边距，绘制时按照内边距向内绘制
reference: ["0", "200", "400", "600", "800", "1000"], //初始竖轴刻度和参照标识
series: ['2021', '2022', '2023', '2024', '2025', '2026'],//初始横轴刻度和参照标识和数据长度一直,设置series后会覆盖data中每一项的seriesName
speed: 50, //动画过度时间animate为true时有效
animate: true, //是否开启过度动画，设定固定数据时的过度动画
total: 1000, //总刻度值，数据参照的最大值
numDisplayTop:true, //数据数字true在定部显示,false在矩形内部显示
data:[] as UTSJSONObject[] //渲染的数据具体介绍参照下面每个图表种类的data数据说明
}
pieshaped 饼状图
opts:{
type: 'pieshaped', //图表类型 必须
font: 10, //字体大小
width: 350, //画布的宽
height: 250, //画布的高
bgColor: 'rgba(255,255,255,1)', //初始化canvas画布的背景色
padding: 50, //初始化内边距，绘制时按照内边距向内绘制
speed: 50, //动画过度时间animate为true时有效
animate: true, //是否开启过度动画，设定固定数据时的过度动画
isCatoy: true, //是否显示颜色类别图例
series:['1','2','3','4','5'] //初始横轴刻度和参照标识和数据长度一直,设置series后会覆盖data中每一项的seriesName
data:[] as UTSJSONObject[] //渲染的数据具体介绍参照下面每个图表种类的data数据说明
}
radar1雷达图 和 radar2 雷达图
opts:{
type: 'radar1', //图表类型 必须
width: 350, //画布的宽
height: 250, //画布的高
bgColor: 'rgba(255,255,255,1)', //初始化canvas画布的背景色
fillColor:'rgba(0,66,0,0.3)', //雷达区域数据填充色 type为radar有效
dotColor:'#000', //圆点颜色 type为radar1有效
textColor:'#000', //标题颜色 type为radar1有效
numColor:'#0000ff', //数字颜色 type为radar1有效
gridColor:'#000', //网格颜色 type为radar1有效
gridFill:[255,255,255], //网格填充透明色数组形式呈现长度3,0到255之间 type为radar1有效
isnum:false, //是否显示数字默认为true显示 type为radar1有效
series:['1','2','3','4','5','6'], //初始横轴刻度和参照标识和数据长度一直,设置series后会覆盖data中每一项的seriesName
padding: 68, //初始化内边距，绘制时按照内边距向内绘制
speed: 50, //动画过度时间animate为true时有效
animate: true, //是否开启过度动画，设定固定数据时的过度动画
data:[] as UTSJSONObject[] //渲染的数据具体介绍参照下面每个图表种类的data数据说明
}
dashboard 仪表盘
opts:{
type: 'dashboard', //图表类型 必须
width: 350, //画布的宽
height: 200, //画布的高
bgColor: 'rgba(255,255,255,1)', //初始化canvas画布的背景色
padding: 20, //初始化内边距，绘制时按照内边距向内绘制
total: 100, //总刻度
speed: 50, //动画过度时间animate为true时有效
animate: true, //是否开启过度动画，设定固定数据时的过度动画
data: 90 //数据值
}
annular 环形进度条
opts:{
type: 'annular', //图表类型 必须
width: 110, //画布的宽
height: 110, //画布的高
lineWidth: 5, //进度条的粗细
bgcolor: 'rgba(255,255,255,1)', //初始化canvas画布的背景色
padding: 20, //初始化内边距，绘制时按照内边距向内绘制
speed: 50, //动画过度时间animate为true时有效
animate: true, //是否开启过度动画，设定固定数据时的过度动画
data: 50, //数据值
}
ball 水球波纹进度
opts:{
type: 'ball', //图表类型 必须
width: 120, //画布的宽
height: 120, //画布的高
lineWidth: 0, //水球边缘粗细
bgcolor: '#fff', //初始化canvas画布的背景色
speed: 50, //动画过度时间animate为true时有效
animate: true, //是否开启过度动画，设定固定数据时的过度动画
data: 80, //数据值
}每个图表种类的data数据说明
columnar1 单柱状图 columnar2 重叠双柱状图 columnar3 正负单柱状图
//如果在opts里设置了series长度要和 opts的series要和data的长度 保持一直
data:[{
seriesName: '系列1', //对应的柱状名称如果在配置设置了optss的series会覆盖到data.seriesName
value: 30, //数据值
cPeak: '#555', //柱状图的数字颜色
cTop: '#888', //柱状图的顶部渐变色如果不需要渐变和cBottom设置一样即可
cBottom: 'green' //柱状图的底部部渐变色如果不需要渐变和cBottom设置一样即可
target: 400, //目标数据值仅在columnar2 重叠双柱状图设置有效
}] as UTSJSONObject[]
mountain 山峰图
//如果在opts里设置了series长度要和 opts的series要和data的长度 保持一直
data:[{
seriesName: '一班', //对应的山峰图名称如果在配置设置了optss的series会覆盖到data.seriesName
value: 80, //数据值
cPeak: '#666', //山峰图的数字颜色
cTop: '#00CFF9', //山峰图的顶部渐变色如果不需要渐变和cBottom设置一样即可
cBottom: 'rgba(0, 150, 220, 0.3)' //山峰图的底部部渐变色如果不需要渐变和cBottom设置一样即可
}] as UTSJSONObject[];
line1 单折线图
//如果在opts里设置了series长度要和 opts的series要和data的长度 保持一直
data:[{
seriesName: '2021', //对应的柱状名称如果在配置设置了optss的series会覆盖到data.seriesName
lineColor":'#0000ff', //每条线段的颜色,不设置默认黑色
value: 300 //数据值
}] as UTSJSONObject[]
line2 多折线图
//长度最多支持4项
data: [{
name: '酸枣仁', //每项的名称
lineColor: 'red', //每项颜色不设置默认黑色
data:[{
value:200, //数据值
}]
}] as UTSJSONObject[]
pieshaped 饼状图
//如果在opts里设置了series长度要和 opts的series要和data的长度 保持一直
//如果在opts里没有设置series则data长度无要求，适度即可
data:[{
value: 30, //数据值
areaColor: "black", //每一项的颜色
seriesName: "一班" //每一项的标题名称如果在配置设置了optss的series会覆盖到data.seriesName
}] as UTSJSONObject[]
radar1 和 radar2 雷达图
//如果在opts里设置了series长度要和 opts的series要和data的长度 保持一直
//如果在opts里没有设置series则data长度无要求，适度即可
data:[{
"value": 70, //数据值
"seriesName": "超大盘", //每一项的标题名称如果在配置设置了optss的series会覆盖到data.seriesName
}] as UTSJSONObject[]
dashboard 仪表盘
//需要在初始化opts的时候配置 total 总刻度，如不配置默认是100
data:80, //数据值number类型
annular 环形进度条
data:80, //数据值number类型
ball 水球波纹进度
data:80, //数据值number类型
下载 48
赞赏 0
下载 11206925
赞赏 1856
赞赏
京公网安备：11010802035340号