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

领导的想法需求：在页面中拖动组件到图表中，表图中的数据根据拖放的组件显示相应的图表，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(