收藏人数:
购买源码授权版（
试用
使用 HBuilderX 导入示例项目
赞赏（0）
更新记录
2.0.4（2026-03-18）
修复同时开启加载动画和进场动画时，当动画还没有执行完毕时，突然卸载页面时的闪退bug。
2.0.3（2026-03-14）
紧急修复HBuilderX升级到v5.03后的安卓端编译报错问题。 JVM（Android 运行环境）规定「单个函数 / 变量编译后的字节码体积不得超过 64KB（65535 字节）的约束
2.0.2（2026-03-14）
新增地图可视化图表，新增表格图表，新增Loading加载动画和图表进场动画。 交互事件menuEvent事件新增选中回调函数，新增默认选中事件selectedState 详情看页面文档。
查看更多平台兼容性
uni-app x(4.42)
| Chrome | Safari | Android | iOS | 鸿蒙 | 鸿蒙插件版本 | 微信小程序 |
|---|---|---|---|---|---|---|
| √ | - | 5.0 | - | √ | 2.0.0 | × |
wui-charts开发文档介绍
简介：
wui-charts它不是通过Webview套壳来实现图表功能，而是纯UTS编写Canvas绘制的轻量级图表库，
弥补了 uniapp-x 在app端渲染画布图表追求性能的需求，同时也填补了uniapp-x的插件生态
目前包含了大多数常用的图表，后期会陆续增加。特此声明：不兼容旧版uniapp他是uniapp-x的api
从2.0.0版本开始兼容鸿蒙app-harmony优势：
纯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; ">
<!--⚠️注意为了跨端兼容尤其在鸿蒙app-harmony端，最好同时设置 canvas的style的width和 height并且要和opts的一直-->
<canvas canvas-id="canvas" id="canvas"
:style="{'width':opts.width as number+'px','height':opts.height as number+'px'}"
@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; ">
<!--⚠️注意为了跨端兼容尤其在鸿蒙app-harmony端，最好同时设置 canvas的style的width和 height并且要和opts的一直-->
<canvas canvas-id="canvas" id="canvas"
:style="{'width':opts.width as number+'px','height':opts.height as number+'px'}"
@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目前暴露的方法有
从2.0.2版本开始对menuEvent的参数做了调整
//重新绘制参数是对应相应图表更新后的新data数据
drawing(data : any)
//设置动画针参数是数字
setSpeed(speed : number)
//是否显示动画参数是布尔值
setAnimate(animate : boolean)
//获取像素信息返回值ImageData
getimgData()
//获取图片返回值string
toDataURL()
//清空画布的所有内容
clear()
//处理点击画布交互事件给画布绑定点击事件后利用menuEvent方法处理，success回调函数获取数据
menuEvent({
x: e.clientX,
y: e.clientY,
success: (datas: UTSJSONObject) =>{
console.log(datas)
}
})
//缩放像素参数是需要缩放的值
setScale(scale : number)
//图表交互选中事件仅type为chinaMap和table可用，可以在页面按钮绑定使用chinaMap
//chinaMap时参数是省份名字。table时参数是第一列的表体数据
selectedState(provinceName : string)以下是给canvas绑定菜单事件的和动画事件的示例,以 columnar1 单柱状图为例
<template>
<scroll-view style="flex:1" bounces="false">
<view style="align-items: center;height: 30px;justify-content: center;">
双击过度动画，单击显示详情
</view>
<view style="background-color: aqua;align-items: center;padding:2px;">
<!--⚠️注意为了跨端兼容尤其在鸿蒙app-harmony端，最好同时设置 canvas的style的width和 height并且要和opts的一直-->
<canvas canvas-id="canvas" id="canvas"
:style="{'width':opts.width as number+'px','height':opts.height as number+'px'}"
@click="setData"></canvas>
</view>
<view>
<view style="align-items: center;height: 40px;justify-content: center;">模拟数据测试</view>
<view class="slid" style="margin-top: 0;">
<text style="color: #fff;width: 60px;text-align: center;">2021</text>
<slider style="flex: 1;" valueColor="#fff" @changing="changing2021"
:value="(data[0]['value'] as number)" :min="0" :max="100" :step="1" :show-value="true" />
</view>
<view class="slid">
<text style="color: #fff;width: 60px;text-align: center;">2022</text>
<slider style="flex: 1;" valueColor="#fff" @changing="changing2022"
:value="(data[1]['value'] as number)" :min="0" :max="100" :step="1" :show-value="true" />
</view>
<view class="slid">
<text style="color: #fff;width: 60px;text-align: center;">2023</text>
<slider style="flex: 1;" valueColor="#fff" @changing="changing2023"
:value="(data[2]['value'] as number)" :min="0" :max="100" :step="1" :show-value="true" />
</view>
<view class="slid">
<text style="color: #fff;width: 60px;text-align: center;">2024</text>
<slider style="flex: 1;" valueColor="#fff" @changing="changing2024"
:value="(data[3]['value'] as number)" :min="0" :max="100" :step="1" :show-value="true" />
</view>
<view class="slid">
<text style="color: #fff;width: 60px;text-align: center;">2025</text>
<slider style="flex: 1;" valueColor="#fff" @changing="changing2025"
:value="(data[4]['value'] as number)" :min="0" :max="100" :step="1" :show-value="true" />
</view>
<view class="slid">
<text style="color: #fff;width: 60px;text-align: center;">2026</text>
<slider style="flex: 1;" valueColor="#fff" @changing="changing2026"
:value="(data[5]['value'] as number)" :min="0" :max="100" :step="1" :show-value="true" />
</view>
<view style="display: flex; flex-direction: row;align-items: center;justify-content: space-between;">
<view class="name" @click="save">保存柱状图1</view>
<view class="name" @click="setScale">缩放尺寸</view>
</view>
</view>
</scroll-view>
</template>
<script>
//引入wui-charts插件
import { wuiCharts } from '@/uni_modules/wui-charts';
export default {
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: {
//模拟数据
changing2021(e : UniSliderChangeEvent) {
this.data[0]['value'] = e.detail.value;
this.charts!.setAnimate(false)
this.charts!.drawing(this.data);
},
changing2022(e : UniSliderChangeEvent) {
this.data[1]['value'] = e.detail.value;
this.charts!.setAnimate(false)
this.charts!.drawing(this.data);
},
changing2023(e : UniSliderChangeEvent) {
this.data[2]['value'] = e.detail.value;
this.charts!.setAnimate(false)
this.charts!.drawing(this.data);
},
changing2024(e : UniSliderChangeEvent) {
this.data[3]['value'] = e.detail.value;
this.charts!.setAnimate(false)
this.charts!.drawing(this.data);
},
changing2025(e : UniSliderChangeEvent) {
this.data[4]['value'] = e.detail.value;
this.charts!.setAnimate(false)
this.charts!.drawing(this.data);
},
changing2026(e : UniSliderChangeEvent) {
this.data[5]['value'] = e.detail.value;
this.charts!.setAnimate(false)
this.charts!.drawing(this.data);
},
//更新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)
},
setScale() {
let width = this.opts.width as number;
if (width == 350) {
this.charts!.setScale(0.8);
this.opts.width = width * 0.8;
} else {
this.charts!.setScale(1.25);
this.opts.width = width * 1.25;
}
this.charts!.setSpeed(50);
this.charts!.setAnimate(true);
this.charts!.drawing(this.data);
},
//保存 canvas到相册
save() {
const url : string = this.charts!.toDataURL();
//保存图片
const daturl = url.split(',');
const dat = daturl[1] as any;
uni.showActionSheet({
itemList: ['保存到相册'],
success: (e) => {
e.tapIndex;
if (e.tapIndex == 0) {
this.savimg('柱状图1', dat)
}
}
})
},
savimg(str : string, dat : any) {
const fs = uni.getFileSystemManager();
fs.writeFile({
filePath: `${uni.env.CACHE_PATH}/${str}.png`,
encoding: "base64",
data: dat,
success: (res : FileManagerSuccessResult) => {
console.log('写入成功', res);
uni.saveImageToPhotosAlbum({
filePath: `${uni.env.CACHE_PATH}/${str}.png`,
success: (callback : SaveImageToPhotosAlbumSuccess) => {
console.log('保存成功', callback);
//保存成功后删除临时文件
fs.unlink({
filePath: `${uni.env.CACHE_PATH}/${str}.png`,
success: () => {
console.log('删除成功');
},
fail: () => {
console.log('删除失败');
}
} as UnLinkOptions)
uni.showToast({
title: "保存成功"
})
}
})
}
} as WriteFileOptions);
}
}
}
</script>
<style>
.name {
height: 40px;
align-items: center;
justify-content: center;
border: 1rpx #999 solid;
border-radius: 4px;
margin: 2px 20px;
flex: 1;
}
.slid {
display: flex;
justify-content: space-around;
flex-direction: row;
align-items: center;
height: 40px;
margin: 2px 20px;
background-color: #00aaff;
border: 1rpx #999 solid;
border-radius: 4px;
}
</style>
其余的绘制方法都是模块化的只需在初始化传入的opts配置项中配置即可。
除了type是必须配置其他可忽略。
注意：初始化绑定了 canvas 的 id 后设置canvas的宽和高只有在opts配置有效，css设置宽和高无效果，其它css属性可以正常设置。
注意：在鸿蒙需要给canvas的宽和高设置样式要和opts配置的宽和高一样，经在鸿蒙模拟器测试如果不设置渲染有差异。每个图表种类的配置项说明
/*
* chinaMap 地图
*/
opts: {
//图表类型
type: 'chinaMap',
//初始化canvas的宽请与css设置一直rpx需要转成px
font: 7,
width: 350,
//初始化canvas的高请与css设置一直rpx需要转成px
height: 250,
//初始化canvas的背景色
bgColor: '#fff',
//选中区域的填充替换色不设置默认不替换
regbgColor: '#ffff00',
//选中区域边框的替换色不设置默认不替换
regborColor: '#00ff00',
//初始化内边距，绘制时按照内边距向内绘制
padding: 5,
//地图边框颜色
mapborColor: '#333',
//省份名称颜色
seriesNameColor: '#000',
//动画过度的时间毫秒100到1000
speed: 300,
//初始渲染的放大动画值默认是从95%到100%
transition: 0.8,
//是否显示加载动画loading开启
isLoading: true,
//设置默认选中的省份
selected: '西藏',
//是否开启初始渲染动画
animate: false,
//是否显示提示框
isMessage: true,
//长度要和data一直，可以选择不配置前提是必须在data里配置seriesName
series: [] as string[],
//地图标题
title: '警示⚠区域️',
//省份的数据以及背景景色详情请查看下面每个图表的data介绍
data: [] as UTSJSONObject[]
};
/*
* table 表格
*/
opts : {
type: 'table',
width: 350, //convas设置宽度
height: 250, // convas设置高度
bgColor: 'rgba(255,255,255,1)',//设置画布背景色
padding: 10,//设置画布内边距
font: 12,//字体大小
//是否显示加载动画loading表格图表没有animate进场动画
isLoading: true,//是否显示Loading加载动画表格图表没有animate进场动画
baseRowHeight: 40,// 基础行高
lineHeight: 15,//行文字的行高
cellPadding: 0,//单元格内边距默认是10
headerbgColor: '#2D7DF2',//表头背景色
headerColor: '#fff',//表头文字颜色
rowColor: '#000',//行文字颜色
rowBgOdd: '#eee',//行背景颜色与rowBgEven交替显示
rowBgEven: '#aaffff',//行背景颜色与rowBgOdd交替显示
isGridline: true,//是否显示表格线
lineColor: '#d3d3d3',//表格分割线颜色
regborColor: '#2D7DF2',//选中区域的边框的
lineWidth: 1,//网格线的粗细
selected: 'null',//默认选中状态
align: 'center',//文本对齐方式"left" | "right" | "center" | "start" | "end"
data: {
tableHeader: [] as UTSJSONObject[],
tableBody: [] as UTSJSONObject[]
} as UTSJSONObject
} as UTSJSONObject;
/*
* columnar1 单柱状图
* columnar2 重叠双柱状图
* columnar3 正负单柱状图
* line1 单折线图
* line2 多折线图
* mountain 山峰图
* 以上配置都是一样的具体配置如下:
*/
opts:{
//图表类型 必须
type: 'columnar1',
//字体大小
font: 10,
//画布的宽
width: 350,
//画布的高
height: 250,
//初始化canvas画布的背景色
bgColor: 'rgba(255,255,255,1)',
//初始化内边距，绘制时按照内边距向内绘制
padding: 10,
//初始竖轴刻度和参照标识
reference: ["0", "200", "400", "600", "800", "1000"],
//总刻度值，默认是数据参照reference最后一项最大的number值
total: 1000,
//初始横轴刻度和参照标识和数据长度一直,设置series后会覆盖data中每一项的seriesName
series: ['2021', '2022', '2023', '2024', '2025', '2026'],
//动画过度时间animate为true时有效
speed: 50,
//是否开启过度动画，设定固定数据时的过度动画
animate: true,
//数据数字true在定部显示,false在矩形内部显示
numDisplayTop:true,
//渲染的数据具体介绍参照下面每个图表种类的data数据说明
data:[] as UTSJSONObject[]
} as UTSJSONObject;
/*
* pieshaped饼状图
*/
opts:{
//图表类型必须
type: 'pieshaped',
//字体大小
font: 10,
//画布的宽
width: 350,
//画布的高
height: 250,
//初始化canvas画布的背景色
bgColor: 'rgba(255,255,255,1)',
//初始化内边距，绘制时按照内边距向内绘制
padding: 50,
//动画过度时间animate为true时有效
speed: 50,
//是否开启过度动画，设定固定数据时的过度动画
animate: true,
//是否显示颜色类别图例
isCatoy: true,
//初始横轴刻度和参照标识和数据长度一直,设置series后会覆盖data中每一项的seriesName
series:['1','2','3','4','5'],
//渲染的数据具体介绍参照下面每个图表种类的data数据说明
data:[] as UTSJSONObject[]
} as UTSJSONObject;
/*
* radar1雷达图
*/
opts:{
//图表类型 必须
type: 'radar1',
//画布的宽
width: 350,
//画布的高
height: 250,
//初始化canvas画布的背景色
bgColor: 'rgba(255,255,255,1)',
//雷达区域数据填充色 type为radar1有效
fillColor:'rgba(0,66,0,0.3)',
//圆点颜色 type为radar1有效
dotColor:'#000',
//标题颜色 type为radar1有效
textColor:'#000',
//数字颜色 type为radar1有效
numColor:'#0000ff',
//网格颜色 type为radar1有效
gridColor:'#000',
//网格填充透明色数组形式呈现长度3,0到255之间 type为radar1有效
gridFill:[255,255,255],
//是否显示数字默认为true显示 type为radar1有效
isnum:false,
//初始横轴刻度和参照标识和数据长度一直,设置series后会覆盖data中每一项的seriesName
series:['一项','二项','三项','四项','五项','六项'],
//初始化内边距，绘制时按照内边距向内绘制
padding: 68,
//动画过度时间animate为true时有效
speed: 50,
//是否开启过度动画，设定固定数据时的过度动画
animate: true,
//渲染的数据具体介绍参照下面每个图表种类的data数据说明
data:[] as UTSJSONObject[]
} as UTSJSONObject;
/*
* radar2雷达图
*/
opts:{
//图表类型 必须
type: 'radar2',
//画布的宽
width: 350,
//画布的高
height: 250,
//初始化canvas画布的背景色
bgColor: 'rgba(255,255,255,1)',
//数据折线颜色 type为radar2有效
strokeColor: '#4A9FD9',
//网格与描边颜色 type为radar2有效
strokeGridColor: '#fff',
//中间多边形的颜色默认是layers数组的最后一个颜色值 type为radar2有效
safetyColor: '#E94E38',
//每块多边形区域的颜色 type为radar2有效
layers: ['#86B971', '#F7D66C', '#F19641', '#E94E38'],
//初始横轴刻度和参照标识和数据长度一直,设置series后会覆盖data中每一项的seriesName
series:['一项','二项','三项','四项','五项','六项','七项'],
//每块多边形区域的宽度 type为radar2有效
gridWidth: 25,
//初始化内边距，绘制时按照内边距向内绘制
padding: 70,
//是否开启过度动画，设定固定数据时的过度动画
animate: true,
//渲染的数据具体介绍参照下面每个图表种类的data数据说明
data: [] as UTSJSONObject[]
} as UTSJSONObject;
/*
* dashboard仪表盘
*/
opts:{
//图表类型 必须
type: 'dashboard',
//画布的宽
width: 350,
//画布的高
height: 200,
//初始化canvas画布的背景色
bgColor: 'rgba(255,255,255,1)',
//初始化内边距，绘制时按照内边距向内绘制
padding: 20,
//总刻度
total: 100,
//动画过度时间animate为true时有效
speed: 50,
//是否开启过度动画，设定固定数据时的过度动画
animate: true,
//数据值
data: 90
} as UTSJSONObject;
/*
* annular环形进度条
*/
opts:{
//图表类型 必须
type: 'annular',
//画布的宽
width: 110,
//画布的高
height: 110,
//进度条的粗细
lineWidth: 5,
//初始化canvas画布的背景色
bgcolor: 'rgba(255,255,255,1)',
//初始化内边距，绘制时按照内边距向内绘制
padding: 20,
//动画过度时间animate为true时有效
speed: 50,
//是否开启过度动画，设定固定数据时的过度动画
animate: true,
//数据值
data: 50,
} as UTSJSONObject;
/*
* ball水球波纹进度
*/
opts:{
//图表类型 必须
type: 'ball',
//画布的宽
width: 120,
//画布的高
height: 120,
//水球边缘粗细
lineWidth: 0,
//初始化canvas画布的背景色
bgcolor: '#fff',
//动画过度时间animate为true时有效
speed: 50,
//是否开启过度动画，设定固定数据时的过度动画
animate: true,
//数据值
data: 80,
} as UTSJSONObject;每个图表种类的data数据说明
chinaMap 地图 可视化图表。
如果在opts里设置了series长度要和 opts的series要和data的长度 保持一直。
如果data数组的每一项的bgColor不设置默认是随机色，省份名字必须是下面的文字。
data:[{
seriesName: '福建',
value: '600',
bgColor: '#fff'
},
{
seriesName: '江西',
value: '1300',
bgColor: '#ff0000'
},
{
seriesName: '浙江',
value: '1050',
bgColor: '#fff'
},
{
seriesName: '安徽',
value: '1000',
bgColor: '#fff'
},
{
seriesName: '江苏',
value: '1009',
bgColor: 'rgba(255, 0, 0, 0.8)'
},
{
seriesName: '山东',
value: '1003',
bgColor: 'rgba(255, 0, 0, 0.8)'
},
{
seriesName: '河北',
value: '1002',
bgColor: '#fff'
},
{
seriesName: '天津',
value: '1009',
bgColor: '#fff'
},
{
seriesName: '北京',
value: '222',
bgColor: '#fff'
},
{
seriesName: '上海',
value: '222',
bgColor: '#fff'
},
{
seriesName: '辽宁',
value: '1006',
bgColor: '#fff'
},
{
seriesName: '吉林',
value: '1001',
bgColor: '#fff'
},
{
seriesName: '黑龙江',
value: '1000',
bgColor: '#fff'
},
{
seriesName: '内蒙古',
value: '100',
bgColor: '#fff'
},
{
seriesName: '新疆',
value: '10',
bgColor: 'rgba(255, 0, 0, 0.8)'
},
{
seriesName: '甘肃',
value: '2100',
bgColor: '#fff'
},
{
seriesName: '青海',
value: '104',
bgColor: '#fff'
},
{
seriesName: '西藏',
value: '100',
bgColor: '#fff'
},
{
seriesName: '宁夏',
value: '104',
bgColor: '#fff'
},
{
seriesName: '四川',
value: '107',
bgColor: '#fff'
},
{
seriesName: '云南',
value: '1009',
bgColor: '#fff'
},
{
seriesName: '陕西',
value: '160',
bgColor: '#fff'
},
{
seriesName: '重庆',
value: '100',
bgColor: '#fff'
},
{
seriesName: '贵州',
value: '180',
bgColor: '#fff'
},
{
seriesName: '山西',
value: '190',
bgColor: '#fff'
},
{
seriesName: '河南',
value: '700',
bgColor: '#fff'
},
{
seriesName: '湖北',
value: '400',
bgColor: '#fff'
},
{
seriesName: '湖南',
value: '500',
bgColor: '#fff'
},
{
seriesName: '广西',
value: '1000',
bgColor: '#fff'
},
{
seriesName: '海南',
value: '100',
bgColor: '#fff'
},
{
seriesName: '广东',
value: '900',
bgColor: '#fff'
},
{
seriesName: '香港',
value: '600',
bgColor: '#fff'
},
{
seriesName: '澳门',
value: '500',
bgColor: '#fff'
},
{
seriesName: '台湾',
value: '10',
bgColor: '#fff'
}] as UTSJSONObject[];table 表格 可视化图表
data 是UTSJSONObject类型 里面有两个UTSJSONObject[]类型分别是tableHeader和tableBody。
tableHeader表头数据数组，tableBody表体数据数组具体格式如下:（三列三行举例）。
tableBody数组每一项的bgColor如果设置了会覆盖掉opts.rowBgOdd和opts.rowBgEven的行背景色交替显的示配置。
data: {
tableHeader: [
{ title: '姓名', prop: 'name', width: 100 },
{ title: '年龄', prop: 'age', width: 100 },
{ title: '地址', prop: 'address', width: 100 },
] as UTSJSONObject[],
tableBody: [
{
name: '李四',
age: 35,
address: '邢台市',
bgColor:'#fff000'
},
{
name: '张三',
age: 28,
address: '北京市',
bgColor:'#fff000'
},
{
name: '王鸣',
age: 28,
address: '北京市',
bgColor:'#fff000'
}
] as UTSJSONObject[]
} as UTSJSONObject
columnar1 单柱状图 columnar2 重叠双柱状图 columnar3 正负单柱状图
如果在opts里设置了series长度要和 opts的series要和data的长度 保持一直
data:[{
//对应的柱状名称如果在配置设置了optss的series会覆盖到data.seriesName
seriesName: '系列1',
//数据值
value: 30,
//柱状图的数字颜色
cPeak: '#555',
//柱状图的顶部渐变色如果不需要渐变和cBottom设置一样即可
cTop: '#888',
//柱状图的底部部渐变色如果不需要渐变和cTop设置一样即可
cBottom: 'green'
//目标数据值仅在columnar2 重叠双柱状图设置有效
target: 400,
}] as UTSJSONObject[];mountain山峰图
如果在opts里设置了series长度要和 opts的series要和data的长度 保持一直
data:[{
//对应的山峰图名称如果在配置设置了optss的series会覆盖到data.seriesName
seriesName: '一班',
//数据值
value: 80,
//山峰图的数字颜色
cPeak: '#666',
//山峰图的顶部渐变色如果不需要渐变和cBottom设置一样即可
cTop: '#00CFF9',
//山峰图的底部部渐变色如果不需要渐变和cBottom设置一样即可
cBottom: 'rgba(0, 150, 220, 0.3)'
}] as UTSJSONObject[];line1单折线图
如果在opts里设置了series长度要和 opts的series要和data的长度 保持一直
data:[{
//对应的柱状名称如果在配置设置了optss的series会覆盖到data.seriesName
seriesName: '2021',
//数据值
value: 300,
//每条线段的颜色,不设置默认黑色
lineColor":'#0000ff',
}] 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",
//每一项的标题名称如果在配置设置了optss的series会覆盖到data.seriesName
seriesName: "一班"
}] as UTSJSONObject[];radar1和radar2雷达图
如果在opts里设置了series长度要和 opts的series要和data的长度 保持一直
如果在opts里没有设置series则data长度无要求，适度即可
data:[{
//数据值
value: 70,
//每一项的标题名称如果在配置设置了optss的series会覆盖到data.seriesName
seriesName: "超大盘",
}] as UTSJSONObject[];dashboard仪表盘
需要在初始化opts的时候配置 total 总刻度，如不配置默认是100
数据值number类型
data:80 annular环形进度条
数据值number类型
data:80 ball水球波纹进度
数据值number类型
data:80 
下载 53
赞赏 0
下载 11621903
赞赏 1888
赞赏
京公网安备：11010802035340号