option = { title: { text: 'echarts折線圖實線加虛線' }, //用formatter回調函數顯示多項數據內容 tooltip: { trigger: 'axis', formatter: function (params, ticket, callback) { var htmlStr = ''; var valMap = {}; 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(value == '-'){ continue; } //過濾重疊值 if(valMap[seriesName] == value){ continue; } if(i===0){ htmlStr += xName + '<br/>';//x軸的名稱 } htmlStr +='<div>'; //爲了保證和原來的效果同樣,這裏本身實現了一個點的效果 htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>'; //圓點後面顯示的文本 htmlStr += seriesName + ':' + value; htmlStr += '</div>'; valMap[seriesName] = value; } return htmlStr; } }, legend: { data:['在線數'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', boundaryGap: false, data: ['週一','週二','週三','週四','週五','週六','週日'] }, yAxis: { type: 'value' }, series: [ { name:'在線數', type:'line', smooth:true, data:[120, 132, 191] }, { name:'在線數', type:'line', smooth:true, //關鍵點,爲true是不支持虛線,實線就用true itemStyle:{ normal:{ lineStyle:{ width:2, type:'dotted' //'dotted'虛線 'solid'實線 } } }, data:["-", "-", 191, 234, 180] }, { name:'在線數', type:'line', smooth:true, data:["-", "-", "-", "-", 180, 132, 191] }, ] };