echarts 折线图怎么指定专门的tooltip,渲染出每条线的名称及横纵轴数据
时间: 2024-03-02 10:48:26 浏览: 78
要指定专门的tooltip,需要在echarts的option中的series中设置tooltip属性,具体的设置如下:
```
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
},
formatter: function(params) {
var res = '';
res += params[0].name + '<br/>';
for (var i = 0, l = params.length; i < l; i++) {
res += params[i].seriesName + ' : ' + params[i].value + '<br/>';
}
return res;
}
},
```
其中,formatter属性可以自定义tooltip的内容,这里我设置了折线图的x轴数据(params[0].name)以及每条线的名称和对应的y轴数据(params[i].seriesName + ' : ' + params[i].value)。此外,还需要在series中设置name属性,来指定每条线的名称。完整的代码如下:
```
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
},
formatter: function(params) {
var res = '';
res += params[0].name + '<br/>';
for (var i = 0, l = params.length; i < l; i++) {
res += params[i].seriesName + ' : ' + params[i].value + '<br/>';
}
return res;
}
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
name: '邮件营销',
data: [120, 132, 101, 134, 90, 230, 210],
type: 'line'
}, {
name: '联盟广告',
data: [220, 182, 191, 234, 290, 330, 310],
type: 'line'
}, {
name: '视频广告',
data: [150, 232, 201, 154, 190, 330, 410],
type: 'line'
}, {
name: '直接访问',
data: [320, 332, 301, 334, 390, 330, 320],
type: 'line'
}, {
name: '搜索引擎',
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
```
这样,就可以渲染出每条线的名称及横纵轴数据的tooltip了。
阅读全文