前言
在数据可视化日益成为业务决策核心驱动力的今天,高效、灵活的图表配置系统已成为开发人员不可或缺的工具。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” yAxisMinValueY轴最小值 Number 任意数值 0 yAxisMaxValueY轴最大值 Number 任意数值 自动计算 pyramidBaseWidth金字塔底部宽度百分比 Number 10-100 80 pyramidTopWidth金字塔顶部宽度百分比 Number 0-50 10 isInverted是否反转金字塔方向 Boolean true/false false
2. Radar (雷达图)
2.1 图表配置配置项 说明 类型 可选值 默认值 caption图表标题 String 任意文本 “” xAxisNameX轴名称 String 任意文本 “” yAxisNameY轴名称 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 任意文本 “” xAxisNameX轴名称 String 任意文本 “Time” yAxisNameY轴名称 String 任意文本 “Value” xAxisNameFontSizeX轴名称字体大小 Number 8-72 12 yAxisNameFontSizeY轴名称字体大小 Number 8-72 12 xAxisValuesFontSizeX轴值字体大小 Number 8-72 11 yAxisValuesFontSizeY轴值字体大小 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 ledSizeLED大小 Number 5-50 15 ledSpacingLED间距 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 xX坐标 Number 任意数值 0 yY坐标 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 xAxisNamePaddingX轴名称内边距 Number 5 yAxisNamePaddingY轴名称内边距 Number 5 yAxisValuesPaddingY轴值内边距 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组件库中所有图表类型的详细配置属性说明。这些配置项覆盖了从基础外观到高级交互的各个方面,通过灵活组合这些配置,可以创建出满足各种需求的可视化图表。实际使用时,建议结合具体场景选择合适的配置项,并参考官方文档获取更多示例和最佳实践。