当前位置：文江博客话题详情

Echart中折线图怎样获得鼠标所在横坐标的位置啊？

发布于 2022-03-10 03:27:20 字数 107 浏览 801 评论 5

放图吧...

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

左岸枫 2022-03-11 06:30:45

楼主的横坐标是项目：衬衫、羊毛衫、...袜子，鼠标的位置，已经显示在提示框里。只有使绘制成的X坐标表示数值，而不是具体的各个项目，才需要显示其数值。

若要在 echarts 绘制的 X-Y 坐标系统中，如函数绘图 Function Plot, 在提示框中显示鼠标的位置，只要在 option 的对象中，添加

option = {
    animation: false,
    tooltip: {  //添加
        trigger: 'axis'
    },
    grid: {
        top: 40,
        left: 50,
        right: 40,
        bottom: 50
    },
...
}

即可。

回复收藏 0

泪冰清 2022-03-11 06:30:35

楼主的横坐标是项目：衬衫、羊毛衫、...袜子，鼠标的位置，已经显示在提示框里。
楼主是否是要知道当前鼠标的、以像素为单位的、相对于当前以Echarts绘出的坐标的像素横坐标度数？
要知道，Echarts绘出的坐标，其 X 轴的单位刻度的像素数，视当前画布 main 的宽度而定。
以下代码案例而言，id="main" 的 div 元素的宽，设置为 900px。
添加 js 代码，在这个div元素下面，设置一个文本框输出元素(<form id="show" >), 用来显示，相对于网页面坐标的、鼠标所在位置的坐标值。
笔者观察，此刻横坐标刻度单位宽度约为 100 px( +/- 15px)。
若要相对于当前 Echarts 折线图坐标系的读数，那就要根据 main 的宽度、以及相对于当前网页的坐标(左上角为原点，纵坐标向下)，计算出当前鼠标的横坐标。

<html> 
<head>
    <meta charset="utf-8">
    <title>ECharts 折线</title>
<style>
#main{
	width:900px;
	height:500px;	
}
</style>
</head>
<body>

<div id="main" ></div>
<form id="show" name="Show"><table><tr><td>当前鼠标坐标 </td></tr>
<tr><td>X: <input type="text" name="X" value="0" size="4"> </td></tr>
<tr><td>Y: <input type="text" name="Y" value="0" size="4"> </td></tr>
</table>
</form>

<script src="https://cdn.bootcss.com/echarts/3.2.2/echarts.js"></script>
<script type="text/javascript">

document.onmousemove = getMouseXY;
function getMouseXY(e) {
	tempX = event.clientX  
    tempY = event.clientY
	document.Show.X.value = tempX
  	document.Show.Y.value = tempY
}

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
	tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
    }]
};

option && myChart.setOption(option);

    </script>
</body>
</html>

回复收藏 0