原生html配合canvas仿echarts图标组件合集

Posted 2022-01-28 Kira~~

介绍

这是一个多人项目中的一个模块，我负责了数据展示的部分，用原生的Canvas实现了进度条，饼图，雷达图，水滴图，日历图等图表的展现。采用面向对象的方式，将每个图表分为一个独立的类，将dom元素和option选项，option选项尽可能模仿echarts的选项配置。

开源地址

https://gitee.com/tyoubin_admin/echarts-canvas.git
欢迎fork和star！

预览地址

http://hikari.top:8104/

饼图：用于展示笔记的分类。

亮点：1.开场动画：每个扇形角度逐渐旋转变大，起始角度根据扇形所占空间实时计算；同时标签的引线从对应扇形半径长度开始逐渐前进，直到标签所在位置；标签文字从浅变深逐渐显示。

​ 2.模式控制：可以按照不同的配置选项展现普通饼图和玫瑰饼图两种形式，也可以控制标签是否显示。

​ 3.鼠标动画：鼠标在元素上滑动时通过角度和半径计算是否位于某个扇形区域内，鼠标所在的区域颜色变亮，半径逐渐变长，鼠标箭头变为手势。

雷达图：用于展示我的状态分布。

亮点：1：开场动画：开始时背景多边形，标签，以及各项的顶点已就位，内部多边形从中心开始均匀向各个方向逐渐延申，知道达到所在顶点位置。

​ 2：数据灵活：可以有2个以上的任意系列数，会自动根据输入的数据改变多边形的边数；输入多个大系类也会分不同颜色显示不同大系的分布。

​ 3：鼠标动画：鼠标经过颜色变亮，鼠标箭头变为手指形状。

水球图：用于显示一周计划完成情况。

亮点：1：水波动画：用正弦函数改变初相的方式生成不同初始相位的水滴图，实现平滑的动画效果，文字随水波位置的不同显示不同的底色；开始时水滴从空到最终位置也实现了过渡动画。

日历饼状图：用于显示一月内每天学习，运动以及其他三个模块完成质量的分布。

亮点：1：日历形状：结合根据传入的不同时间，计算当月按周分行 的占位情况，之后绘制黑色边框和灰色网格。

​ 2：组件复用：复用了已开发好的饼图，用在日历网格内创建dom节点的方式将饼图复用进去，使图表变美观的同时展现更加丰富的信息量。

仪表盘：用于展示我的综合得分。

亮点：1：数据联动：开场时指针从0度开始旋转，直到到达相应的位置。同时显示的数值随之改变。

进度条：用于展示今日计划和长期计划的完成程度。

亮点：1：开场动画：进度条从0开始逐渐增长。

​ 2：响应式色彩：不同进度区间显示不同的颜色。

同时，还有文字型数据统计以及根据不同事件类型显示不同颜色的时间轴，以及响应式卡片布局等。