一、tooltip可能出现的位置
1、全局的tooltip
2、系列中的tooltip
3、系列中每个数据项中的tooltip
// 一般我们都只用设置全局的
// 如果某个系列或者某个数据项要有不同的展示,可以使用formatter的函数形式,根据里面的信息做判断展示
二、子配置项
1、confine(boolean) 是否将浮窗限制在图表的区域内
2、trigger (string) 浮窗的触发类型
值为item:数据项触发,一般用于散点图、饼图
值为axis:坐标轴触发,一般用于折线图、柱状图
3、触发方式triggerOn 触发方式(值为mouseover | click)
4、formatter (string、Function) 如下是Function形式的渲染
当trigger值为item时,params是个对象
当trigger值为axis时,params是个数组对象
对象包含如下有用信息
{
seriesType: 'bar', // 系列类型
seriesIndex: 1, // 第几个系列
seriesName: 'xx', // 系列名称
name: 'xx', // 数据项名称、类目名
data: [], // 系列中的原data值
}
formatter: function (params) {
return string | HTMLstring
}
5、position 浮窗的位置
string类型---
position: 'top' (bottom | right | left)
Array类型---
position: [10, 20] // 距离左边10px,距离上边20px
position: ['50%', '20%'] // 距离左边50%,距离上边20%
position: [30, '10%'] // 距离左边30px,距离上边10%
Function类型---
position: function(point, params, ...) { // point为鼠标位置,params同formatter函数参数
return [point[0], 10] // 距离顶部10px,岁鼠标左右移动
}
三、浮窗中展示更多信息
// 系列中我们可以放自定义的key:value,然后就可以在formatter函数中的参数中获取到这些数据
series:[
{
name:'',
data:[],
xxx:myData