echarts,折线图两条趋势线里两个tooltip
时间: 2024-07-12 18:01:23 浏览: 92
ECharts是一个由阿里集团开发的开源数据可视化库,主要用于创建动态交互式图表。如果你想在折线图中添加两条趋势线,并为每条线分别显示工具提示(Tooltip),你可以按照以下步骤操作:
1. 创建折线图实例:
```javascript
var myChart = echarts.init(document.getElementById('main'));
```
2. 定义数据和两条趋势线配置:
```javascript
var option = {
xAxis: { // x轴配置
type: 'category',
data: ['时间点1', '时间点2', ...]
},
yAxis: { // y轴配置
name: '值'
},
series: [
{
name: '趋势线1',
type: 'line',
data: [数值1, 数值2, ...],
tooltip: { // 为第一条线设置工具提示
trigger: 'axis',
formatter: function (params) {
return '趋势线1: ' + params.value;
}
}
},
{
name: '趋势线2',
type: 'line',
data: [数值3, 数值4, ...],
tooltip: { // 为第二条线设置工具提示
trigger: 'axis',
formatter: function (params) {
return '趋势线2: ' + params.value;
}
}
}
]
};
```
3. 绘制图表:
```javascript
myChart.setOption(option);
```
在这个例子中,`formatter`属性定义了如何根据传入的数据参数自定义工具提示的内容。每个series都有自己的tooltip配置,因此可以分别显示对应趋势线的信息。
如果你还有其他问题,比如如何设置特定条件触发某个系列的tooltip,或者调整工具提示的样式,请告诉我,我会进一步解答。
阅读全文
相关推荐


















