折线图设置mousedown鼠标按到某个点时,触发事件:move移动的时候setOption修改y轴的值,up松开时删除move事件。就可以实现折线图拖拽的效果
<div id="main" style="height: 100%;"></div>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script type="text/javascript">
// 初始化ECharts实例
var chart = echarts.init(document.getElementById('main'));
// 配置项
var option = {
title: {text: '标题'},
color: ['blue', 'green', 'red'],
legend: {show: true, top: 25},
tooltip: {trigger: 'axis'},
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {type: 'value'},
series: [
{
name: 'a线-可拖拽',
type: 'line',
data: [820, 932, 901, 934, 1290, 1330, 1320],
},
{
name: 'b线-可拖拽',
type: 'line',
data: [620, 732, 800, 834, 1100, 1030, 1120],
},
{
name: 'c线-不可拖拽',
type: 'line',
data: [300, 200, 300, 500, 800, 900, 1000],
}
]
};
chart.setOption(option);
// 只允许拖拽a线和b线
let dragSeriesName = ['a线-可拖拽','b线-可拖拽'];
// 鼠标down按下时设置拖拽事件
chart.on('mousedown', function (params) {
if (params.componentType === 'series' && (dragSeriesName.includes(params.seriesName))) {
var seriesIndex = params.seriesIndex;
var pointIndex = params.dataIndex;
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
//鼠标move移动时修改折线图y轴
function onMouseMove(event) {
var pointInPixel = [event.offsetX, event.offsetY];
//把offsetXY像素坐标转换为grid坐标,[0是x轴下标,1是y轴的值]
var pointInGrid = chart.convertFromPixel('grid', pointInPixel);
var data = option.series[seriesIndex].data;
//y轴保留整数
data[pointIndex] = parseInt(pointInGrid[1])
option.title.text = params.seriesName + ',' + params.name + ',' + '新值:' + data[pointIndex]
chart.setOption(option);
}
//鼠标up放开时删除鼠标move移动事件
function onMouseUp() {
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
}
}
});
</script>