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