Use echarts presentation graphics when the mouse slip on the image, want to show data in addition to the series name, data name, data value, then the need to use the tooltip of fommater way configuration, in addition to data formats also have certain requirements.
As shown: If you want to follow the number of pop-up toolbox precipitation plus specific date. The following operations:
1. Change the data format:
series : [
{
name:'蒸发量',
type:'bar',
data:[{'date':'2019-01','value':'2.0'}, {'date':'2019-01','value':'4.9'}, {'date':'2019-01','value':'7.0'}, {'date':'2019-01','value':'23.2'}, {'date':'2019-01','value':'25.6'}, {'date':'2019-01','value':'76.7'}, {'date':'2019-01','value':'135.6'}, {'date':'2019-01','value':'162.2'}, {'date':'2019-01','value':'32.6'}, {'date':'2019-01','value':'20.0'}, {'date':'2019-01','value': '6.4'}, { 'DATE': '2019-01', 'value': '3.3'}]
name: "Precipitation",
{
},
type:'bar',
data:[{'date':'2019-01','value':'2.6'}, {'date':'2019-01','value':'5.9'}, {'date':'2019-01','value':'9.0'}, {'date':'2019-01','value':'26.4'}, {'date':'2019-01','value':'28.7'}, {'date':'2019-01','value':'70.7'}, {'date':'2019-01','value':'175.6'}, {'date':'2019-01','value':'182.2'}, {'date':'2019-01','value':'48.7'}, {'date':'2019-01','value':'18.8'}, {'date':'2019-01','value':'6.0'}, {'date':'2019-01','value':'2.3'}]
}
]
The data value to the string, and date json composition, this will not affect the graphic display.
2. Write tooltip of formmatter function that returns a custom data.
tooltip : {
trigger: 'axis',
formatter(params){
for(x in params){
return params[x].name +":"+params[x].data.value+"/"+params[x].data.date;
}
}
},
It can be seen from the formatter to be presented to the params date data extracted from the attribute data and display results in Figure:
3. Complete source code.
option = {
title : {
text: '某地区蒸发量和降水量',
subtext: '纯属虚构'
},
tooltip : {
trigger: 'axis',
formatter(params){
for(x in params){
return params[x].name +":"+params[x].data.value+"/"+params[x].data.date;
}
}
},
legend: {
data:['蒸发量','降水量']
},
xAxis : [
{
type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'蒸发量',
type:'bar',
data:[{'date':'2019-01','value':'2.0'}, {'date':'2019-01','value':'4.9'}, {'date':'2019-01','value':'7.0'}, {'date':'2019-01','value':'23.2'}, {'date':'2019-01','value':'25.6'}, {'date':'2019-01','value':'76.7'}, {'date':'2019-01','value':'135.6'}, {'date':'2019-01','value':'162.2'}, {'date':'2019-01','value':'32.6'}, {'date':'2019-01','value':'20.0'}, {'date':'2019-01','value':'6.4'}, {'date':'2019-01','value':'3.3'}]
},
{
name:'降水量',
type:'bar',
data:[{'date':'2019-01','value':'2.6'}, {'date':'2019-01','value':'5.9'}, {'date':'2019-01','value':'9.0'}, {'date':'2019-01','value':'26.4'}, {'date':'2019-01','value':'28.7'}, {'date':'2019-01','value':'70.7'}, {'date':'2019-01','value':'175.6'}, {'date':'2019-01','value':'182.2'}, {'date':'2019-01','value':'48.7'}, {'date':'2019-01','value':'18.8'}, {'date':'2019-01','value':'6.0'}, {'date':'2019-01','value':'2.3'}]
}
]
};