折线柱状图

介绍

折线柱状图是一种用于展示多变量数据的图表类型，它结合了折线图和柱状图的特点，可以同时展示不同变量的趋势和数值大小。

API

Props

参数	说明	类型	默认值
默认状态	支持变量绑定	默认 / 隐藏	默认
数据源	支持变量绑定	DataSource	-
x 轴（类目）	x 轴的数据字段编码	string	month
y 轴（数值）	y 轴的数据字段编码	Array	[{name:value1},{name:value2}]
宽	图表画布宽度	string	500px
高	图表画布高度	string	300px
上边距	绘图区域距离画布上边距	string	60px
下边距	绘图区域距离画布下边距	string	60px
左边距	绘图区域距离画布左边距	string	10%
右边距	绘图区域距离画布右边距	string	10%
数值系列	图表数值系列配置	数值系列	-
Y 轴配置	图表 y 轴配置	Y 轴配置	-
标题	图表标题配置	标题	-
X 轴	图表 X 轴配置	X 轴	-
柱条样式	柱状图柱条样式配置	柱条样式	-
图例	图表图例配置	图例	-
提示框	图表提示框配置	提示框	-
唯一标识	组件唯一标识	string	组件 key 值

Props 数值系列

参数	说明	类型	默认值
字段编码	数据字段编码	string	sale
y 轴索引	系列所使用的 y 轴在 y 轴配置中的索引	string	0
图表类型	系列所使用的图表类型，包括折线图、柱状图	string	柱
系列名	系列名称	string	销量
显示标记	系列是否显示标记	boolean	false
标记大小	标记图形大小	string	8
标记类型	标记图形类型	string	circle
显示标签	系列是否显示标签，前提需要显示标记	boolean	false
字号	标签字号	string	12
颜色	标签颜色	string	#FFF
柱条颜色	系列指定柱条颜色	string	-
线条样式	折线图线条样式	实线/虚线/点线	实线
线宽	折线图线条线宽	string	2
颜色	线条颜色	string	-
线条类型	折线图线条类型	折线/曲线/阶梯图	折线
面积填充	是否开启折线图面积填充	boolean	false

Props Y 轴配置

参数	说明	类型	默认值
显示 Y 轴	图表 Y 轴是否显示	boolean	true
显示轴线	图表轴线是否显示	boolean	true
线宽	轴线线宽	string	1
轴线颜色	轴线颜色	string	#333333
显示刻度标签	图表是否显示刻度标签	boolean	true
字号	刻度标签字号	string	12
字体粗细	刻度标签字体粗细	string	normal
文字颜色	刻度标签文字颜色	string	-
分隔线	是否显示 Y 轴分隔线	boolean	true
分隔线颜色	分隔线颜色	string	#CCCCCC
自定义参数（yAxis）		code

Props 标题

参数	说明	类型	默认值
显示标题	图表标题是否显示	boolean	false
主标题	图表主标题	string	主标题
副标题	图表副标题	string	副标题
自定义参数（title）		code

Props X 轴

参数	说明	类型	默认值
显示 X 轴	图表 X 轴是否显示	boolean	true
显示轴线	图表轴线是否显示	boolean	true
线宽	轴线线宽	string	1
轴线颜色	轴线颜色	string	#333333
显示刻度标签	图表是否显示刻度标签	boolean	true
字号	刻度标签字号	string	12
字体粗细	刻度标签字体粗细	string	normal
文字颜色	刻度标签文字颜色	string	-
角度	刻度标签角度	string	-
显示分隔线	是否显示 X 轴分隔线	boolean	false
分隔线颜色	分隔线颜色	string	#CCCCCC
显示指示器	是否显示 X 轴指示器	boolean	true
指示器类型	指示器类型	阴影/直线	阴影
自定义参数（xAxis）		code

Props 柱条样式

参数	说明	类型	默认值
柱条宽度	柱条宽度	string	auto
不同系列柱间距	多个柱状图情况下不同系列柱间距	string	30%
同系列柱间距	同一系列柱间距	string	20%
柱条背景	柱条背景色	string	-

Props 图例

参数	说明	类型	默认值
显示图例	图表图例是否显示	boolean	true
图例位置	图例显示位置	自动 / 顶部居左 / 顶部居中 / 顶部居右 / 底部居左 / 底部居中 / 底部居右 / 左侧顶部 / 左侧居中 / 左侧底部 / 右侧顶部 / 右侧居中 / 右侧底部	自动
布局方向	图例排列方向	水平 / 竖直	水平
宽	图例区域宽度	string	auto
高	图例区域高度	string	auto
支持滚动	图例超出宽高后是否支持滚动	boolean	false
自定义参数（legend）		code

Props 提示框

参数	说明	类型	默认值
显示提示框	图表提示框是否显示	boolean	true
触发类型	提示框触发类型	数据项/坐标轴	坐标轴
背景颜色	提示框背景颜色	string	rgba(50,50,50,0.7)
边框颜色	提示框边框颜色	string	#333333
文字颜色	提示框文字颜色	string	#FFFFFF
字号	提示框文字字号	string	14
自定义参数（tooltip）		code

Type

DataSource

[
  {
    year: "2018",
    sales1: "500",
    sales2: "600",
  },
  {
    year: "2019",
    sales1: "900",
    sales2: "100",
  },
  {
    year: "2020",
    sales1: "1200",
    sales2: "300",
  },
  {
    year: "2021",
    sales1: "2000",
    sales2: "900",
  },
  {
    year: "2022",
    sales1: "1800",
    sales2: "2100",
  },
  {
    year: "2023",
    sales1: "200",
    sales2: "900",
  },
];