你代码中,都没有热力图的数据,怎么会出来?
异步加载后,把数据放到points数组,
然后使用JS代码(API案例很详细)
heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":20})map.addOverlay(heatmapOverlay)
heatmapOverlay.setDataSet({data:points,max:100})
整理了一些有关canvas的属性( ’ - ’ * )
canvas画布
用于绘制图像,本身不具备绘制能力,需要通过脚本来完成绘画,通常这个脚本就是javascript
canvas的默认宽高为300*150,不能通过css或行内样式修改它的宽高,它有自己的宽高属性
canvas是一个html元素,通过js来执行绘制
getContext()是用来获取canvas上下文渲染环境和绘画功能的方法,目前只有一个参数:'2d',代表返回一个2d的绘制环境,将来有可能3d,但是目前不支持
它可以做什么?
html5小游戏
绘制图片,图标,图表,曲线图等等,例如地图上的热力图等等
以及各种酷炫的动画效果都可以通过canvas来完成(可以了解一下WEBGL<http://www.hewebgl.com/>)
画布栅格
![img](https://mdn.mozillademos.org/files/224/Canvas_default_grid.png)
通常画布的一个格子就代表canvas中元素的一像素,栅格的左上角为起点,坐标0, 0,所有位置都相对于原点定位,
使用:
var canvas = document.gteElementById('canvas')
var context = canvas.getContext('2d')// 环境准备好,调用context的方法属性绘制即可
属性及方法
beginPath()
新开始一条路径,绘制方法被指向新路径
closePath()
闭合当前路径,让绘制命令重新指向上下文
stroke()
通过线条来绘制图像轮廓
fill()
通过填充路径的内容区域生成实心图形
moveTo(x, y)
描述起点坐标
lineTo(x, y)
描述终点坐标
rect(x, y, width, height)
绘制矩形x,y为绘制的起点坐标,width和height为要绘制矩形的宽高,无需加px
需要配和stroke绘制带边框的矩形,或者fill绘制实心矩形
strokeRect(x, y. width, height)
参数同上,绘制边框矩形
fillRect(x,y,width,height)
参数同上,绘制填充矩形
clearRect(x,y,width,height)
清除指定区域矩形,会留下一块白色矩形区域
arc(x,y,r,sangle,eangle,counterclockwise)
圆弧
x,y为绘制圆的圆心坐标
r为圆的半径
sangle,eangle为圆的起始角度和结束角度
counterclockwise,可选参数,表示绘制圆是顺时针还是逆时针,true为逆时针
strokeStyle
描边的颜色
fillStyle
填充的颜色
shadowColor
阴影颜色
shadowBlur
阴影模糊级别
shadowOffsetX
阴影水平偏移量
shadowOffsetY
阴影垂直偏移量
lineCap
设置线条两端结束位置的形状
butt默认
round圆形帽
square正方形
lineJoin
设置线条与线条接合处的样式
miter (默认), 通过延伸相连部分的外边缘,使其相交于一点,形成一个额外的菱形区域。
round 通过填充一个额外的,圆心在相连部分末端的扇形,绘制拐角的形状。 圆角的半径是线段的宽度。
bevel 在相连部分的末端填充一个额外的以三角形为底的区域, 每个部分都有各自独立的矩形拐角。
lineWidth
线条宽度,以像素计算,没有px
rotate(angle)
旋转
角度转弧度公式
deg乘以Math.PI/180
deg为要绘制的角度
Math.PI为圆周率,也就是180度,但是它为一个浮点数,即使除以180也不能忽略它的小数
translate(x, y)
移动原点
将一个坐标原点向x,y正方向移动,如果坐标原点不在原来的位置,则以新的位置加上要移动的位置
scale(x, y)
缩放x轴和y轴分别设置缩放
rotate(x, y)
旋转
凡是牵扯到度数,都用公式deg乘以Math.PI/180来计算
arcTo(x1,y1,x2,y2,r)
画圆角,一般两个直线相交的地方,用此方法绘制成圆弧,x1,y1指圆弧开始的x坐标和y坐标,x2,y2指圆弧结束的x和y坐标,r指半径
setLineDash/lineDashOffset/getLineDash
绘制虚线
setLineDash([实线长度, 间隙长度])方法接受一个数组,来指定线段与间隙的交替
lineDashOffset设置起始偏移量
getLineDash()返回当前虚线的样式,为一个数组
fillText(text, x, y [, maxWidth])
绘制填充文本
text文本
x,y指定的坐标
maxWidth最大宽度,可选
strokeText(text, x, y [, maxWidth])
绘制文本边框
text文本
x,y指定坐标
maxWidth最大宽度,可选
font
文本样式
和css设置字体相似,复合设置
例如:context.font='100px sans-serif'
textAlign/textBaseline/direction
textAlign(文本对齐选项): start|end|left|right|center
textBaseline(基线对齐选项):top|hanging|middle|alphabetic|ideographic|bottom
direction(文本方向):ltr|rtl|inherit
绘制图片
drawImage(imgElement,x,y,width,height)
x,y绘制图片的起始坐标
imgElement 要绘制的图片元素,或者为一个canvas的引用
width,height,设置图片的宽高
裁剪图片
drawImage(imgElement,sx, sy, swidth, sheight, x,y,width,height)
imgElement 要绘制的图片元素,或者为一个canvas的引用
sx, sy (可选)要裁剪的起始位置
swidth, sheight (可选)要裁剪区域的宽高
x,y放置原始图片的位置
width,height (可选)原始图片的宽高
为了不失真,一般尝试让swidth, sheight和width、height相等,x,y原点,去改变sx,sy(裁剪的起始位置)即可,实际根据需求来定
save()/restore()
save() 保存状态,保存在栈中,类似于数组的push
restore() 恢复状态,类似于数组的pop
clip()
裁剪路径
把一个路径之外的内容进行裁剪,只保留路径本身内部的内容
用于控制动画的常用方法
setInterval()
setTimeout()
requestAnimationFrame()
只执行一次,一般通过递归调用来完成动画制作
接受一个回调函数,专门提供给动画的api,默认刷新帧率为一秒60次,优于以上两个方法,比如页面未激活状态下回自动暂停,节省cpu的开销
cancelAnimationFrame() 用来停止此方法的执行
可能有不足的地方 欢迎大家补充(•̀⌄•́)
数据分析要掌握主流的数据分析方法。
1、事件分析
可以根据用户在企业APP、网站、小程序等平台上的操作记录或是行为日志,来确定用户在平台上各个板块之间行为的规律和特点,通过商业智能BI数据分析,研究出用户的内心需求,对板块内容进行优化调整,一般会涉及浏览页面、点击元素、访问板块等。
2、热力图分析
和事件分析类似,热力图一般指用户访问企业网站、APP和小程序时,会在一些元素和板块进行停留,根据这些在元素和板块上的点击次数、点击率、访问次数、访问人数等,通过商业智能BI以高亮图形形式进行显示,可以方便识别用户行为,优化逻辑。
数据分析-派可数据商业智能BI
3、留存分析
留存一般在运营工作中比较常见,可以用来衡量企业提供的产品和服务是否对用户有足够的吸引力,让用户在接触或使用产品和服务后,能够继续保持活跃,成为忠实用户,一般会将次日留存率、7日留存率、次月留存率等作为标准,以商业智能作为分析工具。
4、对比分析
一般用到对比分析,通常是在选定的时间区域内,对比业务在不同情况下的差异,分析出业务是进行了增长还是发生了缩减的情况。
例如,上图中2021年9月的销量相比8月的销量有所减少,这时候就要深入分析为什么环比销量会减少,可以考虑调取今年3月和去年3月的产品生产数量,看看是不是生产环比下降,导致销量较少。同理,还可以把供应链、经销商、人流量等等都拿进行对比分析,确认到底是什么影响了销量。
数据分析-派可数据商业智能BI