vue echarts 怎么在K线图中标记买卖点,买卖点数据是从后台获取的

Question

vue echarts 怎么在K线图中标记买卖点,买卖点数据是从后台获取的

this.dataTadeList 是我从后台获取的是买卖点数据 但是 给markPoint data 赋值后 并没有显示标记点

```java
markPoint: {
                symbolSize: 10,
                data: this.dataTadeList
              },

```

Answer 1

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

• 这篇博客: Vue项目中使用echarts教程中的 dataset管理数据 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:
  

  dataset 组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用

  优点:

  • 能够贴近这样的数据可视化常见思维方式：(I) 提供数据，(II) 指定数据到视觉的映射，从而形成图表。
  • 数据和其他配置可以被分离开来。数据常变，其他配置常不变。分开易于分别管理。
  • 数据可以被多个系列或者组件复用，对于大数据量的场景，不必为每个系列创建一份数据。
  • 支持更多的数据的常用格式，例如二维数组、对象数组等，一定程度上避免使用者为了数据格式而进行转换。
• 以下回答来自chatgpt:

  对于该问题，可以通过以下步骤来优化代码：

  1. 首先，将从后台获取的买卖点数据存储在一个数组中，例如：

  this.dataTradeList = [
    {name: '买点', value: [ '2018-01-01', 100 ]},
    {name: '卖点', value: [ '2018-01-05', 80 ]}
  ]
  

  1. 在绘制K线图时，在Echarts的option中定义markPoint的属性，该属性用于添加标记点，并将标记点的数据设置为上一步骤中存储的数据，例如：

  option: {
    ...
    series: [{
      name: 'K线',
      type: 'candlestick',
      ...
      markPoint: {
        symbol: 'arrow',
        symbolSize: 20,
        data: this.dataTradeList
      }
    }]
  }
  

  其中，symbol指定标志图形类型，symbolSize指定标记点的大小，data指定标记点的数据。

  1. 由于Echarts的渲染需要在mounted生命周期中进行，而数据的获取可能是异步的，因此需要使用Vue的watch来监听dataTradeList的变化，从而重新渲染图表，例如：

  watch: {
    dataTradeList: function(val) {
      if (this.chart !== null) {
        this.chart.setOption({
          series: [{
            name: 'K线',
            type: 'candlestick',
            ...
            markPoint: {
              symbol: 'arrow',
              symbolSize: 20,
              data: val
            }
          }]
        })
      }
    }
  },
  mounted() {
    this.chart = echarts.init(document.getElementById('chart'))
    this.chart.setOption(option)
  }
  

  其中，watch方法会在dataTradeList变化时触发，从而重新渲染图表。同时，在mounted生命周期中初始化Echarts并设置option属性。其中，this.chart表示图表实例。

  通过以上步骤，就能够在K线图中添加买卖点的标记，并且在数据变化时自动重新渲染图表。

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