option = { title: { text: 'iphone銷量', subtext: '純屬虛構' }, 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>'; //為了保證和原來的效果一樣,這里自己實現了一個點的效果 htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>'; //圓點后面顯示的文本 htmlStr += seriesName + ':' + value + ' '+value+'%'; htmlStr += '</div>'; } return htmlStr; } }, grid : { left: '10%',//默認10% top:100,//越大越靠下,默認60 right : '5%',//默認10% bottom : 500//默認60 }, legend: { data:['iphone6','iphone7','iphone8'] }, xAxis: { type: 'category', boundaryGap: false, data: ['周一','周二','周三','周四','周五','周六','周日'] }, yAxis: { type: 'value' }, series: [{ name: 'iphone6', type: 'line', smooth: true, data: [10, 12, 21, 54, 260, 830, 710] }, { name: 'iphone7', type: 'line', smooth: true, data: [30, 182, 434, 791, 390, 30, 10] }, { name: 'iphone8', type: 'line', smooth: true, data: [1320, 1132, 601, 234, 120, 90, 20] } ] };