echart 拖拽数据进echarts中显示

最新推荐文章于 2023-03-31 17:17:23 发布

原创

最新推荐文章于 2023-03-31 17:17:23 发布 · 788 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript #vue

该博客介绍如何在ECharts中实现通过拖拽外部数据来动态更新和创建图表的功能。用户可以双击数据项添加新图表，点击图表上的关闭按钮则删除对应图表。代码示例包括HTML、CSS和JavaScript，展示了数据绑定、事件监听以及图表的增删操作。

拖拽数据进echarts中显示

需求:

拖拽外部数据进echart图表中展示。
双击外部数据新增echart图表
点击关闭关闭对应图表

效果展示

拖拽数据进图表
在这里插入图片描述
删除对应图表

代码

html

<div id="app">
    <!-- 测试 -->
    <div class="drag-box">
      <ul>
        <li
          v-for="(item, index) in dragItemList"
          :key="index"
          class="drag-item"
          draggable="true"
          @dblclick="dblItem(item)"
          @dragstart="dragstart($event,item)"
        >{
   
   {
   
    item.name }}</li>
      </ul>
    </div>
    <div
      class="echart-box">
      <div
        v-for="(item, index) in echartContainer"
        :data-num="index"
        :key="index"
        class="echart-item"
        @drop="dropTarget($event)"
        @dragover="dragover($event)">
        <span> {
   
   {
   
    item.name }}</span>------------
        <span
          style="cursor: pointer"
          @click="deleteItem(item)"> {
   
   {
   
    item.echartIndex + '关闭' }}</span>
        <nercar-echarts
          :background-color="item.option.backgroundColor"
          :x-axis="item.option.xAxis"
          :y-axis="item.option.yAxis"
          :series="item.option.series"
          :grid="item.option.grid"
          :legend="item.option.legend"
        />
      </div>
    </div>
  </div>

css

<style lang="less" scoped>
.drag-box {
   
   
  margin: 100px auto;
  width: 800px;
  > ul {
   
   
    display: flex;
    > li {
   
   
      border: 1px solid pink