可以在ECharts中的------》”tooltip“定义鼠标hover时的样式及添加单位;
例子:
var option = {
color:['#F28200','#4ECC73','#976CE5','#3DB4FF','#4ECCC2','#D5D8C6'],
title: {
// text: '未来一周气温变化',
// subtext: '纯属虚构'
},
tooltip: {
trigger: 'axis',
backgroundColor: '#0D1B42', //鼠标移动到图上面时,显示的背景颜色
padding:15, //定义内边距
formatter: function(params) { //自定义函数修改折线图给数据加单位
console.log(params)
var str = '';//声明一个变量用来存储数据
str += '<div>'+ params[0].name +'</div>'; //显示日期的函数
for(var i=0; i<params.length; i++) { //图显示的数据较多时需要循环数据,这样才可以成功的给多条数据添加单位
str += '<div style="color:'+params[i].color+'"><span>'+ params[i].seriesName +'</span> : <span>'+ (params[i].data ? params[i].data+'%' : '暂无') +'</span></div>';
}
return str;
}
},
legend: {
// show: true,
data:outName,
//right: 220,
//width: 220,
x : 'right',
padding: [20,100,0,0],
itemHeight: 13,
icon:'circle',
textStyle:{ //图例文字的样式
color:'#fff',
fontSize:12,
}
},
xAxis: axisArrTime,
yAxis: {
name : '单位 %',
color:['#fff'],
splitLine:{show: false},//去除网格线
type: 'value',
axisLabel: {
formatter: '%'
},
// data: ['0', '20', '40', '60', '80', '100'],
axisLabel: {
show: true,
textStyle: {
color: '#fff'
}
},
axisLine:{
lineStyle:{
color:'#717375',
width:2,//这里是为了突出显示加上的,可以去掉
}
}
},
series: data
}