折线图扫码预览

一、 折线图基础构建

<p class="item-desc">光滑的的折线图</p>
 <o-chart :data="normalData" :col-defs="normaColConfig" :tooltip="normalTootip">
        <!-- 如果为line类型：shape可选为'line', 'smooth', 'dash'   dash：虚线，smooth： 平滑线 -->
        <o-line :axis="normaAxis" shape="smooth" :position="'date*value'"></o-line>
</o-chart>

这是一个光滑折线图的案例，其中包括的配置项，

• 必须有的是data和position;
• col-defs：对提供的每个数据进行配置，tooltip:显示提示信息,
• axis:坐标系配置,
• shape:设置线段类型，shape可选为'line', 'smooth', 'dash'

具体配置，请见下文

说明:

• 坐标轴position为必传项。
• 公用配置信息已在前文提及，请查阅

样例中有普通的折线图，光滑的的折线图，带点的折线图，光滑的带点折线图，层叠的带点光滑折线图其不同之处在于对每一项的配置不同而已，如您需要实现其中的某一部分请查阅样例源码 (opens new window) ，查看具体配置,具体配置信息和作用已在前文和下文中注明，请查阅。

二、折线图额外配置

公用配置信息

type (显示类型)

• 是否必须:False
• 参数类型:枚举['line','point']中的二选一
• 默认：line
• 说明:显示类型，以线段显示还是使用带点折线图显示

shape (线段形状)

• 是否必须:False
• 参数类型:见下
• 默认:line
• 说明:只支持接收一个参数，指定几何图像对象绘制的形状。根据上述设置的type不同，可以设置不同的shape形状

(type)类型	shape 类型	解释
point	'circle', 'hollowCircle', 'rect'	默认为 'circle'
line	'line', 'smooth', 'dash'	dash：虚线，smooth： 平滑线

showNulls(是否显示空值)

• 是否必须:False
• 参数类型:Boolean
• 默认：False
• 说明:是否显示空值，如果为True，则折线图遇到空值，则是不连续线段。

isMutiLine（是否存在多条线段）

• 是否必须:False
• 参数类型:Boolean
• 默认：False
• 说明:是否存在多条线段，如果为True，则是则会显示多条线段，demo请见区域面积图-层叠面积图 (opens new window)。

isArea (区域面积图的配置)

• 是否必须:False
• 参数类型:Boolean
• 默认：False
• 说明:是否以区域方式显示，如果为True则显示区域面积图