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

实现效果图


页面调用方式

环形百分比
折线图



页面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:&＃39;#FF0000&＃39;}}, attached(){this.createArc();},/*** 组件的初始数据*/data: {canvasWidth:0,},/*** 组件的方法列表*/methods: {createArc(){let that &＃61;this;let canvasWidth &＃61; 0;wx.getSystemInfo({success: function (res) {canvasWidth &＃61; res.windowWidth - 56that.setData({canvasWidth})},})let num &＃61; that.properties.bfbNumber;let rNumber &＃61; that.properties.rNumber;let canvasHeight &＃61; that.properties.heights;let annuColor &＃61; that.properties.annuColor;if(num > 100){num &＃61; 100}const ctx &＃61; wx.createCanvasContext(&＃39;arc&＃39;, this)ctx.beginPath()ctx.strokeStyle&＃61;&＃39;#c0c0c0&＃39;ctx.lineWidth &＃61; 7ctx.arc(canvasWidth / 2 ,canvasHeight / 2 , rNumber, 0, Math.PI*2)ctx.stroke()ctx.beginPath()ctx.strokeStyle&＃61; annuColorctx.arc(canvasWidth / 2 , canvasHeight / 2 , rNumber,Math.PI *1.5,(Math.PI * 2 / 100) * num &＃43; (Math.PI*1.5))ctx.stroke()ctx.draw()},}
})


环形图wxml

折线图组件代码

// component/brokens/brokens.js
Component({/*** 组件的属性列表*/properties: {/*** 高度*/heights: {type: Number,value: 300,},valueArr: {type: Array,value: [],},nameArr: {type: Array,value: [],},colorArr:{type:Array,value:[&＃39;#e54d42&＃39;,&＃39;#f37b1d&＃39;,&＃39;#fbbd08&＃39;,&＃39;#8dc63f&＃39;,&＃39;#39b54a&＃39;,&＃39;#1cbbb4&＃39;,&＃39;#0081ff&＃39;]}},/*** 组件的初始数据*/data: {canvasWidth:0,},attached() {this.createLineCanvas();},/*** 组件的方法列表*/methods: {createLineCanvas() {let that &＃61;this;let canvasWidth &＃61; 0;wx.getSystemInfo({success: function (res) {canvasWidth &＃61; res.windowWidth - 56that.setData({canvasWidth})},})let nameArr &＃61; that.properties.nameArr;let valueArr &＃61; that.properties.valueArr;let colorArr &＃61; that.properties.colorArr;let heights &＃61; that.properties.heights - 20;let maxData &＃61; this.getGroupAndMax(valueArr);let hme &＃61; heights / maxData.maxlet wme &＃61; canvasWidth / nameArr.lengthconst ctx &＃61; wx.createCanvasContext(&＃39;linecanvas&＃39;, this)//底部字段ctx.beginPath()ctx.setTextAlign(&＃39;center&＃39;)nameArr.forEach((item,index) &＃61;>{ctx.fillText(item,wme * index &＃43;20,heights)})ctx.stroke();//线段valueArr.forEach((item,ind) &＃61;>{ctx.lineWidth &＃61; 1;ctx.beginPath()ctx.strokeStyle&＃61; colorArr[ind]item.data.forEach( (items,index) &＃61;>{if(index &＃61;&＃61; 0){ctx.moveTo(wme*index&＃43;20 ,items * hme -20)}else{ctx.lineTo(wme*index&＃43;20 ,items * hme)}})ctx.stroke();ctx.closePath();})//右边标尺ctx.beginPath()ctx.strokeStyle &＃61; "#c0c0c0"ctx.moveTo(20,0)ctx.lineTo(20,heights-20)ctx.stroke()ctx.closePath();ctx.beginPath()let hdata &＃61; maxData.max / 10 let heid &＃61; heights / 10 for (let index &＃61; 0; index <10; index&＃43;&＃43;) {if(index &＃61;&＃61; 0){ctx.fillText(hdata * (index&＃43;1),10,heights-20 - (heid *index))}else{ctx.fillText(hdata * (index&＃43;1),10,heights-20 - (heid *index))}}//底部标尺ctx.beginPath()ctx.strokeStyle &＃61; "#c0c0c0"ctx.moveTo(10,heights -20)ctx.lineTo(canvasWidth,heights-20)ctx.stroke()ctx.closePath();ctx.draw()},getGroupAndMax(arr){let max &＃61; 0;let group &＃61; [];arr.forEach(element &＃61;> {group.push(element.name)element.data.forEach(item &＃61;>{if(item > max){max &＃61; item;}})});let data &＃61; {max,group}return data;},}
})

折线图wxml