diff --git a/src/views/components/kline/KlineTheme.js b/src/views/components/kline/KlineTheme.js new file mode 100644 index 00000000..4f3a4f5d --- /dev/null +++ b/src/views/components/kline/KlineTheme.js @@ -0,0 +1,42 @@ +/* eslint-disable */ +// 白色主题 +export const TRADINGVIEW_THEME_LIGHT = { + bg: '#fff', + crosshair: '#888888', + short: '#ea0070', + shortFill: '#ea0070', + long: '#70a800', + longFill: '#70a800', + cta: '#FBFBFB', + ctaHighlight: '#F5F5F5', + alert: '#FFD506', + category: 'light', + grid: '#EFF3F6', + lineColor: '#555', + textColor: '#999', + maLine: '#f0b90b', + ma1: '#ffc200', + ma2: '#6600cc', + ma3: '#cc0066', +}; + +// 黑色主题 +export const TRADINGVIEW_THEME_DARK = { + bg: '#283046', + grid: '#333', + lineColor: '#28343C', + short: '#ea5455', + shortFill: '#ea5455', + long: '#28c76f', + longFill: '#28c76f', + crosshair: '#626c73', + cta: '#363D52', + ctaHighlight: '#414A67', + alert: '#FFD506', + category: 'dark', + textColor: '#999', + maLine: '#f5bc00', + ma1: '#ffc200', + ma2: '#ff00ff', + ma3: '#cc0066', +}; diff --git a/src/views/components/kline/index.vue b/src/views/components/kline/index.vue index f13cd421..8c2df823 100644 --- a/src/views/components/kline/index.vue +++ b/src/views/components/kline/index.vue @@ -10,6 +10,7 @@ import pako from 'pako' import { widget, version } from './charting_library/charting_library' import DataFeeds from './datafeed' +import { TRADINGVIEW_THEME_LIGHT, TRADINGVIEW_THEME_DARK } from './KlineTheme'; const toDouble = time => { if (String(time).length < 2) return `0${time}` @@ -17,6 +18,11 @@ const toDouble = time => { } export default { + data() { + return { + themeLocal: 'dark' + } + }, mounted() { console.log(version()) @@ -69,6 +75,7 @@ export default { reader.readAsArrayBuffer(e.data) } + const tradingViewStyle = (this.themeLocal === 'dark' ? TRADINGVIEW_THEME_DARK : TRADINGVIEW_THEME_LIGHT); const tv = new widget({ debug: false, @@ -85,7 +92,7 @@ export default { datafeed: new DataFeeds(store), theme: 'Dark', favorites: { - intervals: ['1', '5', '15', '30', '60', '240', '1D'], + intervals: ['30', '240', '1D'], }, customFormatters: { timeFormatter: { @@ -99,20 +106,75 @@ export default { }, }, disabled_features: [ // 禁用功能 - 'header_symbol_search', - 'symbol_search_hot_key', - 'header_compare', - 'header_undo_redo', - 'header_screenshot', - 'volume_force_overlay', + 'left_toolbar', + 'timeframes_toolbar', + 'header_symbol_search', + 'header_compare', + // 'header_fullscreen_button', + 'header_widget', + // 'use_localstorage_for_settings', + 'save_chart_properties_to_local_storage', + // 'header_chart_type', + // 'display_market_status', + 'symbol_search_hot_key', + 'compare_symbol', + 'border_around_the_chart', + 'remove_library_container_border', + 'symbol_info', + // 'header_interval_dialog_button', + // 'show_interval_dialog_on_key_press', + 'volume_force_overlay', + // 'header_resolutions', + // 'legend_context_menu', + // new + 'symbol_info', + 'pane_context_menu', ], enabled_features: [ // 启用的功能 - 'dont_show_boolean_study_arguments', // 是否隐藏指标参数 - 'hide_last_na_study_output', // 隐藏最后一次指标输出 - 'same_data_requery', - 'side_toolbar_in_fullscreen_mode', - 'adaptive_logo', + 'hide_left_toolbar_by_default', + 'pane_context_menu', + 'hide_last_na_study_output', + 'dont_show_boolean_study_arguments', ], + + overrides: { + 'paneProperties.background': tradingViewStyle.bg, + 'symbolWatermarkProperties.transparency': 85, + 'scalesProperties.backgroundColor': '#151a1e', + 'scalesProperties.textColor': '#888', + + 'paneProperties.vertGridProperties.color': tradingViewStyle.grid, + 'paneProperties.horzGridProperties.color': tradingViewStyle.grid, + 'paneProperties.crossHairProperties.color': + tradingViewStyle.crosshair, + 'scalesProperties.lineColor': tradingViewStyle.lineColor, + 'symbolWatermarkProperties.color': 'rgba(0, 0, 0, 0)', + + 'mainSeriesProperties.style': 1, + + // Candles styles + 'mainSeriesProperties.candleStyle.upColor': tradingViewStyle.long, + 'mainSeriesProperties.candleStyle.downColor': tradingViewStyle.short, + 'mainSeriesProperties.candleStyle.drawWick': true, + 'mainSeriesProperties.candleStyle.drawBorder': true, + 'mainSeriesProperties.candleStyle.borderColor': '#C400CB', + 'mainSeriesProperties.candleStyle.borderUpColor': + tradingViewStyle.long, + 'mainSeriesProperties.candleStyle.borderDownColor': + tradingViewStyle.short, + 'mainSeriesProperties.candleStyle.wickUpColor': tradingViewStyle.long, + 'mainSeriesProperties.candleStyle.wickDownColor': + tradingViewStyle.short, + + 'study_Overlay@tv-basicstudies.barStyle.upColor': 'blue', + 'study_Overlay@tv-basicstudies.barStyle.downColor': 'blue', + + 'study_Overlay@tv-basicstudies.lineStyle.color': 'blue', + + 'study_Overlay@tv-basicstudies.areaStyle.color1': 'blue', + 'study_Overlay@tv-basicstudies.areaStyle.color2': 'blue', + 'study_Overlay@tv-basicstudies.areaStyle.linecolor': 'blue', + }, }) tv.onChartReady(() => {