LineBarChart
柱图和线图组件,内部为柱图和线图的提供了一些默认配置,你只需要提供较少的配置即可实现简单的柱图和线图。
API
Name | Description | Type | Default |
---|---|---|---|
width | 图表容器的宽度,可以是绝对像素值或父元素宽度的百分比 | string | '100%' |
height | 图表容器的高度,可以是绝对像素值或父元素高度的百分比 | string | '100%' |
theme | 图表颜色主题 | 'light' | 'dark' | 'light' |
adaptive | 当窗口 resize 时,是否让图表自动 resize 以自适应窗口大小 | boolean | true |
type | 图表类型 | 'line' | 'vertical-bar' | 'horizontal-bar' | 'line' |
title | 标题 | string | - |
category | 类目轴标签数据的数组 | string[] | - |
valueAxisName | 数值轴的名称 | string | - |
textColor | 全局文本的颜色 | string | #333 |
series | 系列数据,接受标准的 LineSeriesOption 和 BarSeriesOption 配置 | (LineSeriesOption | BarSeriesOption) | (LineSeriesOption | BarSeriesOption)[] | - |
stack | 不同系列的数据是否堆叠显示 | boolean | false |
rounded | 柱图是否显示圆角, stack 为 true 时不生效 | boolean | false |
smooth | 线图是否开启平滑处理,如果是 number 类型(取值范围 0 到 1),表示平滑程度,越小表示越接近折线段,反之越平滑。设为 true 时相当于设为 0.5 | boolean | number | false |
barWidth | 柱条的宽度,不设置时自适应 | string | number | - |
showToolbox | 是否显示 toolbox (type 为 'line' 或 'vertical-bar' 时生效) | boolean | false |
showLabel | 是否显示柱条的 label (仅当 type 为 'horizontal-bar' 时生效) | boolean | false |
showBackground | 柱条是否显示背景 (仅当 type 为 'horizontal-bar' 时生效) | boolean | false |
labelTop | 当柱条显示背景时,柱条的 label 距离柱条包装容器顶部的距离,可以是百分比(相对于柱条容器高度)或绝对像数值。 (仅当 type 为 'horizontal-bar' 时生效) | string | number | 25% |
option | ECharts 原生的配置对象 EChartsOption | EChartsOption | - |
关于 series 和 option
LineBarChart 通过 series
属性接受系列数据,可以传递标准的 LineSeriesOption 和 BarSeriesOption 来配置系列的每一个细节。
通常你不需要配置 option
属性就能实现简单的线图和柱图,但如果设置 LineBarChart 提供的便捷属性无法达到你想要的效果,你也可以通过配置 option
来实现更细粒度的控制,option
的配置格式与 ECharts 实例方法 setOption
的第一个参数完全相同,实际上,LineBarChart 在内部会将 option
与预设配置合并,然后传递给 setOption
方法。它比预设的配置具有更高的优先级。