组件方式开发 Web App全站-7-图表组件-柱状图组件开发

组件方式开发 Web App全站-7-图表组件-柱状图组件开发_第1张图片
组件方式开发 Web App全站-7-图表组件-柱状图组件开发_第2张图片
为了照顾后面的数值不跟随柱形移动。所以柱形是一个div定义宽和高;然后里面一个div添加背景,然后宽度逐渐增加
雷达图
组件方式开发 Web App全站-7-图表组件-柱状图组件开发_第3张图片
底图层:网格背景+伞骨图(核心关键:多边形顶点坐标计算)
1. 计算一个圆周上的坐标(计算多边形的顶点坐标
2. 已知:圆心坐标(a,b),半径 r;角度deg.
3. rad = ( 2*Math.PI / 360) * (360 / 边数) * i(第几个)
4. x = a + Math.sin( rad ) * r;
5. y = b + Math.cos( rad ) * r;
组件方式开发 Web App全站-7-图表组件-柱状图组件开发_第4张图片
饼图
难点1:绘制一段弧线并填充(饼)
难点2:定位数据文本
组件方式开发 Web App全站-7-图表组件-柱状图组件开发_第5张图片

你可能感兴趣的:(前端组件化入门)