<template>
  <view id="chart" style="width: 100%; height: 30.31rem"></view>
</template>

<script lang="ts" setup>
import { init, dispose } from 'klinecharts'
import { onMounted, onUnmounted, watch } from 'vue'
const props = defineProps({
  value: {
    type: Array,
    default: () => []
  }
})
let chart: any = null
watch(
  () => props.value,
  (newData) => {
    chart?.applyNewData(newData)
  },
  { deep: true }
)
const chartOption = {
  // 蜡烛图
  candle: {
    type: 'candle_solid',
    // 蜡烛柱
    bar: {
      upColor: '#ea3522',
      downColor: '#78a386',
      noChangeColor: '#888888',
      upBorderColor: '#ea3522',
      downBorderColor: '#78a386',
      noChangeBorderColor: '#888888',
      upWickColor: '#ea3522',
      downWickColor: '#78a386',
      noChangeWickColor: '#888888'
    },
    // 提示
    tooltip: {
      showRule: 'none'
    }
  },
  // x轴
  xAxis: {
    show: true,
    // x轴分割文字
    tickText: {
      color: '#fff'
    }
  },
  // y轴
  yAxis: {
    // x轴分割文字
    tickText: {
      color: '#fff'
    }
  }
}
onMounted(() => {
  chart = init('chart')
  chart.setStyles(chartOption)
  chart.createIndicator('MA', false, { id: 'candle_pane' })
  chart.createIndicator('VOL')
  chart.createIndicator('KDJ')
})

onUnmounted(() => {
  dispose('chart')
})
</script>
<style scoped lang="scss"></style>
