echarts提示框,样式重写
作者:互联网
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] } ] };
标签:name,重写,10%,data,htmlStr,line,提示框,type,echarts 来源: https://www.cnblogs.com/PHP0222wangdong/p/12740353.html