2.0 KiB
2.0 KiB
ChartLine
控件功能:用于展示折线图,基于 ECharts 扩展实现,支持通过配置数据源、字段映射和图表选项动态生成多条折线的数据可视化。
类型:普通控件
父类控件:bricks.EchartsExt
初始化参数
| 参数名 | 类型 | 说明 |
|---|---|---|
data_url |
string | (可选)获取图表数据的接口 URL,若提供则自动请求数据 |
data_params |
object | (可选)发送请求时携带的参数,配合 data_url 使用 |
method |
string | (可选)请求数据时使用的 HTTP 方法,默认为 'GET' |
data |
array | (可选)直接传入的静态数据数组,格式为对象数组,如 [{ name: 'A', value1: 10, value2: 20 }] |
line_options |
object | (可选)额外的 ECharts 系列配置项,用于自定义线条样式、动画等 |
nameField |
string | 指定数据中作为 X 轴显示的字段名称,例如时间或类别字段 |
valueFields |
array | 指定一个或多个数值字段,每个字段将生成一条折线,如 ['sales', 'profit'] |
注:
data和data_url可二选一;若两者都存在,优先使用data_url获取数据。
主要事件
-
load
触发时机:控件初始化并成功加载/渲染数据后触发。
回调参数:{ chart: ECharts 实例, data: 当前渲染的数据 }
用途:可用于在图表渲染完成后执行自定义逻辑,如添加标记点、绑定外部交互。 -
click
触发时机:用户点击图表中的某一点时触发。
回调参数:ECharts 原生 click 事件对象,包含seriesName,name,value,data等信息。
用途:实现数据点详情查看、联动其他组件等功能。 -
datafetch
触发时机:从data_url成功获取数据后,但在渲染之前触发。
回调参数:{ data: 服务器返回的原始数据 }
用途:可在数据处理前进行拦截和修改。