用js实现以下功能,用echarts绘制一个折线图,当鼠标点击住在折线图上移动时,一个dom会展示相应的横坐标,当鼠标松开时展示横坐标最后一位
时间: 2024-02-24 11:57:19 浏览: 53
微信小程序使用echarts获取数据并生成折线图
5星 · 资源好评率100%
好的,这是一个比较基础的交互功能,下面是实现的代码:
```javascript
// 初始化图表
var myChart = echarts.init(document.getElementById('chart'));
// 图表配置项
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
color: '#999999',
width: 1,
type: 'solid'
}
},
formatter: function(params) {
// 鼠标移动时展示的提示信息
return params[0].axisValue;
}
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'line',
smooth: true
}]
};
// 渲染图表
myChart.setOption(option);
// 监听鼠标事件
var isMouseDown = false; // 鼠标是否按下
var lastXAxisValue = ''; // 记录最后一个横坐标值
myChart.on('mousedown', function(params) {
isMouseDown = true;
lastXAxisValue = params.name;
updateDom(lastXAxisValue);
});
myChart.on('mousemove', function(params) {
if (isMouseDown) {
lastXAxisValue = params.name;
updateDom(lastXAxisValue);
}
});
myChart.on('mouseup', function(params) {
isMouseDown = false;
updateDom(lastXAxisValue);
});
// 更新展示横坐标的 DOM
function updateDom(value) {
var dom = document.getElementById('xAxisValue');
dom.innerText = value;
}
```
首先,我们使用 `echarts.init` 方法初始化一个图表,并设置了一个基本的折线图配置项。其中,`tooltip` 用于展示鼠标移动时的提示信息,`xAxis` 和 `yAxis` 分别设置了横坐标和纵坐标的类型和数据,`series` 设置了折线图的数据和类型。
然后,我们监听了三个鼠标事件:`mousedown`、`mousemove` 和 `mouseup`。在 `mousedown` 事件中,记录了鼠标按下时的横坐标值,并调用 `updateDom` 方法更新展示横坐标的 DOM;在 `mousemove` 事件中,如果鼠标已经按下,则更新最后一个横坐标值,并调用 `updateDom` 方法更新 DOM;在 `mouseup` 事件中,记录鼠标已经松开,并调用 `updateDom` 方法更新最后一个横坐标值。
最后,我们实现了一个 `updateDom` 方法用于更新展示横坐标的 DOM。
阅读全文