echarts的markline如何拖动

最新推荐文章于 2024-06-05 14:58:56 发布

进击的HHH

最新推荐文章于 2024-06-05 14:58:56 发布

阅读量5.1k

点赞数 4

分类专栏： echarts

本文链接：https://blog.csdn.net/Pumpkinman/article/details/105008030

版权

背景

demo
最近领导有个需求，在echarts的折线图上加一个参考线，可调整。愣是百度了半天都没找到代码。心想，一定是这个需求太小众，或者就是个烂需求。但领导要求的任务，当然是要咬着牙完成啦。

开整

echarts官网

1.绘制静态markLine

这部分看官网的教程就可以了。echarts还是很方便的，基本上都是通过配置数据就能显示图表了。

2.绘制可拖动的markLine

首先先说下思路：

一开始打算用取巧的做法触屏tooltip的例子稍加修改实现后来发现方向错了，因为虽然在拖动手柄的时候，可通过回调参数实时获取当前手柄的数值，但是setOption是在之前的option里操作的，这样会无限产生递归，仔细想想，人家说的可是“触屏”！用这个方法还是有很多局限性，无解了。我们需要的是一个拖动参考线会有一个回调方法并且不在声明的option里，才能避免产生递归：

axisPointer: {
            snap: false,
            //阈值
            value: '4',
            handle: {
                show: true,
                size: 20,
                margin: 60,
                color: '#DC143C',
                throttle: 100
            },
            label: {
                show: true,
                formatter: function (params) {
                  	//此处的params对象里可以获取移动手柄时所处的位置
                    console.log(params)
                    var value = (Math.round(params.value * 1000) / 1000).toFixed(3);
                 		option = {
                      //更新option的操作
                      ......
                    }
                    myChart.setOption(option);
                    return value;
                },

            },
        },

仔细想想既然是参考线，那就用markLine，官网给的markline demo都是静态的。要想拖动markLine，可以理解为，先获取你鼠标拖动后的点，再用获取到的点重新设置markline的位置，这样就实现了markLine的移动。有了这个思路，第一步我们需要监听鼠标移动后的坐标。参考官网的拖拽例子，这里的关键点使用了graphic这个模块，结合convertFromPixel，convertToPixel方法，能够实现坐标轴与绝对位置的转换。上面拖动原点的例子实际上就是在原点上覆盖了一层graphic绘制的透明的原点，这个透明的原点能够在拖动的时候获取到实时坐标，剩下的就是把这个坐标通过setOption重新绘制了。有了graphic就能够移动点，同理，也能够移动参考线了，无非就是把graphic的圆，换成了矩形。有了可拖动的markLine后续判断哪些点要高亮就很好实现了。代码可见：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
    <style type="text/css">
        #main2 {
    
            border: 1px solid;
        }
    </style>
</head>

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->


    <div id="main2"

最低0.47元/天解锁文章

进击的HHH

关注

4
点赞
踩
13

收藏

觉得还不错? 一键收藏
7
评论
echarts的markline如何拖动

背景最近领导有个需求，在echarts的折线图上加一个参考线，可调整。愣是百度了半天都没找到代码。心想，一定是这个需求太小众，或者就是个烂需求。但领导要求的任务，当然是要咬着牙完成啦。开整echarts官网1.绘制静态markLine这部分看官网的教程就可以了。echarts还是很方便的，基本上都是通过配置数据就能显示图表了。2.绘制可拖动的markLine首先先说下思路：一开始...
复制链接

扫一扫

专栏目录