详解:当鼠标放上echarts图形时,显示数据、名称,或者百分比

效果一:
详解:当鼠标放上echarts图形时,显示数据、名称,或者百分比_第1张图片
效果二:
详解:当鼠标放上echarts图形时,显示数据、名称,或者百分比_第2张图片
主要知识点:tooltip{}该配置项为:提示框组件相关设置
效果一实现代码

tooltip: {
     //提示框组件
					trigger: 'item', //item数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。
					axisPointer: {
     
						// 坐标轴指示器,坐标轴触发有效
						type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
					},
					formatter: '{a} 
{b} : {c}
百分比 : {d}%'
//{a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比) },

效果二实现代码:

tooltip: {
     
					trigger: 'axis', //坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用
					axisPointer: {
     // 坐标轴指示器,坐标轴触发有效
						type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
					}
},

写入代码的位置如下,tooltip与xAxis同级
详解:当鼠标放上echarts图形时,显示数据、名称,或者百分比_第3张图片
还有很多属性,具体的可以查看官网介绍: tooltip

有帮助到的小伙伴们麻烦点个赞,谢谢~

你可能感兴趣的:(echarts,vue,vue.js)