Skip to content

hawx1993/wxapp-charts

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

wxapp-charts

微信小程序图表charts组件

Usage

        data: {
                charts: {
                    area: ["上海,750","杭州,425","苏州,960","南京,700","广州,800","厦门,975","北京,375","沈阳,775","泉州,100","哈尔滨,200"],
                    pieData: [10, 25, 35, 30]
                }
            }

            //饼图    
        new Charts({
            type: "pie",
            data: this.data.charts.pieData,
            colors: ["#7158ec", "#fec312", "#1db2f4", "#ff3444"],
            canvasId: 'canvas1',
            point: {
                x: 150,
                y: 150
            },
            radius : 100
        });
        //圆环图
        new Charts({
            type: "ring",
            data: [10, 25, 35, 30],
            colors: ["#7158ec", "#fec312", "#1db2f4", "#ff3444"],
            canvasId: 'canvas2',
            point: {
                x: 150,
                y: 150
            },
            radius : 100
        });

        //柱状图
        new Charts({
            type: 'bar',
            data: this.data.charts.area,
            bgColors: "#46a2ef",
            color: '#383838',
            cHeight: 300,//表格高度
            cWidth: 500,//表格宽度
            bWidth: 22,//柱子宽度
            bMargin: 16,//柱子间距
            showYAxis: false,//是否显示Y轴
            xCaption: 'x轴说明文字',
            yCaption: 'y轴说明文字',
            canvasId: 'chartContainer'
         });

参数说明

    type: -支持pie,ring,bar
    data: []
    colors: []颜色
    canvasId: canvas-id
    point:x轴圆心坐标,y轴圆心坐标
    radius:半径大小
    xCaption: 水平坐标说明文字
    yCaption: 纵坐标说明文字
    showYAxis:是否显示y轴

更新说明

  • 增加data对外接口
  • 添加部分API,如cWidth等

效果如图所示

手机端效果

About

🏹微信小程序图表charts组件

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published