OneCode图表配置速查手册

前言

在数据可视化日益成为业务决策核心驱动力的今天，高效、灵活的图表配置系统已成为开发人员不可或缺的工具。OneCode图表组件凭借其丰富的图表类型与精细化的配置能力，为开发者提供了构建专业数据可视化界面的完整解决方案。然而，随着图表类型的不断扩展与配置项的日益丰富，如何快速定位并正确使用特定配置属性已成为提升开发效率的关键挑战。

本配置字典博文旨在为开发者提供一份全面、系统的OneCode图表配置参考手册。基于对组件配置文件的深度解析，我们梳理了包括Pyramid、Radar、RealTimeLine、Funnel、HLED、Thermometer等15+图表类型的全部配置属性，涵盖图表标题、功能属性、外观样式、数据格式、交互效果等六大核心维度。每个配置项均包含详细的属性说明、取值范围与默认值定义，形成结构化的配置速查体系。

无论是实时数据监控场景中需要调整的RealTimeLine刷新频率，还是仪表盘展示中关键的AngularGauge指针样式，抑或是布局优化时必不可少的边距（chartLeftMargin）与填充（captionPadding）设置，读者都能在此找到权威的配置指南。我们特别对跨图表通用配置项（如字体属性、数值格式化、工具提示）进行了归纳整理，帮助开发者建立全局配置思维。

本文档不仅是新手入门的学习手册，更是资深开发者的案头速查工具。通过左侧导航的图表类型索引与配置项功能分类，您可以快速定位所需内容。随文附上的配置示例与实际效果对照，将帮助您更直观地理解各项配置的作用机制。

我们期待这份配置字典能够成为您驾驭OneCode图表组件的得力助手，让每一个数据可视化需求都能找到最精准的配置方案，最终实现业务数据的高效表达与价值传递。

1. Pyramid (金字塔图)

1.1 图表基本配置

配置项	说明	类型	可选值	默认值
caption	图表标题文本	String	任意文本	“”
captionFontSize	标题字体大小	Number	8-72	14
captionFontColor	标题字体颜色	String	颜色代码	“#333333”
captionAlignment	标题对齐方式	String	left/center/right	“center”
subCaption	图表副标题文本	String	任意文本	“”
subCaptionFontSize	副标题字体大小	Number	8-72	12

1.2 功能属性

配置项	说明	类型	可选值	默认值
animation	是否启用动画效果	Boolean	true/false	true
palette	图表调色板	Number/Array	0-19或颜色数组	0
showPrintMenu	是否显示打印菜单	Boolean	true/false	true
showDownloadMenu	是否显示下载菜单	Boolean	true/false	true
showHoverEffect	是否启用悬停效果	Boolean	true/false	true
enableSlicing	是否允许切片交互	Boolean	true/false	false

1.3 金字塔特有属性

配置项	说明	类型	可选值	默认值
pyramidMode	金字塔显示模式	String	“2D”/“sliced”	“2D”
yAxisMinValue	Y轴最小值	Number	任意数值	0
yAxisMaxValue	Y轴最大值	Number	任意数值	自动计算
pyramidBaseWidth	金字塔底部宽度百分比	Number	10-100	80
pyramidTopWidth	金字塔顶部宽度百分比	Number	0-50	10
isInverted	是否反转金字塔方向	Boolean	true/false	false

2. Radar (雷达图)

2.1 图表配置

配置项	说明	类型	可选值	默认值
caption	图表标题	String	任意文本	“”
xAxisName	X轴名称	String	任意文本	“”
yAxisName	Y轴名称	String	任意文本	“”
showBorder	是否显示边框	Boolean	true/false	true
borderColor	边框颜色	String	颜色代码	“#666666”
bgColor	图表背景色	String	颜色代码	“#FFFFFF”
canvasBgColor	画布背景色	String	颜色代码	“#FFFFFF”

2.2 数据系列配置

配置项	说明	类型	可选值	默认值
showLabels	是否显示数据标签	Boolean	true/false	true
showValues	是否显示数据值	Boolean	true/false	false
labelFontSize	标签字体大小	Number	8-72	12
valueFontSize	数值字体大小	Number	8-72	12
dataPointRadius	数据点半径	Number	1-20	4
connectNullData	是否连接空数据点	Boolean	true/false	false

2.3 雷达图特有属性

配置项	说明	类型	可选值	默认值
radarFillColor	雷达图填充颜色	String	颜色代码	“#F8F8F8”
radarFillAlpha	雷达图填充透明度	Number	0-100	30
borderThickness	雷达图边框厚度	Number	1-10	2
numDivLines	分割线数量	Number	1-20	5
divLineColor	分割线颜色	String	颜色代码	“#CCCCCC”
showAxes	是否显示轴线	Boolean	true/false	true

3. RealTimeLine (实时折线图)

3.1 标题与轴配置

配置项	说明	类型	可选值	默认值
caption	图表标题	String	任意文本	“”
xAxisName	X轴名称	String	任意文本	“Time”
yAxisName	Y轴名称	String	任意文本	“Value”
xAxisNameFontSize	X轴名称字体大小	Number	8-72	12
yAxisNameFontSize	Y轴名称字体大小	Number	8-72	12
xAxisValuesFontSize	X轴值字体大小	Number	8-72	11
yAxisValuesFontSize	Y轴值字体大小	Number	8-72	11

3.2 实时属性配置

配置项	说明	类型	可选值	默认值
updateInterval	数据更新间隔(毫秒)	Number	100-5000	1000
dataStreamURL	实时数据URL	String	有效URL	“”
refreshOnLoad	加载时是否刷新	Boolean	true/false	true
showRTMenuItem	是否显示实时菜单	Boolean	true/false	true
rtAutoUpdate	是否自动更新	Boolean	true/false	true
rtUpdateOnScroll	滚动时是否更新	Boolean	true/false	false
bufferSize	数据缓冲区大小	Number	5-100	10

3.3 折线图特有属性

配置项	说明	类型	可选值	默认值
lineThickness	线条厚度	Number	1-10	2
anchorRadius	锚点半径	Number	1-20	4
anchorBorderThickness	锚点边框厚度	Number	0-5	1
anchorBgColor	锚点背景色	String	颜色代码	“#FFFFFF”
anchorBorderColor	锚点边框颜色	String	颜色代码	系列颜色
showAnchors	是否显示锚点	Boolean	true/false	true
anchorSides	锚点边数	Number	3-100	4

4. RealTimeLineDY (双Y轴实时折线图)

4.1 双Y轴配置

配置项	说明	类型	可选值	默认值
showPrimaryYAxis	是否显示主Y轴	Boolean	true/false	true
showSecondaryYAxis	是否显示次Y轴	Boolean	true/false	true
primaryYAxisName	主Y轴名称	String	任意文本	“Value 1”
secondaryYAxisName	次Y轴名称	String	任意文本	“Value 2”
primaryYAxisMinValue	主Y轴最小值	Number	任意数值	0
primaryYAxisMaxValue	主Y轴最大值	Number	任意数值	自动计算
secondaryYAxisMinValue	次Y轴最小值	Number	任意数值	0
secondaryYAxisMaxValue	次Y轴最大值	Number	任意数值	自动计算
syncAxisLimits	是否同步轴限制	Boolean	true/false	false

4.2 其他特有属性

配置项	说明	类型	可选值	默认值
numDivLinesPrimaryYAxis	主Y轴分割线数量	Number	1-20	5
numDivLinesSecondaryYAxis	次Y轴分割线数量	Number	1-20	5
primaryYAxisColor	主Y轴颜色	String	颜色代码	“#1A80E5”
secondaryYAxisColor	次Y轴颜色	String	颜色代码	“#F53F3F”
showAxisOnLeft	是否在左侧显示轴	Boolean	true/false	true

5. RealTimeStackedArea (实时堆叠面积图)

5.1 面积图配置

配置项	说明	类型	可选值	默认值
fillAlpha	填充透明度	Number	0-100	70
showAreaBorder	是否显示面积边框	Boolean	true/false	true
areaBorderColor	面积边框颜色	String	颜色代码	系列颜色
areaBorderThickness	面积边框厚度	Number	1-5	1
stack100Percent	是否100%堆叠	Boolean	true/false	false
showShadow	是否显示阴影	Boolean	true/false	false
shadowColor	阴影颜色	String	颜色代码	“#000000”
shadowAlpha	阴影透明度	Number	0-100	30

6. RealTimeColumn (实时柱状图)

6.1 柱状图配置

配置项	说明	类型	可选值	默认值
columnWidth	柱宽百分比	Number	10-90	60
showColumnShadow	是否显示柱阴影	Boolean	true/false	false
shadowAlpha	阴影透明度	Number	0-100	40
use3DLighting	是否使用3D光照	Boolean	true/false	false
columnBorderThickness	柱边框厚度	Number	0-5	1
columnBorderColor	柱边框颜色	String	颜色代码	“#FFFFFF”
showZeroPlane	是否显示零平面	Boolean	true/false	true
zeroPlaneColor	零平面颜色	String	颜色代码	“#CCCCCC”

7. RealTimeStackedColumn (实时堆叠柱状图)

7.1 堆叠柱状图配置

配置项	说明	类型	可选值	默认值
stack100Percent	是否100%堆叠	Boolean	true/false	false
showCumulativeValues	是否显示累积值	Boolean	true/false	false
cumulativeLabelFontSize	累积标签字体大小	Number	8-72	12
cumulativeLabelFontColor	累积标签字体颜色	String	颜色代码	“#333333”
plotSpacePercent	绘图空间百分比	Number	0-100	80

8. HLED/VLED (水平/垂直LED图表)

8.1 LED通用配置

配置项	说明	类型	可选值	默认值
value	当前值	Number	任意数值	0
minValue	最小值	Number	任意数值	0
maxValue	最大值	Number	任意数值	100
ledSize	LED大小	Number	5-50	15
ledSpacing	LED间距	Number	0-20	2
showValue	是否显示值	Boolean	true/false	true
valueFontSize	值字体大小	Number	8-72	14

8.2 颜色范围配置

配置项	说明	类型	可选值	默认值
colorRange	颜色范围配置	Array	颜色范围对象数组	见下方示例
useColorName	是否使用颜色名称	Boolean	true/false	true

colorRange示例配置：

colorRange: [
  { minValue: 0, maxValue: 30, color: "#FF0000" },
  { minValue: 31, maxValue: 70, color: "#FFFF00" },
  { minValue: 71, maxValue: 100, color: "#00FF00" }
]

9. Cylinder (圆柱图)

9.1 圆柱图配置

配置项	说明	类型	可选值	默认值
cylinderRadius	圆柱半径百分比	Number	10-90	40
cylinderHeight	圆柱高度百分比	Number	10-90	80
showCylinderBorder	是否显示圆柱边框	Boolean	true/false	true
cylinderBorderColor	圆柱边框颜色	String	颜色代码	“#FFFFFF”
cylinderBorderThickness	圆柱边框厚度	Number	1-5	1
fillColor	填充颜色	String	颜色代码	“#1A80E5”
fillAlpha	填充透明度	Number	0-100	80
showValue	是否显示值	Boolean	true/false	true

10. Thermometer (温度计图)

10.1 温度计配置

配置项	说明	类型	可选值	默认值
value	当前温度值	Number	任意数值	0
minValue	最低温度	Number	任意数值	0
maxValue	最高温度	Number	任意数值	100
thermometerHeight	温度计高度	Number	50-500	200
thermometerWidth	温度计宽度	Number	10-100	30
bulbRadius	底部灯泡半径	Number	5-50	15
showValue	是否显示值	Boolean	true/false	true
valueFontSize	值字体大小	Number	8-72	14
colorRange	颜色范围配置	Array	颜色范围对象数组	见下方示例

colorRange示例配置：

colorRange: [
  { minValue: 0, maxValue: 30, color: "#0000FF" },
  { minValue: 31, maxValue: 60, color: "#00FF00" },
  { minValue: 61, maxValue: 100, color: "#FF0000" }
]

11. HLinearGauge (水平线性仪表)

11.1 仪表配置

配置项	说明	类型	可选值	默认值
value	当前值	Number	任意数值	0
minValue	最小值	Number	任意数值	0
maxValue	最大值	Number	任意数值	100
gaugeLength	仪表长度	Number	100-1000	300
gaugeHeight	仪表高度	Number	20-200	60
showValue	是否显示值	Boolean	true/false	true
valueFontSize	值字体大小	Number	8-72	14
pointerLength	指针长度百分比	Number	50-100	80
pointerThickness	指针厚度	Number	1-10	3
pointerColor	指针颜色	String	颜色代码	“#FF0000”

11.2 刻度配置

配置项	说明	类型	可选值	默认值
majorTMNumber	主刻度数量	Number	2-20	5
minorTMNumber	次刻度数量	Number	0-10	4
majorTMHeight	主刻度高度	Number	5-30	15
minorTMHeight	次刻度高度	Number	5-20	10
majorTMColor	主刻度颜色	String	颜色代码	“#333333”
minorTMColor	次刻度颜色	String	颜色代码	“#666666”

12. AngularGauge (角度仪表)

12.1 角度仪表配置

配置项	说明	类型	可选值	默认值
value	当前值	Number	任意数值	0
minValue	最小值	Number	任意数值	0
maxValue	最大值	Number	任意数值	100
gaugeStartAngle	仪表起始角度	Number	0-360	135
gaugeEndAngle	仪表结束角度	Number	0-360	45
gaugeOuterRadius	仪表外半径	Number	50-500	100
gaugeInnerRadius	仪表内半径	Number	0-450	0
showValue	是否显示值	Boolean	true/false	true
valueFontSize	值字体大小	Number	8-72	14

12.2 指针配置

配置项	说明	类型	可选值	默认值
dialRadius	指针半径百分比	Number	50-100	80
dialThickness	指针厚度	Number	1-20	5
dialColor	指针颜色	String	颜色代码	“#FF0000”
pivotRadius	轴点半径	Number	5-20	8
pivotColor	轴点颜色	String	颜色代码	“#333333”
pivotBorderColor	轴点边框颜色	String	颜色代码	“#FFFFFF”
pivotBorderThickness	轴点边框厚度	Number	1-5	2

13. Annotations (标注)

13.1 标注通用配置

配置项	说明	类型	可选值	默认值
showBelow	是否显示在图表下方	Boolean	true/false	false
drawAnchors	是否绘制锚点	Boolean	true/false	false
id	标注ID	String	唯一标识符	“”
type	标注类型	String	“text”/“line”/“rectangle”/“circle”/“arc”/“image”/“polygon”/“path”	“text”

13.2 文本标注配置

配置项	说明	类型	可选值	默认值
text	标注文本	String	任意文本	“”
fontSize	字体大小	Number	8-72	12
fontColor	字体颜色	String	颜色代码	“#000000”
fontBold	是否粗体	Boolean	true/false	false
fontItalic	是否斜体	Boolean	true/false	false
x	X坐标	Number	任意数值	0
y	Y坐标	Number	任意数值	0
align	对齐方式	String	left/center/right	“left”
rotation	旋转角度	Number	0-360	0

13.3 线条标注配置

配置项	说明	类型	可选值	默认值
x1	起点X坐标	Number	任意数值	0
y1	起点Y坐标	Number	任意数值	0
x2	终点X坐标	Number	任意数值	0
y2	终点Y坐标	Number	任意数值	0
thickness	线条厚度	Number	1-20	2
color	线条颜色	String	颜色代码	“#000000”
dashed	是否虚线	Boolean	true/false	false
dashLen	虚线长度	Number	1-50	5
dashGap	虚线间距	Number	1-50	5
arrowAtStart	起点是否带箭头	Boolean	true/false	false
arrowAtEnd	终点是否带箭头	Boolean	true/false	false
arrowWidth	箭头宽度	Number	1-20	5
arrowHeight	箭头高度	Number	1-20	5

14. 通用配置项详解

14.1 边距和填充配置

prop: ["captionPadding", "xAxisNamePadding", "yAxisNamePadding", "yAxisValuesPadding", "labelPadding", "valuePadding", "plotSpacePercent", "chartLeftMargin", "chartRightMargin", "chartTopMargin", "chartBottomMargin", "legendPadding", "canvasLeftMargin", "canvasRightMargin", "canvasTopMargin", "canvasBottomMargin"]

配置项	说明	类型	默认值
captionPadding	标题内边距	Number	10
xAxisNamePadding	X轴名称内边距	Number	5
yAxisNamePadding	Y轴名称内边距	Number	5
yAxisValuesPadding	Y轴值内边距	Number	5
labelPadding	标签内边距	Number	5
valuePadding	值内边距	Number	5
plotSpacePercent	绘图空间百分比	Number	80
chartLeftMargin	图表左边距	Number	10
chartRightMargin	图表右边距	Number	10
chartTopMargin	图表上边距	Number	10
chartBottomMargin	图表下边距	Number	10
legendPadding	图例内边距	Number	5
canvasLeftMargin	画布左边距	Number	10
canvasRightMargin	画布右边距	Number	10
canvasTopMargin	画布上边距	Number	10
canvasBottomMargin	画布下边距	Number	10

14.2 图例配置

配置项	说明	类型	可选值	默认值
showLegend	是否显示图例	Boolean	true/false	true
legendPosition	图例位置	String	top/bottom/left/right	“bottom”
legendFontSize	图例字体大小	Number	8-72	12
legendFontColor	图例字体颜色	String	颜色代码	“#333333”
legendBgColor	图例背景色	String	颜色代码	“#FFFFFF”
legendBorderColor	图例边框颜色	String	颜色代码	“#CCCCCC”
legendBorderThickness	图例边框厚度	Number	0-5	1
legendShadow	是否显示图例阴影	Boolean	true/false	false
legendAllowDrag	是否允许拖动图例	Boolean	true/false	false

14.3 工具提示配置

配置项	说明	类型	可选值	默认值
showTooltip	是否显示工具提示	Boolean	true/false	true
tooltipBgColor	工具提示背景色	String	颜色代码	“#000000”
tooltipBorderColor	工具提示边框颜色	String	颜色代码	“#666666”
tooltipBorderThickness	工具提示边框厚度	Number	0-5	1
tooltipFontColor	工具提示字体颜色	String	颜色代码	“#FFFFFF”
tooltipFontSize	工具提示字体大小	Number	8-72	12
tooltipAlpha	工具提示透明度	Number	0-100	90
tooltipPadding	工具提示内边距	Number	0-20	5
tooltipSeparator	工具提示分隔符	String	任意文本	": "

14.4 数值格式化配置

配置项	说明	类型	可选值	默认值
numberPrefix	数值前缀	String	任意文本	“”
numberSuffix	数值后缀	String	任意文本	“”
decimalSeparator	小数点分隔符	String	./,	“.”
thousandSeparator	千分位分隔符	String	,/.\s	“,”
decimalPrecision	小数位数	Number	0-10	0
formatNumber	是否格式化数字	Boolean	true/false	true
formatNumberScale	是否格式化数字刻度	Boolean	true/false	true
scaleUnit	刻度单位	String	K/M/B/T	“”
numberScaleValue	数字刻度值	Number	1000/1000000等	1000

15. 事件配置

15.1 通用事件

配置项	说明	类型	可选值	默认值
clickURL	点击图表时的URL	String	有效URL	“”
clickURLOpenInNewWindow	是否在新窗口打开URL	Boolean	true/false	true
onLoadComplete	加载完成事件	String	JavaScript函数名	“”
onClick	点击事件	String	JavaScript函数名	“”
onMouseOver	鼠标悬停事件	String	JavaScript函数名	“”
onMouseOut	鼠标移出事件	String	JavaScript函数名	“”

结语

以上是OneCode组件库中所有图表类型的详细配置属性说明。这些配置项覆盖了从基础外观到高级交互的各个方面，通过灵活组合这些配置，可以创建出满足各种需求的可视化图表。实际使用时，建议结合具体场景选择合适的配置项，并参考官方文档获取更多示例和最佳实践。