18910140161

当Echarts鼠标悬停时 外部分区之外的工具提示显示不完整

顺晟科技

2021-07-07 09:39:01

61

可以自行设置鼠标悬浮时工具提示信息的显示位置。原理是上下位置不变,上下位置按百分比写死。可以根据鼠标当前位置判断左右,鼠标指针在左边还是右边,然后可以返回不同的结果。

先看效果:

主代码:

position:函数(点、参数、dom、矩形、大小){ 0

//size是当前窗口的大小

if((size . viewsize[0]/2)=point[0])

//其中点是当前鼠标位置

返回[点[0] 50,' 10% '];

}else{

//其中点是当前鼠标位置

返回[点[0]-200,' 10% '];

}

}

完整示例:

选项={ 0

title: {

文本:“折线图堆叠”

},

tooltip: {

触发器: '轴',

position:函数(点、参数、dom、矩形、大小){ 0

//size是当前窗口的大小

if((size . viewsize[0]/2)=point[0])

//其中点是当前鼠标位置

返回[点[0] 50,' 10% '];

}else{

//其中点是当前鼠标位置

返回[点[0]-200,' 10% '];

}

}

},

legend: {

Data: ['邮件营销','联盟广告','视频广告','直接访问','搜索引擎','邮件营销1 ','联盟广告1 ','视频广告1 ','直接访问1 ','搜索引擎1 ','邮件营销2 ','联盟广告2 ','

},

grid: {

left: '3% ',

右: '4% ',

底部: '3% ',

containLabel: true

},

工具箱: {

功能: {

保存图像: {}

}

},

xAxis: {

类型: '类别',

边界间隙:为假,

Data: ['星期一','星期二','星期三','星期四','星期五','星期六','星期日']

},

yAxis: {

键入:“value”

},

系列: [

{

名称: '邮件营销',

类型: '线',

Stack: '总计':

数据: [120,132,101,134,90,230,210]

},

{

名称: '联盟广告',

类型: '线',

Stack: '总计':

数据: [220,182,191,234,290,330,310]

},

{

名称: '视频广告',

类型: '线',

Stack: '总计':

数据: [150,232,201,154,190,330,410]

},

{

名称: '直接访问',

类型: '线',

Stack: '总计':

数据: [320,332,301,334,390,330,320]

},

{

名称: '搜索引擎',

类型: '线',

Stack: '总计':

数据: [820,932,901,934,1290,1330,1320]

},

{

名称: '邮件营销1 ',

类型: '线',

Stack: '总计':

数据: [120,132,101,134,90,230,210]

},

{

名称: '联盟广告1 ',

类型: '线',

Stack: '总计':

数据: [220,182,191,234,290,330,310]

},

{

名称: '视频广告1 ',

类型: '线',

Stack: '总计':

数据: [150,232,201,154,190,330,410]

},

{

名称: '直接访问1 ',

类型: '线',

Stack: '总计':

数据: [320,332,301,334,390,330,320]

},

{

名称: '搜索引擎1 ',

类型: '线',

Stack: '总计':

数据: [820,932,901,934,1290,1330,1320]

},

{

名称: '邮件营销2 ',

类型: '线',

stack: '总量,

数据: [120,132,101,134,90,230,210]

},

{

名称: '联盟广告2',

类型: '线,

stack: '总量,

数据: [220,182,191,234,290,330,310]

},

{

名称: '视频广告2',

类型: '线,

stack: '总量,

数据: [150,232,201,154,190,330,410]

},

{

名称: '直接访问2',

类型: '线,

stack: '总量,

数据: [320,332,301,334,390,330,320]

},

{

名称: '搜索引擎2',

类型: '线,

stack: '总量,

数据: [820,932,901,934,1290,1330,1320]

},

{

名称: '邮件营销3',

键入: '巴',

stack: '总量,

数据: [120,132,101,134,90,230,210]

},

{

名称: '联盟广告3',

键入: '巴',

stack: '总量,

数据: [220,182,191,234,290,330,310]

},

{

名称: '视频广告3',

键入: '巴',

stack: '总量,

数据: [150,232,201,154,190,330,410]

},

{

名称: '直接访问3',

键入: '巴',

stack: '总量,

数据: [320,332,301,334,390,330,320]

},

{

名称: '搜索引擎3',

键入: '巴',

stack: '总量,

数据: [820,932,901,934,1290,1330,1320]

}

]

};

展示图:

我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航