vue TradingView为k线做标记

效果图

根据后台返回的数据 为k线实时做标记

getMarks() 方法放在methods里面

getMarks() {
      var that = this;
      var color = { background: "#4caf50" };  //自定义背景颜色
      var color1 = { background: "#ff4545" };
      var labelFontColor = "#fff";   //文字颜色
      var minSize = 20;  //尺寸
      var marks = [];
      // bsAll是我的标记数据  根据你的情况而定
      for (var i = 0; i < that.bsAll.length; i++) {
        var mark = {};
        mark.id = that.bsAll[i].id;  //id 是根据k线的id 确定的唯一性
        mark.time = that.bsAll[i].time / 1000; //时间也是唯一的  / 1000取决于后台返回你的数据
        mark.color = that.bsAll[i].bs === "买" ? color : color1;
        mark.text = that.bsAll[i].bs;
        mark.label = that.bsAll[i].bs; 
        mark.labelFontColor = labelFontColor;
        mark.minSize = minSize;
        marks.push(mark);
      }
      return marks;
    },

• id: 唯一标识id
• time : 时间也是唯一的
• color : 背景颜色 可自定义
• text 鼠标放标记时提示的文字
• label 页面展示的文字 单字符
• labelFontColor 文字颜色
• minSize 尺寸大小

引用
Datafeed.Container.prototype.getMarks位置在createFeed() 里面

Datafeed.Container.prototype.getMarks = function (
        symbolInfo,
        startDate,
        endDate,
        onDataCallback,
        resolution
      ) {
      //清计时器
        if (this_vue.Timer != null) {
          clearInterval(this_vue.Timer);
        }
        //我是实时更新标记 所以用了计时器
        this_vue.Timer = setInterval(() => {
          var marks = this_vue.getMarks();
          console.log(marks.length);
          onDataCallback(marks);
        }, 1000);
        // 通过$once来监听定时器在beforeDestroy钩子可以被清除。
        this_vue.$once("hook:beforeDestroy", () => {
          clearInterval(this_vue.Timer);
        });
      };

位置截图

拓展

vue TradingView k线地址 : https://blog.csdn.net/pxhing/article/details/106997657.

vue TradingView设置均线和隐藏均线: https://blog.csdn.net/pxhing/article/details/118582663.