线图API

引入方式

import { ConsoleLineChart } from '@alicloud/console-chart';

示例 Demo

基本折线图


多组数据


自定义X轴label


只有一个点数据时展示线


自定义x轴时间刻度间距

通过传入tickInterval字段,来配置坐标轴上每个刻度之间的差值大小。注意:如果是type设置为time的话,tickInterval字段的值必须是时间戳(毫秒)。


动态显示X轴


y轴最小值与正整数

通过设置yAxis.min来设置坐标轴显示的最小值,通过yAxis.formatter来控制不显示浮点数。


设置双轴


配置顶部单位


设置光滑曲线


线条带点


面积堆栈图


颜色渐变图

通过数据列里的color属性来进行指定,如果传入的值为字符串,则将该颜色应用到该数据列的线图面积图上,也可以传入一个数组,第一个值指定线图的颜色,第二个值指定面积图的颜色

颜色色值支持传入渐变,渐变规则请看G2渐变色原始文档


Legend点击事件

通过event属性来配置事件,配置legend-item:click对应的事件即可以配置图例点击事件。注意,由于内部实现和React自带的Function Component优化有冲突,event属性配置的事件不会触发function component的更新,所以这时候请使用class语法。

更多事件请看G2-图表事件


Config 配置

数据列配置

属性说明类型默认值
name数据列名称String-
yAxis坐标轴下标Number0
data数据Array-
color自定义当前数据列颜色String主题color_24

通用配置

属性说明
padding配置绘图内边距
xAxis配置x轴
yAxis配置y轴
legend配置图例
guide配置辅助元素
tooltip配置提示信息
label配置图形文本
size配置自定义大小
style配置自定义样式

专属配置

grid: Boolean

是否显示网格线

smooth: Boolean

是否为圆滑曲线图

lineSize: Number

配置线的宽度,优先级config.lineSize > config.size

symbol: Boolean

线上是否同时存在数据点标记。

symbolSize:

symbol开启时,配置线上点的size, 优先级config.symbolSize > config.size

area: Boolean

是否开启面积图

stack: Boolean

当开启 area 时,是否显示堆叠面积图。

yAxisColor: Boolean

是否开启坐标轴颜色。