微信小程序环形图/折线图(canvas)

实现效果图


页面调用方式

<view class="ponet_warp">
    <view class="titel_name">环形百分比</view>
    <annulus heights="{{heights}}" bfbNumber="{{bfb}}"></annulus>
</view>

<view class="ponet_warp">
    <view class="titel_name">折线图</view>
    <brokens heights="{{heights}}"  nameArr="{{nameArr}}" valueArr="{{valueArr}}" ></brokens>
</view>

页面CSS

.ponet_warp{
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
}
.titel_name{
    width: 94%;
    margin-left: 3%;
    padding: 10px 0px;
    font-size: 24px;
    font-weight: 700;
}

页面JSON

{
  "usingComponents": {
    "annulus":"/component/annulus/annulus",
    "brokens":"/component/brokens/brokens"
  }
}

环形图组件代码

Component({
    /**
     * 组件的属性列表
     */
    properties: {
        /**
         * 高度
         */
        heights:{
            type:Number,
            value:300,
        },
        /**
         * 百分比
         */
        bfbNumber:{
            type:Number,
            value:0,
        },
        /**
         * 圆弧半径
         */
        rNumber:{
            type:Number,
            value:80
        },
        annuColor:{
            type:String,
            value:'#FF0000'
        }
    }, 
    attached(){
         
        this.createArc();
    },
    /**
     * 组件的初始数据
     */
    data: {
        canvasWidth:0,
    },

    /**
     * 组件的方法列表
     */
    methods: {
        
        createArc(){
            let that =this;
            let canvasWidth = 0;
            wx.getSystemInfo({
                success: function (res) {
                    canvasWidth = res.windowWidth - 56
                    that.setData({
                        canvasWidth
                    })
                },
            })
            let num = that.properties.bfbNumber;
            let rNumber = that.properties.rNumber;
            let canvasHeight = that.properties.heights;
            let annuColor = that.properties.annuColor;
            if(num > 100){
                num = 100
            }
            const ctx = wx.createCanvasContext('arc', this)
            ctx.beginPath()
            ctx.strokeStyle='#c0c0c0'
            ctx.lineWidth = 7
            ctx.arc(canvasWidth / 2 ,canvasHeight / 2 , rNumber, 0, Math.PI*2)
            ctx.stroke()
            ctx.beginPath()
            ctx.strokeStyle= annuColor
            ctx.arc(canvasWidth / 2 , canvasHeight / 2 , rNumber,Math.PI *1.5,(Math.PI * 2 / 100) * num + (Math.PI*1.5))
            ctx.stroke()
            ctx.draw()
        },
    }
})

环形图wxml

<canvas canvas-id="arc" style='width:{{canvasWidth}}px; height:{{heights}}px'></canvas>

折线图组件代码

// component/brokens/brokens.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        /**
        * 高度
        */
        heights: {
            type: Number,
            value: 300,
        },
        valueArr: {
            type: Array,
            value: [],
        },
        nameArr: {
            type: Array,
            value: [],
        },
        colorArr:{
            type:Array,
            value:['#e54d42','#f37b1d','#fbbd08','#8dc63f','#39b54a','#1cbbb4','#0081ff']
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        canvasWidth:0,
    },
    attached() {
        this.createLineCanvas();
    },
    /**
     * 组件的方法列表
     */
    methods: {

        createLineCanvas() {
            let that =this;
            let canvasWidth = 0;
            wx.getSystemInfo({
                success: function (res) {
                    canvasWidth = res.windowWidth - 56
                    that.setData({
                        canvasWidth
                    })
                },
            })
            let nameArr = that.properties.nameArr;
            let valueArr = that.properties.valueArr;
            let colorArr = that.properties.colorArr;
            let heights = that.properties.heights - 20;
            let maxData = this.getGroupAndMax(valueArr);

            let hme = heights / maxData.max
            let wme = canvasWidth / nameArr.length

            const ctx = wx.createCanvasContext('linecanvas', this)
            //底部字段
            ctx.beginPath()
            ctx.setTextAlign('center')
            nameArr.forEach((item,index) =>{
                ctx.fillText(item,wme * index +20,heights)
            })
            ctx.stroke();

            //线段
            valueArr.forEach((item,ind) =>{
                ctx.lineWidth = 1;
                ctx.beginPath()
                ctx.strokeStyle= colorArr[ind]
                item.data.forEach( (items,index) =>{
                    if(index == 0){
                        ctx.moveTo(wme*index+20 ,items * hme -20)
                    }else{
                        ctx.lineTo(wme*index+20 ,items * hme)
                    }
                   
                })
                ctx.stroke();
                ctx.closePath();
            })

            //右边标尺
            ctx.beginPath()
            ctx.strokeStyle = "#c0c0c0"
            ctx.moveTo(20,0)
            ctx.lineTo(20,heights-20)
            ctx.stroke()
            ctx.closePath();
            
           
            ctx.beginPath()
            let hdata = maxData.max / 10 
            let heid = heights / 10 
            for (let index = 0; index < 10; index++) {
                if(index == 0){
                    ctx.fillText(hdata * (index+1),10,heights-20 - (heid *index))
                }else{
                    ctx.fillText(hdata * (index+1),10,heights-20 - (heid *index))
                }
            }

           

            //底部标尺
            ctx.beginPath()
            ctx.strokeStyle = "#c0c0c0"
            ctx.moveTo(10,heights -20)
            ctx.lineTo(canvasWidth,heights-20)
            ctx.stroke()
            ctx.closePath();




            ctx.draw()
        },
        getGroupAndMax(arr){
            let max = 0;
            let group = [];
            arr.forEach(element => {
                group.push(element.name)
                element.data.forEach(item =>{
                    if(item > max){
                        max = item;
                    }
                })
            });

            let data = {
                max,
                group
            }
            return data;
        },
    }
})

折线图wxml

<canvas canvas-id="linecanvas" style='width:{{canvasWidth}}px; height:{{heights}}px'></canvas>