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

**Repository Path**: tyoubin_admin/echarts-canvas

## Basic Information

- **Project Name**: 原生html配合canvas仿echarts图标组件合集
- **Description**: 使用html5新增的canvas元素来模仿echarts中的饼图，雷达图等多种图标，并配有动态效果
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-08-15
- **Last Updated**: 2021-09-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

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

#### 介绍
用原生的Canvas实现了进度条，饼图，雷达图，水滴图，日历图等图表的展现。采用面向对象的方式，将每个图表分为一个独立的类，将dom元素和option选项，option选项尽可能模仿echarts的选项配置。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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