vue echarts k线图上标记点,用自己后台的数组数据不显示

this.dataTadeList 是我后端的数据 在vue中获取 然后在option中使用
this.dataTadeList = [{ },{ }, {}] 数据就是数组中是对象
this.option = {
 series: [
              {
              markPoint: {
                data: this.dataTadeList
                  } 
               }
             ]
}
这样标记点不显示
-------------------------------------------------------------------------------------------------
this.option = {
 series: [
              {
              markPoint: {
                 data: [
                  {
                     yAxis: '0.16011978',
                     xAxis: "2022-01-06 03:46:00",
                     value: 'buy'
                   },]
                  } 
               }
             ]
}
但是直接写在option 中 就可以显示

-----------------------------------------------------------------------------------------------------
我以为是我获取后端数据的类型不对  就 直接在获取后 给dataTadeList  赋值
this.dataTadeList =[
                  {
                     yAxis: '0.16011978',
                     xAxis: "2022-01-06 03:46:00",
                     value: 'buy'
                   },]

this.option = {
 series: [
              {
              markPoint: {
                   data: this.dataTadeList
}
但是这样还是不行,不知道 怎么改

所以到底要要怎么写?
我要做的就是在K线图中标注买卖点买卖点数据是后台数据提供的

你要是从后台获取的数据，那你可能图已经画完，数据才请求回来。所以你请求完可能需要重新画一下图，或者说请求完再画图，也就是 setOption

按照你的说法，应该不是结构不对。

不知道你这个问题是否已经解决, 如果还没有解决的话:

你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7674913
我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：Echarts图表宽度变成100px，让图表宽度随着父元素自动适应，Vue实时监听宽度的变化，这可能是史上最好的解决方案！...

除此之外, 这篇博客: VUE 爬坑之旅 -- 在 VUE 项目中使用 ECharts 画 K 线图和面积图，并且可切换中的 安装，导入并使用 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:

首先用 npm 安装

npm install echarts --save

ECharts 本身已经很好的支持了按需引入，在vue 组件中 import 需要的组件就可以使用了，使用前需要先给 ECharts 指定一个容器，

<template>
    <!--图表内容区域，必须给 ECharts 容器本身指定高度。不然它会使用默认高度-->
    <div class = "chart">
      <div id = "echarts" style = "height: 17.5rem"></div>
    </div>
</template>

  <script>
  import echarts from 'echarts/lib/echarts'
  import 'zrender/lib/svg/svg'
  import 'echarts/lib/chart/line'
  import 'echarts/lib/chart/candlestick'
  import chartUtil from '../../utils/chartUtil'

  export default {
    name: 'quotation',
    data () {
      return {
        chart: null,
      }
    },
    mounted () {
      //初始化 ECharts 实例，不能在created生命周期内初始化，因为那时候DOM还没有渲染，是找不到元素的
      this.initChart()
    },
    beforeDestroy () {
      //组件销毁前先销毁 ECharts 实例
      if (!this.chart) { return }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart () {
        // 基于准备好的dom，初始化echarts实例,移动端建议使用 svg模式
        this.chart = echarts.init(document.getElementById('echarts'), 'light', {renderer: 'svg'})
        this.chart.setOption(chartUtil.lineOption())

        //图标根据窗口大小自动缩放
        // window.addEventListener("resize", this.chart.resize);
      },
    },
  }
</script>

这里有几个需要注意的地方：

图表高度，若想给图表指定高度的话就必须给承载 ECharts 的容器指定高度，否则它会使用默认高度，给它的父容器定高也是不行的。
初始化时机，初始化不能在 created 生命周期里面，因为这时候还没有生成 DOM，所以为它指定的容器还不存在，也就无法初始化
在 vue 组件销毁之前，应该要将 ECharts 实例销毁，以避免内存泄漏的问题

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

vue echarts k线图上标记点,用自己后台的数组数据 不显示

vue echarts k线图上标记点,用自己后台的数组数据不显示