vue TradingView为k线做标记

逃离我推掉我的手 2022-10-19 00:56 173阅读 0赞

## 效果图 ##

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3B4aGluZw_size_16_color_FFFFFF_t_70_pic_center]

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);
            });
          };

位置截图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3B4aGluZw_size_16_color_FFFFFF_t_70_pic_center 1]

> 拓展

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3B4aGluZw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221005/9134afad45dd430b91ab55d2779005ed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3B4aGluZw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221005/8cc39250119f42ed9dedb89cb0492527.png
[https_blog.csdn.net_pxhing_article_details_106997657]: https://blog.csdn.net/pxhing/article/details/106997657
[https_blog.csdn.net_pxhing_article_details_118582663]: https://blog.csdn.net/pxhing/article/details/118582663