title: BasicChart - 标准图表
nav:
  title: 基础组件
  path: /components
group:
  path: /

BasicChart 标准图表

基础组件

• 支持的图表类型有直线图、曲线图等 20 种图表，其中很多图表可以集成在同一个图形中形成混合图

tooltip 规范

• 头部显示数据名\类目名
• 内容部分显示各系列数据信息：系列色、系列名称、系列值、系列单位
• 头部和内容通过分割线隔开
• 缺省的数据系列不显示在内容部分上
• 数值颜色跟随系列色

xAxis 规范

• 显示轴线、刻度线、文字标签，不显示网格线
• 轴线、刻度线、文字标签色彩样式一致
• 刻度线方向向内
• 类目类型图表中，两边是否采用留白？

yAxis 规范

• 不显示轴线、刻度线、文字标签，显示网格线
• 网格线使用虚线dashed类型
• 坐标轴名称显示在顶部，和坐标轴对齐

axisPointer 规范

• 类目类型图表中，指示器采用阴影shadow类型
• 非类目类型图标中，指示器采用line类型，line 为虚线，在图形上方，标记下方

基本柱状图

BasicChart.BarChart拥有默认配置的柱状图，适用于仅包含柱状图的使用场景。

类目类型柱状图

时间类型柱状图

堆叠柱状图

基本折线图

BasicChart.LineChart拥有默认配置的折线图，适用于仅包含折线图的使用场景。

类目类型折线图

面积图

时间类型折线图

自定义图表

BasicChart通用 echarts 图表，通过option传递配置项。

获取 echarts 实例对象

通过传递ref可以获取到创建出来的 echarts 实例对象。 BasicChart、BasicChart.BarChart、BasicChart.LineChart都支持。

API

BasicChart

参数	说明	类型	默认值	可选值
className	图表容器类名	string	-	-
option	echarts 图表配置项option	object	-	-

option 参考 echarts 库 https://echarts.apache.org/zh/index.html

BasicChart.BarChart（基本柱状图）

参数	说明	类型	默认值	可选值
className	图表容器类名	string	-	-
category	x 轴类目配置，有该配置则为category类型图表，否则为time类型的图表	Array[string	number]	-
dataSource	图表容器类名	object	-	-

dataSource | 参数 | 说明 | 类型 | 默认值 | 可选值 | | --- | --- | --- | --- | --- | | name | 数据系列名称，有 name 时才会显示图例 | string | - | - | | unit | 数据单位，显示在tooltip和yAxis上 | string | - | - | | data | 图表数据，category类型和 time类型有所区别，详见案例 | Array[] | - | - |

BasicChart.LineChart（基本折线图）

参数	说明	类型	默认值	可选值
className	图表容器类名	string	-	-
category	x 轴类目配置，有该配置则为category类型图表，否则为time类型的图表	Array[string	number]	-
dataSource	图表容器类名	object	-	-

dataSource | 参数 | 说明 | 类型 | 默认值 | 可选值 | | --- | --- | --- | --- | --- | | name | 数据系列名称，有 name 时才会显示图例 | string | - | - | | smooth | 平滑曲线模式 | boolean | true | - | | lienType | 折线图/面积图显示 | string | line | line、area | | unit | 数据单位，显示在tooltip和yAxis上 | string | - | - | | data | 图表数据，category类型和 time类型有所区别，详见案例 | Array[] | - | - |