更新记录

1.0.0（2024-12-19）

wui-charts 1.0.0

平台兼容性

wui-charts介绍

开发文档

简介：

wui-charts 它不是通过 Webview 套壳来实现图表功能，而是纯UTS编写 Canvas 绘制的轻量级图表库，
弥补了 uniapp-x 在app端渲染画布图表追求性能的需求，同时也填补了uniapp-x的插件生态
目前包含了大多数常用的图表，后期会陆续增加。

优势：

纯 UTS 编写：wui-charts 完全采用 UTS 编程语言，保证了图表的执行效率和性能。
Canvas 绘制：直接在 Canvas 上绘制图表，避免了 Webview 的性能开销，使得图表更加流畅。
轻量级：无需依赖额外的 Webview，减少了应用的包体积，提升了加载速度。

使用说明：

通过插件市场下载会自动导入插件到项目中之后只需简单三部。

1.在使用的页需面引入插件。

import { wuiCharts } from '@/uni_modules/wui-charts';

3.实例化wui-charts插件并绑定Canvas的id 以vue的选项api为例。

<template>
    <scroll-view style="flex:1" bounces="false">
        <view style="background-color: aqua;align-items: center;padding:2px;">
           <canvas canvas-id="canvas" id="canvas" style="width: 730rpx;height: 600rpx;" @click="setData"></canvas>
        </view>
    </scroll-view>
</template>

<script>
     // 引入wui-charts插件 
    import { wuiCharts } from '@/uni_modules/wui-charts';
    data() {
        return {
            //实例化插件传入canvas的id
            charts: new wuiCharts('canvas'),
            opts: {
                //图表类型
                type: 'columnar1',
                //初始化canvas的宽请与css设置一直rpx需要转成px
                width: uni.rpx2px(730),
                //初始化canvas的高请与css设置一直rpx需要转成px
                height: uni.rpx2px(600),
                //初始化canvas的背景色
                bgcolor: 'rgba(255,255,255,1)',
                //初始化内边距，绘制时按照内边距向内绘制
                padding: 20,
                //初始竖轴刻度和参照标识
                reference: ["0", "200", "400", "600", "800", "1000"],
                //初始横轴刻度和参照标识和数据长度一直
                series: ['2021', '2022', '2023', '2024', '2025', '2026'],
                //动画过度时间animate为true时有效
                velocity: 50,
                //是否开启过度动画，设定固定数据时的过度动画
                animate: true,
                //总刻度值，数据参照的最大值
                total: 1000,
            } as UTSJSONObject,
            //数据和横轴series长度一直
            data: [
                {"value": 300},
                { "value": 900 },
                { "value": 500 },
                { "value": 800 },
                { "value": 600 },
                { "value": 400 },
            ] as UTSJSONObject[]
        }
    }
</script>

4.初始化画布并传入配置项 opts 数据类型为UTSJSONObject。

<script>
    onReady(){
        //初始化画布
        this.charts.init(this.opts);
    }
</script>

5.传入数据或者更新数据 data 此处数据类型为UTSJSONObject[]后面对每个图表的数据类型有详细介绍。

<script>
    onReady(){
        //初始化画布
        this.charts.init(this.opts);
        //传入数据或者更新数据
        this.charts.setData(this.data);
    }
</script>

此时图表在生命周期onReady之后就渲染到画布了。

vue组合API 简单实用实例

vue组合API也是在生命周期onReady之后初始化画布和更新数据。

<template>
    <scroll-view style="flex:1" bounces="false">
        <view style="background-color: aqua;align-items: center;padding:2px; height: 600rpx;justify-content: center;">
            <view style="width: 110px; border-radius: 110px;">
                <canvas canvas-id="canvas" id="canvas" style="width: 110px;height: 110px;" @click="setData"></canvas>
            </view>
        </view>
        <view class="slid" style="margin-top: 15px;">
            <slider style="flex: 1;" valueColor="#fff" @changing="changing" :value="data" :min="0" :max="100" :step="1"
                :show-value="true" />
        </view>
    </scroll-view>
</template>

<script setup  lang="uts">
    /* 引入wui-charts插件 */
    import { wuiCharts } from '@/uni_modules/wui-charts';
    //实例化并绑定canvas的id
    let charts = new wuiCharts('canvas');
    //画布配置项
    let opts = {
        type: 'annular',
        width: 110,
        height: 110,
        lineWidth: 10,
        bgcolor: 'rgba(255,255,255,1)',
        padding: 20,
        velocity: 100,
        animate: true,
    } as UTSJSONObject;
    //画布数据
    let data = 50;
    let clickTimes = 0;
    //在生命周期onReady之后初始化和更新数据。
    onReady(() => {
      charts.init(opts);
      charts.setData(data);
    })  
    let setData = () => {
        clickTimes++;
        if (clickTimes == 2) {
            clickTimes = 0;
            //  处理双击事件...
            opts['animate'] = true;
            charts.setData(data);
        }
        setTimeout(function () {
            if (clickTimes == 1) {
                clickTimes = 0;
                //  处理单击事件...           
            }
        }, 250)
    };
    let changing = (e : UniSliderChangeEvent) => {
        opts['animate'] = false;
        data = e.detail.value;
        charts.setData(e.detail.value);
    };
</script>
<style>
    .slid {
        display: flex;
        justify-content: space-around;
        flex-direction: row;
        align-items: center;
        height: 40px;
        margin: 2px 10px;
        background-color: #00aaff;
        border: 1rpx #999 solid;
        border-radius: 4px;
        padding-left: 20px;
    }
</style>

wui-charts目前暴露的有两个方法 init初始化方法 和 setData更新数据方法。

其余的绘制方法都是模块化的只需在初始化 init 方法传入的opts配置项中配置即可。

init参数opts类型UTSJSONObject 通用。
除了type是必须配置其他可忽略。
注意：宽和高要和Canvas的css样式设置一直，rpx需要在配置宽和高的时候uni.rpx2px做转换，否则显示大小不一致
    ```
    opts:{
        //图表类型
        type: 'columnar1',
        //初始化canvas的宽请与css设置一直rpx需要转成px
        width: uni.rpx2px(730),
        //初始化canvas的高请与css设置一直rpx需要转成px
        height: uni.rpx2px(600),
        //初始化canvas的背景色
        bgcolor: 'rgba(255,255,255,1)',
        //初始化内边距，绘制时按照内边距向内绘制
        padding: 20,
        //初始竖轴刻度和参照标识
        reference: ["0", "200", "400", "600", "800", "1000"],
        //初始横轴刻度和参照标识和数据长度一直
        series: ['2021', '2022', '2023', '2024', '2025', '2026'],
        //动画过度时间animate为true时有效
        velocity: 50,
        //是否开启过度动画，设定固定数据时的过度动画
        animate: true,
        //总刻度值，数据参照的最大值
        total: 1000,
    } as UTSJSONObject
    ````
setData参数data类型any根据不同图表传入不同类型数据。

每个图表种类的data数据说明

columnar1 单柱状图
    //长度要和 opts的series 一直
    data:[{
        "value": 300, //数据值
        "color": "pink",//文字颜色
        "bgcolor": "blue"//柱状颜色
    }] as UTSJSONObject[]

columnar2 重叠双柱状图
    //长度要和 opts的series 一直
    data:[{
        "value": 300, //完成数据值
        "target": 400, //目标数据值
    }] as UTSJSONObject[]

columnar3 正负单柱状图
    //长度要和 opts的series 一直
    data:[{
        "value": -700,//正负数据值
        "color": "pink",//文字颜色
        "bgcolor": "blue"//柱状颜色
    }] as UTSJSONObject[]

line1 单折线图
    //长度要和 opts的series 一直
    data:[{
        "value": 700,//数据值
        "color": "#000"//每条线段的颜色,不设置默认黑色
    }] as UTSJSONObject[]

line2 多折线图
    //长度要和 opts的series 一直
    data: [{            
        "name": '酸枣仁',
        "color": 'red',//每项颜色,不设置默认黑色
        "data":[{
            "value":200,//数据值
            "color":"#000",//每条线段的颜色,不设置默认黑色 
        }]
    }] as UTSJSONObject[]

pieshaped 饼状图
    //长度无要求，适度即可
    data:[{
        "value": 30,//数据值
        "color": "black",//每一项的颜色
        "title": "一班"//每一项的标题名称
    }] as UTSJSONObject[]

radar 雷达图
    //长度无要求，适度即可
    data:[{
        "value": 70, //数据值
        "title": "超大盘",//每一项的标题名称
    }] as UTSJSONObject[]

dashboard 仪表盘
    //需要在初始化opts的时候配置 total 总刻度，如不配置默认是100
    //数据值number类型
    data:80,

annular 环形进度条
    //数据值number类型
    data:80,

ball 水球波纹进度
    //数据值number类型
    data:80,

下载app体验实例