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

  1. 云栖社区>
  2. 前端那些事儿>
  3. 博客>
  4. 正文

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

景凌凯 2019-06-18 23:47:06 浏览3574
展开阅读全文

tooltip

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

原生提示框样式

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

_
image

但是现在各大交易所平台的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;
        }
      });
    }
              
            

完美解决问题

_

网友评论

登录后评论
0/500
评论
景凌凯
+ 关注
所属团队号: 前端那些事儿