echarts自定義tooltip顯示

使用echarts展示圖形的時候，鼠標滑倒圖像上，想展示除了系列名，數據名，數據值以外的數據，這時需要使用tooltip的fommater方式進行配置，另外對數據格式也有一定的要求。

如圖所示：如果想在彈出的toolbox降水量的數字后面加上具體的日期。則進行如下的操作：

1.更改數據格式：

 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'}]
        }
    ]

　把data改為由value和date組成的json串，這樣不會影響圖形的展示。

2.編寫tooltip的formmatter函數，返回自定義數據。

 tooltip : {
        trigger: 'axis',
        formatter(params){
            for(x in params){
                return params[x].name +":"+params[x].data.value+"/"+params[x].data.date;
            }
            
        }
    },

　　可以看到，能從formatter的params中把需要展示的date數據從data屬性中取出並展示，效果如圖：

3.完整源碼。

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'}]
        }
    ]
};