vue拖拽生成echarts图表

好的，您可以先在Vue项目中使用Draggable插件实现拖拽功能，然后使用ECharts库生成图表并将其渲染到拖拽容器中。具体步骤可以参考以下代码：

1. 安装Drabbable插件：

npm install vuedraggable --save

2. 在Vue组件中引入Drabbable并定义拖拽容器：

<template>
  <div>
    <draggable v-model="charts" :options="dragOptions">
      <div v-for="(chart, index) in charts" :key="index" class="chart">
        <!-- 在这里渲染 Echarts 图表 -->
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data() {
    return {
      charts: [], // 存储图表数据
      dragOptions: { // 设置拖拽选项
        group: 'charts',
        animation: 150
      }
    }
  }
}
</script>

3. 使用Echarts库生成图表：

<template>
  <div>
    <draggable v-model="charts" :options="dragOptions">
      <div v-for="(chart, index) in charts" :key="index" class="chart">
        <!-- 在这里渲染 Echarts 图表 -->
        <div ref="chart" class="echarts"></div>
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import echarts from 'echarts'

export default {
  components: {
    draggable
  },
  data() {
    return {
      charts: [], // 存储图表数据
      dragOptions: { // 设置拖拽选项
        group: 'charts',
        animation: 150
      }
    }
  },
  mounted() {
    this.initEcharts() // 初始化 Echarts 库
  },
  methods: {
    initEcharts() {
      // 在这里使用 Echarts 库生成图表
      this.charts = [
        {
          name: 'chart_1',
          option: {
            // Echarts 配置项
          }
        },
        {
          name: 'chart_2',
          option: {
            // Echarts 配置项
          }
        }
      ]
      // 渲染图表
      this.charts.forEach((chart) => {
        let elem = this.$refs.chart[chart.name]
        let myChart = echarts.init(elem)
        myChart.setOption(chart.option)
      })
    }
  }
}
</script>

以上代码仅作为参考，具体实现方式可以根据项目需求进行调整。希望对您有所帮助。