一、Echarts折线图简介
Echarts是一个由百度开源的基于JavaScript的数据可视化库，具有良好的兼容性和交互性。在数据处理、图表制作方面提供了便捷的API
二、折线图鼠标移动显示数据功能的介绍
折线图是常用于展示数据的一种图表，鼠标移动到折线上的数据点可以用于展示该数据点的数值，从而增加数据的可视化效果和易用性。
三、实现步骤
1. 创建基本折线图
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
title: {
text: '销售数据'
},
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'line'
}]
});
2. 添加鼠标移动事件
myChart.on('mousemove', function(params) {
var dataIndex = params.dataIndex;
var seriesIndex = params.seriesIndex;
// 显示数据
myChart.setOption({
tooltip: {
show: true,
trigger: 'axis',
position: params.event.event.pageY - 10,
formatter: function(params) {
return params[seriesIndex].name + '
' + params[seriesIndex].data;
},
},
series: [{
itemStyle: {
borderColor: 'transparent', //取消圆点边框
borderWidth: 1
},
lineStyle: {
color: 'gray'
},
markLine: {
silent: true,
data: [{
yAxis: params[0].data
}]
},
data: [{ // 渲染圆点
name: params.name,
value: params.value,
itemStyle: {
color: 'red', // 圆点颜色
},
label: {
show: true,
position: [params.event.offsetX + 10, params.event.offsetY - 30],
formatter: params.value
},
emphasis: {
itemStyle: {
borderWidth: 2,
borderColor: 'green',
color: 'red'
},
label: {
show: true,
formatter: params.value
}
}
}]
}]
});
});
3. 添加鼠标移出事件
myChart.on('mouseout', function(params) {
myChart.setOption({
tooltip: {
show: false
},
series: [{
data: []
}]
});
});
4. 完整代码示例
Echarts折线图鼠标移动到点显示数据 原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/159927.html
微信扫一扫 
支付宝扫一扫 