ECharts中能否跨折线图拖拽legend或series完成绘制？

该需求完全可落地，不需要修改ECharts底层源码，核心是基于HTML5原生拖放API+ECharts实例方法组合实现，整套逻辑分3个核心环节：

• 绑定源图表拖拽起始逻辑
  通过ECharts实例的getZr()方法获取ZRender画布实例，监听鼠标按下事件，判断当前点击对象是legend图例项还是折线系列图形，拿到对应系列的完整配置（名称、数据集、折线样式、坐标轴映射规则等），通过原生拖放的dataTransfer对象携带配置数据。核心参考代码：

  // 源图表实例初始化后绑定拖拽逻辑
  const sourceChart = echarts.init(sourceDom)
  sourceChart.getZr().on('mousedown', (params) => {
    // 自定义方法：根据点击命中的图形元素，匹配对应要拖拽的series完整配置
    const dragSeries = matchHitSeries(params, sourceChart)
    if (!dragSeries) return
    // 给原生事件绑定拖拽数据
    const originEvent = params.event.event
    originEvent.dataTransfer.setData('echarts/series', JSON.stringify(dragSeries))
    originEvent.dataTransfer.effectAllowed = 'copy'
  })
  

  这里注意要给可拖拽的元素设置draggable="true"属性，legend项可以通过ECharts的legend.formatter配置自定义渲染时加上该属性，折线图形元素可以在ZRender渲染完成后遍历元素批量设置。
• 配置目标图表放置权限
  给目标图表的容器DOM绑定dragover事件，阻止默认事件行为，否则浏览器会默认拦截元素放置动作：

  targetDom.addEventListener('dragover', (e) => {
    e.preventDefault()
    e.dataTransfer.dropEffect = 'copy'
  })
  

• 处理放置后的图表重绘
  监听目标容器的drop事件，解析拖拽携带的series配置，先做重复校验（避免同一系列重复拖入），再调用目标实例的setOption方法注入新系列配置，ECharts会自动完成增量渲染：

  targetDom.addEventListener('drop', (e) => {
    e.preventDefault()
    const importSeries = JSON.parse(e.dataTransfer.getData('echarts/series'))
    const targetChart = echarts.getInstanceByDom(targetDom)
    const existOption = targetChart.getOption()
    // 重名系列直接拦截，避免重复渲染
    if (existOption.series.some(item => item.name === importSeries.name)) return
    // 增量更新配置
    targetChart.setOption({
      series: [...existOption.series, importSeries]
    })
  })
  

落地注意事项：

1. 如果拖拽的系列依赖全局配置（比如全局color调色盘、dataset数据集、坐标轴配置），拖入时需要同步把依赖配置注入目标图表，否则会出现样式错乱、数据不显示的问题
2. 如果要保留legend点击切换显隐的默认交互，需要给拖拽逻辑加触发阈值，比如鼠标移动超过3px再触发拖拽，避免和点击事件冲突
3. 可以在拖拽过程中添加跟随鼠标的半透明预览浮层，提示当前拖拽的系列内容，交互体验更流畅

内容的提问来源于stack exchange，提问作者Kundan Jha