echarts设置折线图多条线value数值y轴可上下拖拽

折线图设置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>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值