차트 정의 완료

src/App.vue

@@ -16,9 +16,9 @@ import {calculateMACD, calculateEMA, calculateBollingerBands} from "./utils/mete
  * @param  {Boolean} ohlc Whether generated dat should include open, high, low, and close values
  * @returns {Array} sample data
  */
-
 let socket;
 const lazyLock = ref(false)
+const positionData = ref('')
 
 const contract = ref('BTC_USDT')
 const time = ref('15m')
@@ -193,6 +193,13 @@ const curToUnix = (() => {
   return Math.floor(new Date().getTime() / 1000);
 })
 
+const epochToString = (epo) => {
+  const cu = new Date(epo)
+  return cu.getFullYear() + '-' + cu.getMonth().toString().padStart(2, '0') + '-' +
+      cu.getDate().toString().padStart(2, '0') + ' ' + cu.getHours().toString().padStart(2, '0') + ':' +
+      cu.getMinutes().toString().padStart(2, '0') + ':' + cu.getSeconds().toString().padStart(2, '0');
+}
+
 
 const colorsTypeMap = {
   area: [
@@ -224,6 +231,16 @@ const colorsTypeMap = {
   line: [['color', 1]],
 };
 
+const mouseMove = (data) => {
+  positionData.value = `
+<span style="color:red; padding-right:3px;">O</span>${data.open}
+<span style="color:red; padding-left:5px; padding-right:3px;">C</span>${data.close}
+<span style="color:red; padding-left:5px; padding-right:3px;">L</span>${data.low}
+<span style="color:red; padding-left:5px; padding-right:3px;">H</span>${data.high}
+<span style="color:red; padding-left:5px; padding-right:3px;">T</span>${epochToString(data.time*1000)}
+`;
+}
+
 watch(contract, newVal => {
   distroy()
   console.log(newVal);
@@ -235,6 +252,7 @@ watch(time, newVal => {
   console.log(newVal);
   init(contract.value, newVal)
 })
+
 </script>
 
 <template>
@@ -297,13 +315,28 @@ watch(time, newVal => {
           :upper-bb-options="upperBbOptions"
           :lazyLock="lazyLock"
           @lazyLoad="lazyLoad"
+          @mouseMove="mouseMove"
           ref="lwChart"
       />
+      <div class="ohlc-info" v-html="positionData"></div>
+
     </div>
   </div>
 </template>
-<style scoped>
+<style scoped lang="scss">
 .chart-container {
   height: calc(100% - 3.2em);
 }
+
+.ohlc-info {
+  position: absolute;
+  top: 20px;
+  left: 10px;
+  font-size: 12px;
+  color: #333;
+  background: rgba(255, 255, 255, 0.8);
+  padding: 5px;
+  border-radius: 4px;
+  z-index: 1000;
+}
 </style>