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 &#61; 0; i < that.bsAll.length; i&#43;&#43;) {
        var mark &#61; {};
        mark.id &#61; that.bsAll[i].id;  //id 是根据k线的id 确定的唯一性
        mark.time &#61; that.bsAll[i].time / 1000; //时间也是唯一的  / 1000取决于后台返回你的数据
        mark.color &#61; that.bsAll[i].bs &#61;&#61;&#61; &#34;买&#34; ? color : color1;
        mark.text &#61; that.bsAll[i].bs;
        mark.label &#61; that.bsAll[i].bs; 
        mark.labelFontColor &#61; labelFontColor;
        mark.minSize &#61; 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);
        });
      };

位置截图