tooltip 中数据格式化
echarts中为了实现tooltip 定制化,我们需要自定义tooltip的一些属性,其中为了显示我们关心的数据,需要重写其中的formatter属性
formatter: function(param){
// console.log(param); 输出传入的参数的数据结构
return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
+ param[0].name+' 月份</div>'
+ param[0].seriesName+" : "+param[0].data+'</div>'+'<br>'
+ param[1].seriesName+" : "+param[1].data/20+'</div>'+'<br>'
;
},
坐标轴的隐藏
只要把yAxis或者xAxis中的属性show设置为false即可。
yAxis:[
{
show:false,
type : 'value'
}],
修改坐标轴的数据格式
以y轴为例,设置
yAxis : [
{
// show:false, 整个y轴不会显示
type : 'value',
axisLabel:{
formatter:function(value){
// console.log(value); y轴显示,不显示数据
}
}
}
],
隐藏背景网格
方法是对xAxis 和yAxis 设置splitLine属性
xAxis : [
{
splitLine:{show: false},
type : 'category',
data : xdata
}
],
隐藏坐标轴的刻度
axisTick: {
show: false
},
添加工具箱的支持
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},