feat: 现在创建主组件：
This commit is contained in:
zdl
298
src/components/StockChart/config/klineTheme.ts
Normal file
298
src/components/StockChart/config/klineTheme.ts
Normal file
@@ -0,0 +1,298 @@
|
||||
/**
|
||||
* KLineChart 主题配置
|
||||
*
|
||||
* 适配 klinecharts@10.0.0-beta1
|
||||
* 参考: https://github.com/klinecharts/KLineChart/blob/main/docs/en-US/guide/styles.md
|
||||
*/
|
||||
|
||||
import type { DeepPartial, Styles } from 'klinecharts';
|
||||
|
||||
/**
|
||||
* 图表主题颜色配置
|
||||
*/
|
||||
export const CHART_COLORS = {
|
||||
// 涨跌颜色（中国市场习惯：红涨绿跌）
|
||||
up: '#ef5350', // 上涨红色
|
||||
down: '#26a69a', // 下跌绿色
|
||||
neutral: '#888888', // 平盘灰色
|
||||
|
||||
// 主题色（继承自 Argon Dashboard）
|
||||
primary: '#1b3bbb', // Navy 500
|
||||
secondary: '#728fea', // Navy 300
|
||||
background: '#ffffff',
|
||||
backgroundDark: '#1B254B',
|
||||
|
||||
// 文本颜色
|
||||
text: '#333333',
|
||||
textSecondary: '#888888',
|
||||
textDark: '#ffffff',
|
||||
|
||||
// 网格颜色
|
||||
grid: '#e0e0e0',
|
||||
gridDark: '#2d3748',
|
||||
|
||||
// 边框颜色
|
||||
border: '#e0e0e0',
|
||||
borderDark: '#2d3748',
|
||||
|
||||
// 事件标记颜色
|
||||
eventMarker: '#ff9800',
|
||||
eventMarkerText: '#ffffff',
|
||||
};
|
||||
|
||||
/**
|
||||
* 浅色主题配置（默认）
|
||||
*/
|
||||
export const lightTheme: DeepPartial<Styles> = {
|
||||
candle: {
|
||||
type: 'candle_solid', // 实心蜡烛图
|
||||
bar: {
|
||||
upColor: CHART_COLORS.up,
|
||||
downColor: CHART_COLORS.down,
|
||||
noChangeColor: CHART_COLORS.neutral,
|
||||
},
|
||||
priceMark: {
|
||||
show: true,
|
||||
high: {
|
||||
color: CHART_COLORS.up,
|
||||
},
|
||||
low: {
|
||||
color: CHART_COLORS.down,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
showRule: 'always',
|
||||
showType: 'standard',
|
||||
labels: ['时间: ', '开: ', '收: ', '高: ', '低: ', '成交量: '],
|
||||
text: {
|
||||
size: 12,
|
||||
family: 'Helvetica, Arial, sans-serif',
|
||||
weight: 'normal',
|
||||
color: CHART_COLORS.text,
|
||||
},
|
||||
},
|
||||
},
|
||||
indicator: {
|
||||
tooltip: {
|
||||
showRule: 'always',
|
||||
showType: 'standard',
|
||||
text: {
|
||||
size: 12,
|
||||
family: 'Helvetica, Arial, sans-serif',
|
||||
weight: 'normal',
|
||||
color: CHART_COLORS.text,
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
axisLine: {
|
||||
show: true,
|
||||
color: CHART_COLORS.border,
|
||||
},
|
||||
tickLine: {
|
||||
show: true,
|
||||
length: 3,
|
||||
color: CHART_COLORS.border,
|
||||
},
|
||||
tickText: {
|
||||
show: true,
|
||||
color: CHART_COLORS.textSecondary,
|
||||
family: 'Helvetica, Arial, sans-serif',
|
||||
weight: 'normal',
|
||||
size: 12,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
show: true,
|
||||
color: CHART_COLORS.border,
|
||||
},
|
||||
tickLine: {
|
||||
show: true,
|
||||
length: 3,
|
||||
color: CHART_COLORS.border,
|
||||
},
|
||||
tickText: {
|
||||
show: true,
|
||||
color: CHART_COLORS.textSecondary,
|
||||
family: 'Helvetica, Arial, sans-serif',
|
||||
weight: 'normal',
|
||||
size: 12,
|
||||
},
|
||||
type: 'normal', // 'normal' | 'percentage' | 'log'
|
||||
},
|
||||
grid: {
|
||||
show: true,
|
||||
horizontal: {
|
||||
show: true,
|
||||
size: 1,
|
||||
color: CHART_COLORS.grid,
|
||||
style: 'dashed',
|
||||
},
|
||||
vertical: {
|
||||
show: false, // 垂直网格线通常关闭，避免过于密集
|
||||
},
|
||||
},
|
||||
separator: {
|
||||
size: 1,
|
||||
color: CHART_COLORS.border,
|
||||
},
|
||||
crosshair: {
|
||||
show: true,
|
||||
horizontal: {
|
||||
show: true,
|
||||
line: {
|
||||
show: true,
|
||||
style: 'dashed',
|
||||
dashValue: [4, 2],
|
||||
size: 1,
|
||||
color: CHART_COLORS.primary,
|
||||
},
|
||||
text: {
|
||||
show: true,
|
||||
color: CHART_COLORS.textDark,
|
||||
size: 12,
|
||||
family: 'Helvetica, Arial, sans-serif',
|
||||
weight: 'normal',
|
||||
backgroundColor: CHART_COLORS.primary,
|
||||
},
|
||||
},
|
||||
vertical: {
|
||||
show: true,
|
||||
line: {
|
||||
show: true,
|
||||
style: 'dashed',
|
||||
dashValue: [4, 2],
|
||||
size: 1,
|
||||
color: CHART_COLORS.primary,
|
||||
},
|
||||
text: {
|
||||
show: true,
|
||||
color: CHART_COLORS.textDark,
|
||||
size: 12,
|
||||
family: 'Helvetica, Arial, sans-serif',
|
||||
weight: 'normal',
|
||||
backgroundColor: CHART_COLORS.primary,
|
||||
},
|
||||
},
|
||||
},
|
||||
overlay: {
|
||||
// 事件标记覆盖层样式
|
||||
point: {
|
||||
color: CHART_COLORS.eventMarker,
|
||||
borderColor: CHART_COLORS.eventMarker,
|
||||
borderSize: 1,
|
||||
radius: 5,
|
||||
activeColor: CHART_COLORS.eventMarker,
|
||||
activeBorderColor: CHART_COLORS.eventMarker,
|
||||
activeBorderSize: 2,
|
||||
activeRadius: 6,
|
||||
},
|
||||
line: {
|
||||
style: 'solid',
|
||||
smooth: false,
|
||||
color: CHART_COLORS.eventMarker,
|
||||
size: 1,
|
||||
dashedValue: [2, 2],
|
||||
},
|
||||
text: {
|
||||
style: 'fill',
|
||||
color: CHART_COLORS.eventMarkerText,
|
||||
size: 12,
|
||||
family: 'Helvetica, Arial, sans-serif',
|
||||
weight: 'normal',
|
||||
offset: [0, 0],
|
||||
},
|
||||
rect: {
|
||||
style: 'fill',
|
||||
color: CHART_COLORS.eventMarker,
|
||||
borderColor: CHART_COLORS.eventMarker,
|
||||
borderSize: 1,
|
||||
borderRadius: 4,
|
||||
borderStyle: 'solid',
|
||||
borderDashedValue: [2, 2],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 深色主题配置
|
||||
*/
|
||||
export const darkTheme: DeepPartial<Styles> = {
|
||||
...lightTheme,
|
||||
candle: {
|
||||
...lightTheme.candle,
|
||||
tooltip: {
|
||||
...lightTheme.candle?.tooltip,
|
||||
text: {
|
||||
...lightTheme.candle?.tooltip?.text,
|
||||
color: CHART_COLORS.textDark,
|
||||
},
|
||||
},
|
||||
},
|
||||
indicator: {
|
||||
...lightTheme.indicator,
|
||||
tooltip: {
|
||||
...lightTheme.indicator?.tooltip,
|
||||
text: {
|
||||
...lightTheme.indicator?.tooltip?.text,
|
||||
color: CHART_COLORS.textDark,
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
...lightTheme.xAxis,
|
||||
axisLine: {
|
||||
show: true,
|
||||
color: CHART_COLORS.borderDark,
|
||||
},
|
||||
tickLine: {
|
||||
show: true,
|
||||
length: 3,
|
||||
color: CHART_COLORS.borderDark,
|
||||
},
|
||||
tickText: {
|
||||
...lightTheme.xAxis?.tickText,
|
||||
color: CHART_COLORS.textDark,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
...lightTheme.yAxis,
|
||||
axisLine: {
|
||||
show: true,
|
||||
color: CHART_COLORS.borderDark,
|
||||
},
|
||||
tickLine: {
|
||||
show: true,
|
||||
length: 3,
|
||||
color: CHART_COLORS.borderDark,
|
||||
},
|
||||
tickText: {
|
||||
...lightTheme.yAxis?.tickText,
|
||||
color: CHART_COLORS.textDark,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
show: true,
|
||||
horizontal: {
|
||||
show: true,
|
||||
size: 1,
|
||||
color: CHART_COLORS.gridDark,
|
||||
style: 'dashed',
|
||||
},
|
||||
vertical: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
separator: {
|
||||
size: 1,
|
||||
color: CHART_COLORS.borderDark,
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取主题配置（根据 Chakra UI colorMode）
|
||||
*/
|
||||
export const getTheme = (colorMode: 'light' | 'dark' = 'light'): DeepPartial<Styles> => {
|
||||
return colorMode === 'dark' ? darkTheme : lightTheme;
|
||||
};
|
||||
Reference in New Issue
Block a user