在vue中拖放元素，更新ECharts图表数据

最新推荐文章于 2025-04-13 00:51:21 发布

米西伏西米

最新推荐文章于 2025-04-13 00:51:21 发布

阅读量1.6k

点赞数

文章标签： echarts vue 拖放

本文链接：https://blog.youkuaiyun.com/qq_38170252/article/details/82841232

版权

本文记录了在Vue项目中，利用ECharts和JavaScript实现拖放组件到图表上，动态更新图表数据的过程。通过vue-cli搭建的项目，结合ECharts和本地JSON数据，当用户拖动组件到图表时，图表会显示对应组件的数据。在实现过程中，需要注意数据转换的问题，如使用JSON.stringify()和JSON.parse()来确保数据正确传递和解析。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

领导的想法需求：在页面中拖动组件到图表中，表图中的数据根据拖放的组件显示相应的图表，Demo已完成，在此做个踩坑记录。

目前的项目使用的是vue-cil，所以此Demo采用的是vue-cli+ECharts+JS完成。框架和依赖的安装在此就不做记录了。

HTML代码：

<div class="classity" id="tag">
    <div class="tagcell hidden" v-for="item in dataValue" v-if="item.code=='no1'"
         :data-chartvalue="JSON.stringify(item.chartList)"
         draggable='true' @dragend="allowDrop($event)">
      {
  {item.tagName}}
    </div>
    <div class="tagcell" v-for="item in dataValue" v-if="item.code!='no1'"
         :data-chartvalue="JSON.stringify(item.chartList)"
         draggable='true' @dragend="allowDrop($event)">
      {
  {item.tagName}}
    </div>
  </div>
<div class="myChart">
<div id="myChart" :style="{width: '1000px', height: '750px'}"></div>
</div>

页面布局很简单，左侧一个tag栏右侧是表图。左侧tag栏中的tag设置为动态加载的，默认显示第一个选项的数据，显示后的tag为灰色，其他为蓝色。表图就很简单，设置好容器的宽高ID即可。

CSS

.container{
    position: relative;
    margin-top: 20px;
  }
  .myChart{
    display: inline-block;
    float: left;
    margin-left: 40px;

  }

  .classity{
    width: 300px;
    height: 500px;
    border: 1px solid #eee;
    padding: 20px;
    top: 0;
    left: 0;
    display: inline-block;
    float: left;
  }
  .tagcell{
    display: inline-block;
    padding: 10px 20px;
    margin: 5px;
    height: 42px;
    box-sizing: border-box;
    color: #fff;
    background-color: deepskyblue;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    float: left;
  }
.hidden{
  background-color: #999;
}
  .prop{
    display: inline-block;
    position: absolute;
    z-index: 999;
    background-color: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

最低0.47元/天解锁文章