echarts画多条折线,修改tooltip显示x、y的值
时间: 2023-12-03 08:36:21 浏览: 58
要在 ECharts 中画多条折线,并修改 tooltip 显示 x 和 y 的值,你可以使用 series 属性中的数组来定义多条折线,并在 tooltip 的 formatter 函数中获取对应的值。下面是一个示例代码:
```javascript
option = {
// 其他配置项...
tooltip: {
formatter: function (params) {
var seriesName = params[0].seriesName; // 获取当前数据所属的系列名称
var xValue = params[0].value[0]; // 获取 x 值
var yValue = params[0].value[1]; // 获取 y 值
return seriesName + '<br/>x: ' + xValue + '<br/>y: ' + yValue;
}
},
series: [
{
name: '折线1',
type: 'line',
data: [
[1, 2],
[2, 4],
[3, 6],
// 更多数据点...
]
},
{
name: '折线2',
type: 'line',
data: [
[1, 5],
[2, 3],
[3, 8],
// 更多数据点...
]
},
// 更多折线系列...
]
// 其他配置项...
};
```
在上面的示例中,我们定义了两条折线,分别命名为 "折线1" 和 "折线2"。在 tooltip 的 formatter 函数中,通过 `params[0]` 获取当前数据点的信息,其中 `params[0].seriesName` 是当前数据所属的系列名称,`params[0].value[0]` 和 `params[0].value[1]` 分别是当前数据点的 x 和 y 值。
这样配置后,当鼠标悬停在图表上时,tooltip 将显示每条折线对应数据点的系列名称、x 值和 y 值。你可以根据实际情况进行进一步的定制化。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![js](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)