官方一般都是：

而我們通常是需要顯示額外內容的，比如這樣

其中Tooltip也是參考了網友的寫法

option = {tooltip: {trigger: 'axis',formatter: function (params, ticket, callback) {var htmlStr = '';for(var i=0;i<params.length;i++){var param = params[i];var xName = param.name;//x軸的名稱var seriesName = param.seriesName;//圖例名稱var value = param.value;//y軸值var color = param.color;//圖例顏色if(i===0){htmlStr += xName + '<br/>';//x軸的名稱 }htmlStr +='<div>';// 具體顯示的數據【字段名稱：seriesName，值：value】// 這里判斷一下name，如果是我們需要特殊處理的，就處理if(seriesName === '額外信息'){// 前面一條線，后面一條線【具體樣式自己寫】htmlStr += '<div style="border: 1px solid #FFEB3B"></div>';htmlStr += 'XXXXX：' + value;htmlStr += '<div style="border: 1px solid #FFEB3B"></div>';}else{// 正常顯示的數據，走默認htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>';htmlStr += seriesName + '：' + value + 'W';}htmlStr += '</div>';}return htmlStr;}},xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{name: '收入',data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line'},{name: '額外信息',data: ['今天賺大了', '今天賺大了', '今天賺大了', '今天賺大了', '今天賺大了', '今天賺大了', '今天賺大了'],type: 'line'}] };

測試地址，就用官方的就可以

https://www.echartsjs.com/examples/editor.html?c=line-simple

?

轉載于:https://www.cnblogs.com/LUA123/p/10975355.html

總結

以上是生活随笔為你收集整理的Echarts的提示（Tooltip）显示额外内容的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。