鸿蒙实战开发：使用canvas实现图表系列之折线图

📚往期学习笔录📝：

📝 鸿蒙（HarmonyOS）北向开发知识点记录~
📝 鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~
📝 鸿蒙应用开发与鸿蒙系统开发哪个更有前景？
📝 嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~
📝 对于大前端开发来说，转鸿蒙开发究竟是福还是祸？
📝 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？
📝 记录一场鸿蒙开发岗位面试经历~
📝 持续更新中……

一、功能结构

实现一个公共组件的时候，首先分析一下大概的实现结构以及开发思路，方便我们少走弯路，也可以使组件更加容易拓展，维护性更强。然后我会把功能逐个拆开来讲，这样大家才能学习到更详细的内容。下面简单阐述下折线图组件的功能结构：

以上是基础的功能结构框架，包含一些比较简单的基础功能，后续还有点击触发、动画等功能也会规划进去。这一期我们先实现上面这些基础的功能，后续再慢慢拓展。

二、公共属性

1. 一个组件肯定会有一些公共的属性作为动态参数，便于组件之间的信息传递，我们分别讲解一下五个公共属性的作用：画布的宽度（cWidth）和高度（cHeight），这个是最基本的。但是我这里控制是非必传，默认值都是 100%就可以了。
2. 画布的内部留白间距（cSpace）。主要是用来控制内容区与画布外框的距离，避免绘画的内容被截掉。
3. 字体大小（fontSize）。主要是来控制整个绘画内容的字体大小，全局性，避免每个小功能都需要传字体大小。
4. 字体颜色（color）。与字体大小的功能一致。
5. 图表数据（data）。用来存储图表内容的数组，其中 name 与 value 是必传的。

以下是具体的代码：

// 图表数据的特征接口
interface interface_data {
  name: string | number;
  value: string | number;
  [key: string]: any;
}

// 图表的特征接口
interface interface_option {
  cWidth?: string | number,
  cHeight?: string | number,
  fontSize?: string | number,
  color?: string,
  cSpace?: number,
  data?: interface_data[]
}

// option 默认值
const def_option: interface_option &#