vue echarts k线图 标记点根据条件设置颜色

 

 1. 数据格式{属性1, 属性2, 属性3, 属性4{属性4.1, 属性4.2, 属性4.3}}

{symbol: 'circle', 
    symbolSize: 0,
    xAxis: '2023-01-01 08:36:00', 
    yAxis: '0.06968924', 
    label: {
        fontStyle: 'normal', 
        fontSize: 13, 
        color: 'blue'
            }
}

2. 自定义局部function 拼装数据

// data 是 自定义标记点数据, 也可以是后端请求来的数据
// 这里data={'xAxis': "2023-01-01 06:50:00", 'yAxis': "0.06989846" , 'value':'B'}

        if (!data) return []
          const newDataArray = []
          for (let unit of data) {
            let obj = {}
            if (unit['value'] === 'B') {
              obj.symbol = 'circle'

            } else {
              obj.symbol = 'circle'
            }
            obj.symbolSize = 0
            obj.xAxis = unit['xAxis']
            obj.yAxis = unit['yAxis']
            obj.value = unit['value']
            if (unit['value'] === 'B') {
              obj.label = { fontStyle: 'normal', fontSize: 13, color: 'blue' }

            } else {
              obj.label = { fontStyle: 'normal', fontSize: 13, color: 'black' }
            }
            newDataArray.push(obj)
          }

3. markPoint 使用 拼装后的数据

 series: [
          {
             markPoint: {
             data: newDataArray,
                },
  }
]