echart 拖拽数据进echarts中显示

拖拽数据进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;
      margin-left: 100px;
    }
  }
}
.echart-box {
  width: 900px;
  //height: 600px;
  margin: 0 auto;
  border: 1px solid red;
}
.echart-item {
  height: 260px;
  text-align: center;
  margin-bottom: 30px;
}
</style>

js

import nercarEcharts from '@/components/NercarEcharts'
export default {
  name: 'App',
  components: {
    nercarEcharts
  },
  data() {
    return {
      dragItemList: [
        {
          name: '速度',
          data: [30, 28, 56, 34, 62, 50, 48, 26, 35, 54, 56, 42, 31, 30]
        },
        {
          name: '温度',
          data: [20, 38, 46, 54, 12, 30, 44, 66, 34, 52, 26, 46, 38, 39]
        }
      ],
      echartContainer: [
        {
          echartIndex: 0,
          name: '图一',
          option: {
            xAxis: {
              name: '辊缝mm',
              type: 'category',
              data: [
                '-5',
                '-4',
                '-3',
                '-2',
                '-1',
                '0',
                '1',
                '2',
                '3',
                '4',
                '5'
              ],
              splitLine: {
                show: false
              }
            },
            yAxis: [
              {
                name: '轧制力ton',
                type: 'value',
                interval: 10
              }
            ],
            series: [
              {
                name: 'DS侧刚度',
                data: [50, 48, 36, 14, 12, 10, 48, 16, 55, 64, 36, 32, 21, 10],
                type: 'line'
              },
              {
                name: 'OS侧刚度',
                data: [45, 38, 26, 14, 12, 10, 48, 16, 55, 64, 36, 32, 21, 8],
                type: 'line'
              }
            ],
            grid: {
              left: '3%',
              right: '4%',
              bottom: '1%',
              top: '20%',
              containLabel: true
            },
            legend: {}
          }
        }
      ],
      pushData: null,
      echartIndex: 0
    }
  },
  mounted() {},
  methods: {
    dragstart(e, item) {
      this.pushData = item
      console.log('dragstart')
    },
    dropTarget(e) {
      e.preventDefault()
      let targetNum = e.target.parentElement.parentElement.parentElement.getAttribute(
        'data-num'
      )
      //拖动到了哪一个echart图表
      let series = this.echartContainer[targetNum].option.series
      let names = []
      // 重复拖动项目 return
      names = series.filter((item, index, arr) => {
        return item.name.includes(this.pushData.name)
      })
      if (names.length != 0) {
        console.log('已存在')
        return
      }
      series.push({
        name: this.pushData.name,
        data: this.pushData.data,
        type: 'line'
      })
      console.log('dropTarget', e)
    },
    dragover(e) {
      e.preventDefault()
      console.log('dragover')
    },
    dblItem(item) {
      //判断是否已经
      //通过item 配置tempLate对应参数
      this.echartIndex++
      let echartTemplate = {
        echartIndex: this.echartIndex,
        name: item.name,
        option: {
          xAxis: {
            name: '辊缝mm',
            type: 'category',
            data: ['-5', '-4', '-3', '-2', '-1', '0', '1', '2', '3', '4', '5'],
            splitLine: {
              show: false
            }
          },
          yAxis: [
            {
              name: '轧制力ton',
              type: 'value',
              interval: 10
            }
          ],
          series: [
            {
              name: 'DS侧刚度',
              data: item.data,
              type: 'line'
            }
          ],
          grid: {
            left: '3%',
            right: '4%',
            bottom: '1%',
            top: '20%',
            containLabel: true
          },
          legend: {}
        }
      }
      this.echartContainer.push(echartTemplate)
      console.log(this.echartContainer)
    },
    deleteItem(item) {
      this.echartContainer.forEach((eItem, index) => {
        if (eItem.echartIndex == item.echartIndex) {
          this.$confirm('确认关闭？')
            .then(_ => {
              console.log(_)
              this.echartContainer.splice(index, 1)
            })
            .catch(_ => {})
        }
      })
      console.log(this.echartContainer)
    }
  }
}