feat: kline style

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',
+};

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',
+        'left_toolbar',
-        'symbol_search_hot_key',
+      'timeframes_toolbar',
-        'header_compare',
+      'header_symbol_search',
-        'header_undo_redo',
+      'header_compare',
-        'header_screenshot',
+      // 'header_fullscreen_button',
-        'volume_force_overlay',
+      '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_left_toolbar_by_default',
-        'hide_last_na_study_output', // 隐藏最后一次指标输出
+      'pane_context_menu',
-        'same_data_requery',
+      'hide_last_na_study_output',
-        'side_toolbar_in_fullscreen_mode',
+      'dont_show_boolean_study_arguments',
-        'adaptive_logo',
       ],
+
+    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(() => {