您当前的位置:首页 > 学无止境 > 区块链 区块链

【k线】获取echarts提示框中数据,自定义tooltip样式实现专业级k线图

caster2019-06-17 17:37:24 区块链 人已围观

简介tooltip提示框组件,echarts官网文档地址:https://echarts.baidu.com/option.html#tooltip原生提示框样式echarts提供的提示框,都是悬浮样式的。


但是现在各大交易所平台的k线

tooltip

提示框组件,echarts官网文档地址:https://echarts.baidu.com/option.html#tooltip

原生提示框样式

echarts提供的提示框,都是悬浮样式的。


但是现在各大交易所平台的k线模块,提示框都是在坐标系的左上角固定的。比如火币,aicoin,QBde,有些使用的是第三方的k线模块,比如以火币为代表使用的是TradingView,


还有部分是自己画。



k线的第一版由于时间关系,没有对提示框做太多的处理,所以使用的是echarts默认的悬浮样式的提示框。

版本迭代的过程中,提示框这块被列了出来,所以要解决,但是发现echarts的demo中没有这方面可以参考的,网络上的各种教程也没有与之相关的。所以只能自己动手了。

api文档

echarts的官方文档中,api文档中有相关的tooltip说明,但是并没有可用的说明,也没有可供拿到提示框中数据的api。 tooltipapi文档

tooltip.formatter

tooltip文档中,formatter属性支持对提示框样式,内容进行修改。formatter是一个回调函数。但是并没可以功能实现专业k线那样的风格。

想到formatter既然是一个回调函数,那么它的params参数中应该可以取到提示框中需要显示的数据。

 tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        },
        formatter:function(params){
        <!--打印参数-->
            console.log(params)
            return ""
        }
    }
    

在log中真的发现了需要的数据

0: {}
​​
"$vars": Array(3) [ "seriesName", "name", "value" ]
​​
axisDim: "x"
​​
axisId: "\u0000series\u00000\u00000"
​​
axisIndex: 0
​​
axisType: "xAxis.category"
​​
axisValue: "1"
​​
axisValueLabel: "1"
​​
color: "#5793f3"
​​
componentIndex: 0
​​
componentSubType: "bar"
​​
componentType: "series"
​​
data: 2
​​
dataIndex: 0
​​
dataType: undefined
​​
marker: "<span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#5793f3;\"></span>"
​​
name: "1"
​​
seriesId: "\u0000蒸发量\u00000"
​​
seriesIndex: 0
​​
seriesName: "蒸发量"
​​
seriesType: "bar"
​​
value: 2

其中name,是坐标系对应的x轴数据,value是对应的值,color是图例的颜色。 既然可以取到提示框中的数据,那么就一切迎刃而解了。

1,vue,data中初始化页面需要显示的数据

 // 提示框的数据显示
      macd: {
        macd: {
          name: "macd",
          value: 0,
          color: ""
        },
        dif: {
          name: "dif",
          value: 0,
          color: ""
        },
        dea: {
          name: "dea",
          value: 0,
          color: ""
        }
      },
      datas: {
        color: "",
        open: {
          name: "",
          value: 0
        },
        close: {
          name: "",
          value: 0
        },
        low: {
          name: "",
          value: 0
        },
        heigh: {
          name: "",
          value: 0
        }
      },
      ma: {
        ma5: {
          name: "MA5",
          value: 0,
          color: ""
        },
        ma10: {
          name: "MA10",
          value: 0,
          color: ""
        },
        ma30: {
          name: "MA30",
          value: 0,
          color: ""
        },
        ma60: {
          name: "MA60",
          value: 0,
          color: ""
        }
      },
      vol: {
        name: "成交量",
        value: 0,
        color: ""
      }

2,在页面坐标系,通过定位,将对应数据,定位在坐标系的左上角

<div class="k-box pos-box">
      <p>
        {{$t("cecDeal.open")}}=
        <span :style="'color:'+datas.color">{{datas.open.value}}</span>
        &nbsp;
        {{$t("cecDeal.heigh")}}=
        <span
          :style="'color:'+datas.color"
        >{{datas.heigh.value}}</span>
        &nbsp;
        {{$t("cecDeal.low")}}=
        <span
          :style="'color:'+datas.color"
        >{{datas.low.value}}</span>
        &nbsp;
        {{$t("cecDeal.close")}}=
        <span
          :style="'color:'+datas.color"
        >{{datas.close.value}}</span>&nbsp;
      </p>
      <div class="ma-box pos-box">
        MA5
        <span :style="'color:'+ma.ma5.color">{{ma.ma5.value}}</span>
        <br>MA10
        <span :style="'color:'+ma.ma10.color">{{ma.ma10.value}}</span>
        <br>MA30
        <span :style="'color:'+ma.ma30.color">{{ma.ma30.value}}</span>
        <br>MA60
        <span :style="'color:'+ma.ma60.color">{{ma.ma60.value}}</span>
        <br>
      </div>
    </div>
    <div class="vol-box pos-box">
      <p>
        {{$t("cecDeal.vol")}}
        <span :style="'color:'+vol.color">{{$coin(vol.value)}}</span>
      </p>
    </div>
    <div class="macd-box pos-box">
      <p>
        MACD
        <span :style="'color:'+macd.macd.color">{{$coin(macd.macd.value)}}</span>&nbsp;
        DIF
        <span :style="'color:'+macd.dif.color">{{$coin(macd.dif.value)}}</span>&nbsp;
        DEA
        <span :style="'color:'+macd.dea.color">{{$coin(macd.dea.value)}}</span>&nbsp;
      </p>
    </div>
  </div>

3,tooltip.formatter回调函数中更改data初始值

formatter: 
    function(params) {
    _this.dealTool(params);
    }
    
 // 提示框处理事件
    dealTool(params) {
      let _this = this;
      params.forEach(el => {
        switch (el.seriesIndex) {
          case 0:
            _this.datas = {
              color: el.color,
              open: {
                name: "",
                value: el.value[1]
              },
              close: {
                name: "",
                value: el.value[2]
              },
              low: {
                name: "",
                value: el.value[3]
              },
              heigh: {
                name: "",
                value: el.value[4]
              }
            };
            break;
          case 1:
            _this.ma.ma5 = {
              name: "MA5",
              value: el.value,
              color: el.color
            };
            break;
          case 2:
            _this.ma.ma10 = {
              name: "MA10",
              value: el.value,
              color: el.color
            };
            break;
          case 3:
            _this.ma.ma30 = {
              name: "MA30",
              value: el.value,
              color: el.color
            };
            break;
          case 4:
            _this.ma.ma60 = {
              name: "MA60",
              value: el.value,
              color: el.color
            };
            break;
          case 5:
            _this.vol = {
              name: "成交量",
              value: el.value,
              color: el.color
            };
            break;
          case 6:
            _this.macd.macd = {
              name: "macd",
              value: el.value,
              color: el.color
            };
            break;
          case 7:
            _this.macd.dif = {
              name: "dif",
              value: el.value,
              color: el.color
            };
            break;
          case 8:
            _this.macd.dea = {
              name: "dea",
              value: el.value,
              color: el.color
            };
            break;
          default:
            break;
        }
      });
    }
              
            

完美解决问题
访问网址:mecoin交易所



 



 

文章评论

打赏

  • 如果你觉得本站很棒,可以通过扫码支付打赏哦!
  • 微信扫码:你说多少就多少~
  • 支付宝扫码:你说多少就多少~