canvas柱状图前言在使用uni-app做项目的时候,遇到一个需要柱状图的地方。由于插件没有找到合适的,自己写了一个分享给大家。如果你有写得不好的地方,请多多指教。效果图功能:通过X轴数组的长度计算出每段的宽度,从而实现图片宽度和位置的自动分配。通过Y轴数组的最大值和最小值计算列在Y轴上对应的坐标,从而实现图形高度的比例分布。自定义宽度和高度。不定义宽度时,会自适应屏幕宽度。绘图分析此图标由xy轴、数据条组成。axis:使用moveTo(x,y)和lineTo(x,y)实现text:使用fillText(text,x,y)实现rectangle:使用fillRect(x,y,width,height)实现steps--displayed数据项X:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','December',],itemsY:[65,35,43,77,75,48,95,80,65,35,43,77],--定义画布--计算Y轴上的刻度值数据Y轴每一段的长度,通过for循环,将每一段的scale值依次保存在yScales数组中。Y轴每段长度=(y轴最大值-y轴最小值)/总段数this.yNumberfor(letindex=0;indexthis.maxNumy?this.getMaxNum(this.itemsY):this.maxNumythis.scaleIntervalMin=this.getMinNum(this.itemsY)this.getyScale()this.getSingleLengths()this.drawCanvas()},方法:{getyScale(){//获取y轴上的刻度值数组letlength=(this.scaleIntervalMax-this.yAxisMinNum)/this.yNumberfor(letindex=0;indexnum?num=cur:null}returnnum},getMinNum(items){letnum=items[0]letcurfor(leti=1;i