就是如图,比如我鼠标在黄线(代表视频广告)上,提示怎么只显示视频广告,而不是整条数据流上的数据呢?
配置项如下
option = {
title: {
//text: ''
},
tooltip: { //提示框内容
trigger: 'axis',
formatter: function(params) {
console.log(JSON.stringify(params));
var res = '' //'<div ><div style="display:inline;background: #eba538;width:16px;height16px;">22</div> <p style="display:inline;">'+params[0].seriesName+'</p></div>'
for (var i = 0; i < params.length; i++) {
res += '<p>' + params[i].seriesName + ':' + params[i].data + '</p>'
}
return res;
},
},
legend: {
show: false
//data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
/*toolbox: {
feature: {
saveAsImage: {}
}
},*/
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
splitLine: { //背景网格设置
show: true,
interval: 'auto',
lineStyle: {
color: ['#cccccc']
}
},
axisTick: {
show: false
},
axisLine: { //文字颜色
lineStyle: {
color: '#000000'
}
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14
}
}
},
yAxis: {
type: 'value',
splitLine: { //背景网格设置
lineStyle: {
color: ['#cccccc']
}
},
axisTick: {
show: false
},
axisLine: { //文字颜色
lineStyle: {
color: '#000000'
}
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14
}
}
},
series: [{
name: '邮件营销',
type: 'line',
stack: '总量',
symbol: "none", //ECharts 去掉折线上面的小圆点
/*itemStyle: { //设置折线上面的小圆点颜色
normal: {
color: function(params) {
// build a color map as your need.
var colorList = [
'#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
'#FE8463', '#9BCA63'
];
return colorList[params.dataIndex]
}
}
},*/
lineStyle: {
color: '#C1232B'
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'line',
stack: '总量',
symbol: "none",
lineStyle: {
color: '#B5C334'
},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'line',
stack: '总量',
symbol: "none",
lineStyle: {
color: '#FCCE10'
},
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '直接访问',
type: 'line',
stack: '总量',
symbol: "none",
lineStyle: {
color: '#E87C25'
},
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '搜索引擎',
type: 'line',
stack: '总量',
symbol: "none",
lineStyle: {
color: '#27727B'
},
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
}