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>
{{$t("cecDeal.heigh")}}=
<span
:style="'color:'+datas.color"
>{{datas.heigh.value}}</span>
{{$t("cecDeal.low")}}=
<span
:style="'color:'+datas.color"
>{{datas.low.value}}</span>
{{$t("cecDeal.close")}}=
<span
:style="'color:'+datas.color"
>{{datas.close.value}}</span>
</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>
DIF：
<span :style="'color:'+macd.dif.color">{{$coin(macd.dif.value)}}</span>
DEA：
<span :style="'color:'+macd.dea.color">{{$coin(macd.dea.value)}}</span>
</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;
}
});
}
完美解决问题
