vue echarts 怎么在K线图中标记买卖点,买卖点数据是从后台获取的
this.dataTadeList 是我从后台获取的是买卖点数据 但是 给markPoint data 赋值后 并没有显示标记点
```java
markPoint: {
symbolSize: 10,
data: this.dataTadeList
},
```
vue echarts 怎么在K线图中标记买卖点,买卖点数据是从后台获取的
this.dataTadeList 是我从后台获取的是买卖点数据 但是 给markPoint data 赋值后 并没有显示标记点
```java
markPoint: {
symbolSize: 10,
data: this.dataTadeList
},
```
dataset
组件用于单独的数据集声明,从而数据可以单独管理,被多个组件复用
优点:
对于该问题,可以通过以下步骤来优化代码:
this.dataTradeList = [
{name: '买点', value: [ '2018-01-01', 100 ]},
{name: '卖点', value: [ '2018-01-05', 80 ]}
]
option: {
...
series: [{
name: 'K线',
type: 'candlestick',
...
markPoint: {
symbol: 'arrow',
symbolSize: 20,
data: this.dataTradeList
}
}]
}
其中,symbol指定标志图形类型,symbolSize指定标记点的大小,data指定标记点的数据。
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线图中添加买卖点的标记,并且在数据变化时自动重新渲染图表。