在數據可視化日益成為業務決策核心驅動力的今天，高效、靈活的圖表配置系統已成為開發人員不可或缺的工具。OneCode圖表組件憑借其豐富的圖表類型與精細化的配置能力，為開發者提供了構建專業數據可視化界面的完整解決方案。然而，隨著圖表類型的不斷擴展與配置項的日益豐富，如何快速定位并正確使用特定配置屬性已成為提升開發效率的關鍵挑戰。
本配置字典博文旨在為開發者提供一份全面、系統的OneCode圖表配置參考手冊。基于對組件配置文件的深度解析，我們梳理了包括Pyramid、Radar、RealTimeLine、Funnel、HLED、Thermometer等15+圖表類型的全部配置屬性，涵蓋圖表標題、功能屬性、外觀樣式、數據格式、交互效果等六大核心維度。每個配置項均包含詳細的屬性說明、取值范圍與默認值定義，形成結構化的配置速查體系。
無論是實時數據監控場景中需要調整的RealTimeLine刷新頻率，還是儀表盤展示中關鍵的AngularGauge指針樣式，抑或是布局優化時必不可少的邊距（chartLeftMargin）與填充（captionPadding）設置，讀者都能在此找到權威的配置指南。我們特別對跨圖表通用配置項（如字體屬性、數值格式化、工具提示）進行了歸納整理，幫助開發者建立全局配置思維。
本文檔不僅是新手入門的學習手冊，更是資深開發者的案頭速查工具。通過左側導航的圖表類型索引與配置項功能分類，您可以快速定位所需內容。隨文附上的配置示例與實際效果對照，將幫助您更直觀地理解各項配置的作用機制。
我們期待這份配置字典能夠成為您駕馭OneCode圖表組件的得力助手，讓每一個數據可視化需求都能找到最精準的配置方案，最終實現業務數據的高效表達與價值傳遞。
配置項 說明 類型 可選值 默認值 caption圖表標題文本 String 任意文本 “” captionFontSize標題字體大小 Number 8-72 14 captionFontColor標題字體顏色 String 顏色代碼 “#333333” captionAlignment標題對齊方式 String left/center/right “center” subCaption圖表副標題文本 String 任意文本 “” subCaptionFontSize副標題字體大小 Number 8-72 12
配置項 說明 類型 可選值 默認值 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
配置項 說明 類型 可選值 默認值 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
配置項 說明 類型 可選值 默認值 caption圖表標題 String 任意文本 “” xAxisNameX軸名稱 String 任意文本 “” yAxisNameY軸名稱 String 任意文本 “” showBorder是否顯示邊框 Boolean true/false true borderColor邊框顏色 String 顏色代碼 “#666666” bgColor圖表背景色 String 顏色代碼 “#FFFFFF” canvasBgColor畫布背景色 String 顏色代碼 “#FFFFFF”
配置項 說明 類型 可選值 默認值 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
配置項 說明 類型 可選值 默認值 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
配置項 說明 類型 可選值 默認值 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
配置項 說明 類型 可選值 默認值 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
配置項 說明 類型 可選值 默認值 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
配置項 說明 類型 可選值 默認值 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
配置項 說明 類型 可選值 默認值 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
配置項 說明 類型 可選值 默認值 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
配置項 說明 類型 可選值 默認值 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”
配置項 說明 類型 可選值 默認值 stack100Percent是否100%堆疊 Boolean true/false false showCumulativeValues是否顯示累積值 Boolean true/false false cumulativeLabelFontSize累積標簽字體大小 Number 8-72 12 cumulativeLabelFontColor累積標簽字體顏色 String 顏色代碼 “#333333” plotSpacePercent繪圖空間百分比 Number 0-100 80
配置項 說明 類型 可選值 默認值 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
配置項 說明 類型 可選值 默認值 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" }
]
配置項 說明 類型 可選值 默認值 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
配置項 說明 類型 可選值 默認值 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" }
]
配置項 說明 類型 可選值 默認值 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”
配置項 說明 類型 可選值 默認值 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”
配置項 說明 類型 可選值 默認值 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
配置項 說明 類型 可選值 默認值 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
配置項 說明 類型 可選值 默認值 showBelow是否顯示在圖表下方 Boolean true/false false drawAnchors是否繪制錨點 Boolean true/false false id標注ID String 唯一標識符 “” type標注類型 String “text”/“line”/“rectangle”/“circle”/“arc”/“image”/“polygon”/“path” “text”
配置項 說明 類型 可選值 默認值 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
配置項 說明 類型 可選值 默認值 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
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
配置項 說明 類型 可選值 默認值 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
配置項 說明 類型 可選值 默認值 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 任意文本 ": "
配置項 說明 類型 可選值 默認值 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
配置項 說明 類型 可選值 默認值 clickURL點擊圖表時的URL String 有效URL “” clickURLOpenInNewWindow是否在新窗口打開URL Boolean true/false true onLoadComplete加載完成事件 String JavaScript函數名 “” onClick點擊事件 String JavaScript函數名 “” onMouseOver鼠標懸停事件 String JavaScript函數名 “” onMouseOut鼠標移出事件 String JavaScript函數名 “”
以上是OneCode組件庫中所有圖表類型的詳細配置屬性說明。這些配置項覆蓋了從基礎外觀到高級交互的各個方面，通過靈活組合這些配置，可以創建出滿足各種需求的可視化圖表。實際使用時，建議結合具體場景選擇合適的配置項，并參考官方文檔獲取更多示例和最佳實踐。
)
)
