Vue + vuedraggable + echarts 拖拽做一个笔记

已于 2022-07-06 10:56:09 修改
阅读量1.5k 收藏 5
点赞数
文章标签： vue.js echarts 前端
于 2022-07-06 10:42:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42135701/article/details/125634718
版权

近期在做Echarts图表时，想到使用拖拽方式 来改变图表的排序，做一个简单的笔记记录

使用的Html 做的效果

 可以进行一个随意拖拽

 使用Flex布局来改变排序方式

 html, body, #app {
            height: 99%;
            width: 99%;
        } 
        .el-row {
            height: 100%;
            width: 100%;
        }

            .el-row > .el-col{
                height: 100%;
            } 
            .charts_div {
                height: 95%;
                width: 100%;
            }

        .charts_div1 {
            height: 5%;
            width: 100%;
        }

            .charts_div1:hover {
                cursor: move;
            }

        .el-col:hover {
            background-color: #fdfdfd;
        }

        .charts_div:hover {
            background-color: #fdfdfd;
        }
        .draggable_div {
            display: flex;
            flex-flow: row wrap;
        }
        .el-col {
            height: 49%;
        }
        .draggable_div, .transition_span {
            width: 100%;
            height: 100%;
        }
        /*定义拖拽样式*/
        .ghostClass {
            background-color: blue !important;
        }

        .chosenClass {
            background-color: red !important;
            opacity: 1 !important;
        }

        .dragClass {
            background-color: blueviolet !important;
            opacity: 1 !important;
            box-shadow: none !important;
            outline: none !important;
            background-image: none !important;
        } 

            .item:hover {
                background-color: #fdfdfd;
                cursor: move;
                
            }

            .item + .item {
                border-top: none; 
            }

Html代码

<div id="app">
        <template> 
            <el-row :gutter="24">
                <draggable v-model="elcols" class="draggable_div" group="site" animation="300" dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass" v-on:start="onStart" v-on:end="onEnd">
                    <el-col :span="12" class="item" v-for="item in elcols" :key="item.id">
                        <div class="charts_div1"></div>
                        <div :id="item.id" class="charts_div"></div>
                    </el-col>
                </draggable>
            </el-row>            
        </template>
    </div>

js片段 

Vue.component('vuedraggable', window.vuedraggable.name)
    new Vue({
        el: "#app",
        components: {
            vuedraggable,
        },
        data() {//数据源
            return {
                drag: false, 
                _echarts: null,
                elcols: [{ id: "chart1" }, { id: "chart2" }, { id: "chart3" }, { id: "chart4" }, { id: "chart5" }], 
            }
        },
        created() {//页面加载前 1
            this._echarts = echarts;//初始化报表
        },
        mounted() {//页面加载后 3
            this.QueryEcharts();//加载报表
        },
        computed: {//监听事件 2 

        },
        watch: {//全局监听属性改变时触发 4 

        },
        methods: {//事件集合
            QueryEcharts() {//加载报表
                this.Echart1();
                this.Echart2();
                this.Echart3();
                this.Echart4();
                this.Echart5();
            },
            Echart1() {//加载第一个报表 
                var option = {
                    xAxis: {
                        type: 'category',
                        data: ['Mon1', 'Tue1', 'Wed1', 'Thu1', 'Fri1', 'Sat1', 'Sun1']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: [120, 200, 150, 80, 70, 110, 130],
                            type: 'bar'
                        }
                    ]
                };
                this._echarts.init(document.getElementById('chart1')).setOption(option);
            },
            Echart2() {
                var option = {
                    xAxis: {
                        type: 'category',
                        data: ['Mon2', 'Tue2', 'Wed2', 'Thu2', 'Fri2', 'Sat2', 'Sun2']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: [120, 200, 150, 80, 70, 110, 130],
                            type: 'bar'
                        }
                    ]
                };
                this._echarts.init(document.getElementById('chart2')).setOption(option);
            },
            Echart3() {
                var option = {
                    xAxis: {
                        type: 'category',
                        data: ['Mon3', 'Tue3', 'Wed3', 'Thu3', 'Fri3', 'Sat3', 'Sun3']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: [120, 200, 150, 80, 70, 110, 130],
                            type: 'bar'
                        }
                    ]
                };
                this._echarts.init(document.getElementById('chart3')).setOption(option);
            },
            Echart4() {
                var option = {
                    xAxis: {
                        type: 'category',
                        data: ['Mon4', 'Tue4', 'Wed4', 'Thu4', 'Fri4', 'Sat4', 'Sun4']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: [120, 200, 150, 80, 70, 110, 130],
                            type: 'bar'
                        }
                    ]
                };
                this._echarts.init(document.getElementById('chart4')).setOption(option);
            },
            Echart5() {
                var option = {
                    xAxis: {
                        type: 'category',
                        data: ['Mon5', 'Tue5', 'Wed5', 'Thu5', 'Fri5', 'Sat5', 'Sun5']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: [120, 200, 150, 80, 70, 110, 130],
                            type: 'bar'
                        }
                    ]
                };
                this._echarts.init(document.getElementById('chart5')).setOption(option);
            },
            onStart(e) {
                this.drag = true; 
            },
            onEnd(e) {
                this.drag = false; 
            },
        }
    })

需要使用的js和css

element UI可以到官网

lar Vue UI frameworkElement - The world's most popular Vue UI frameworklar Vue UI framework

<link href="~/css/element.css" rel="stylesheet" />

<script src="~/js/element.js"></script>

Ecaherts 官网下载

Apache ECharts

<script src="~/js/echarts.js"></script>

Vue使用的是v2.6.14

<script src="~/js/vue.js"></script>

拖拽使用的是 vue.draggable 插件

vue.draggable两列或多列之间相互拖动 - itxst.com
<script src="~/js/Sortable.min.js"></script>
<script src="~/js/vuedraggable.umd.min.js"></script> 

下面在贴一个整体的代码


<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <!-- 引入样式 -->
    <link href="~/css/element.css" rel="stylesheet" />
    <title>报表统计</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
    <style>
        html, body, #app {
            height: 99%;
            width: 99%;
        } 
        .el-row {
            height: 100%;
            width: 100%;
        }

            .el-row > .el-col{
                height: 100%;
            } 
            .charts_div {
                height: 95%;
                width: 100%;
            }

        .charts_div1 {
            height: 5%;
            width: 100%;
        }

            .charts_div1:hover {
                cursor: move;
            }

        .el-col:hover {
            background-color: #fdfdfd;
        }

        /*.el-row .el-col:first-child {
            border-right: 1px solid #ffffff;
        }

        .el-row:first-child > .el-col {
            border-bottom: 1px solid #ffffff;
        }*/

        .charts_div:hover {
            background-color: #fdfdfd;
        }
        .draggable_div {
            display: flex;
            flex-flow: row wrap;
        }
        .el-col {
            height: 49%;
        }
        .draggable_div, .transition_span {
            width: 100%;
            height: 100%;
        }
        /*定义拖拽样式*/
        .ghostClass {
            background-color: blue !important;
        }

        .chosenClass {
            background-color: red !important;
            opacity: 1 !important;
        }

        .dragClass {
            background-color: blueviolet !important;
            opacity: 1 !important;
            box-shadow: none !important;
            outline: none !important;
            background-image: none !important;
        } 

            .item:hover {
                background-color: #fdfdfd;
                cursor: move;
                
            }

            .item + .item {
                border-top: none; 
            }
             
    </style>
</head>
<body>
    <div id="app">
        <template> 
            <el-row :gutter="24">
                <draggable v-model="elcols" class="draggable_div" group="site" animation="300" dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass" v-on:start="onStart" v-on:end="onEnd">
                    <el-col :span="12" class="item" v-for="item in elcols" :key="item.id">
                        <div class="charts_div1"></div>
                        <div :id="item.id" class="charts_div"></div>
                    </el-col>
                </draggable>
            </el-row>            
        </template>
    </div>
</body>
</html>
<script src="~/js/echarts.js"></script>
<!-- 引入组件库 -->
<script src="~/js/vue.js"></script>
<script src="~/js/Sortable.min.js"></script>
<script src="~/js/vuedraggable.umd.min.js"></script>
<script src="~/js/element.js"></script>
<script src="~/Content/jquery/jquery.min.js"></script>
<script>
    Vue.component('vuedraggable', window.vuedraggable.name)
    new Vue({
        el: "#app",
        components: {
            vuedraggable,
        },
        data() {//数据源
            return {
                drag: false, 
                _echarts: null,
                elcols: [{ id: "chart1" }, { id: "chart2" }, { id: "chart3" }, { id: "chart4" }, { id: "chart5" }], 
            }
        },
        created() {//页面加载前 1
            this._echarts = echarts;//初始化报表
        },
        mounted() {//页面加载后 3
            this.QueryEcharts();//加载报表
        },
        computed: {//监听事件 2 

        },
        watch: {//全局监听属性改变时触发 4 

        },
        methods: {//事件集合
            QueryEcharts() {//加载报表
                this.Echart1();
                this.Echart2();
                this.Echart3();
                this.Echart4();
                this.Echart5();
            },
            Echart1() {//加载第一个报表 
                var option = {
                    xAxis: {
                        type: 'category',
                        data: ['Mon1', 'Tue1', 'Wed1', 'Thu1', 'Fri1', 'Sat1', 'Sun1']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: [120, 200, 150, 80, 70, 110, 130],
                            type: 'bar'
                        }
                    ]
                };
                this._echarts.init(document.getElementById('chart1')).setOption(option);
            },
            Echart2() {
                var option = {
                    xAxis: {
                        type: 'category',
                        data: ['Mon2', 'Tue2', 'Wed2', 'Thu2', 'Fri2', 'Sat2', 'Sun2']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: [120, 200, 150, 80, 70, 110, 130],
                            type: 'bar'
                        }
                    ]
                };
                this._echarts.init(document.getElementById('chart2')).setOption(option);
            },
            Echart3() {
                var option = {
                    xAxis: {
                        type: 'category',
                        data: ['Mon3', 'Tue3', 'Wed3', 'Thu3', 'Fri3', 'Sat3', 'Sun3']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: [120, 200, 150, 80, 70, 110, 130],
                            type: 'bar'
                        }
                    ]
                };
                this._echarts.init(document.getElementById('chart3')).setOption(option);
            },
            Echart4() {
                var option = {
                    xAxis: {
                        type: 'category',
                        data: ['Mon4', 'Tue4', 'Wed4', 'Thu4', 'Fri4', 'Sat4', 'Sun4']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: [120, 200, 150, 80, 70, 110, 130],
                            type: 'bar'
                        }
                    ]
                };
                this._echarts.init(document.getElementById('chart4')).setOption(option);
            },
            Echart5() {
                var option = {
                    xAxis: {
                        type: 'category',
                        data: ['Mon5', 'Tue5', 'Wed5', 'Thu5', 'Fri5', 'Sat5', 'Sun5']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: [120, 200, 150, 80, 70, 110, 130],
                            type: 'bar'
                        }
                    ]
                };
                this._echarts.init(document.getElementById('chart5')).setOption(option);
            },
            onStart(e) {
                this.drag = true; 
            },
            onEnd(e) {
                this.drag = false; 
            },
        }
    })
</script>

只为了做一个简单的笔记  防止以后忘记 写的不好之处勿喷

谁把我名字占用了
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Vue：可拖拽平移柱状图制作
yyyyyyyyyyy_9的博客
08-06 121
本文记录了一个可以拖拽的柱状图vue组件代码，代码随拿随用。效果如下图所示，
vuedraggable实战：结合具体应用场景实现列表内拖拽排序、列表间移动、复制，介绍、安装、使用、坑点及解决方案
学海无涯，行者无疆
12-05 4万+
从实战角度介绍如何使用Draggable实现一个配置功能，用到的关键属性和方法，需要注意的事项，坑点以及解决方案。
图片上传+拖动排序（vue2+elementUI+vuedraggable）
12-24
vue2+elementUI+vuedraggable图片上传后可拖曳排序，可放大查看原图和删除图片。拖曳图片改变图片排序。
基于vue2vuedraggableechartsiview写的的一个可拖拽图表的demo
08-10
基于vue2 vuedraggable echarts iview 写的的一个可拖拽图表的demo
Vue.Draggable：强大的Vue拖放组件技术探索
最新发布
chenchuang0128的博客
05-23 871
Vue.Draggable是一个功能强大、易于使用的Vue拖放组件，它基于Sortable.js并提供了与Vue.js视图模型的无缝集成。在实际项目中，你可以根据需求使用Vue.Draggable来实现各种拖放功能，并结合Vue.js的其他功能来构建出更加丰富和交互性强的Web应用。Vue.Draggable基于Sortable.js，继承了其强大的拖放功能，并提供了与Vue.js视图模型的无缝集成。首先，确保你的项目中已经安装了Vue.js和Vue.Draggable。
echarts实现图表标签(label)可拖拽，以及保存拖拽后的位置
weixin_43290229的博客
08-25 2745
需求背景：当echarts图表中像素点非常多，或者有像素点重合的时候，标签就会被覆盖或者重叠。为了解决这个问题，让用户体验更加友好，于是就实现了对label进行拖拽。用户可以把label拖拽到任何他想要的位置，并且能够将位置保存下来，下次还能进行编辑回显。
快速生成echarts基础配置 ——（包含拖拽）
very nice
09-27 1435
提示：关于echarts问题最近项目中，遇到一些echarts图表的问题，简单的柱状图、折线图不在多说，直接进入官网粘贴代码就直接ok今天总结一下近期echarts中，拖拽图表，近期写项目迫不得已看了看echarts的配置文档，也就自己封装了下方法，可以快速的生成一个图表（当然，只是一个简单的配置），如果你有能力，可以在我的基础上进行改造提示：快速生成echarts配置项以下代码中的 dataZoom 是echarts中拖拽的配置，不需要可以直接delete。
Vue——vuedraggable拖拽组件使用文档总结
热门推荐
月来better
04-01 12万+
Draggable为基于Sortable.js的vue组件，用以实现拖拽功能。 关于Vue.Draggable详细信息可以查看Github地址 特性 支持触摸设备 支持拖拽和选择文本 支持智能滚动 支持不同列表之间的拖拽 不以jQuery为基础 和视图模型同步刷新 和vue2的国度动画兼容 支持撤销操作 当需要完全控制时，可以抛出所有变化 可以和现有的UI组件兼容 安装 npm install vuedraggable 引入 import draggable from 'vuedraggable'
vue.draggable一款基于vue的拖拽插件
weixin_42941628的博客
06-15 6309
【代码】vue.draggable一款基于vue的拖拽插件。
vuedraggable示例_vuedraggable的使用
weixin_36163101的博客
01-30 7889
简单的拖动使用{{i.name}}import draggable from "vuedraggable"export default {components: {draggable},data () {return {list: [{ id: 1, name: 'aaa' },{ id: 2, name: 'bbb' },{ id: 3, name: 'ccc' }]}},methods: {s...
Vue项目拖拽插件 ---- vuedraggable的安装与使用
weixin_45689946的博客
12-14 8454
vuedraggable是基于Sortable.js的vue组件，vuedraggable官方文档 特点： 支持触摸设备（如vue项目的移动端开发Quasar） 支持拖拽和选择文本 支持不同列表之间的拖拽 视图模型的同步刷新 与vue2的过渡动画（transition-group）兼容 有很多监听函数，当需要完全控制时，可以抛出所有变化 可以和现有的UI组件相兼容 一、安装 npm install vuedraggable 二、引入与使用 <draggable v-model="specim
基于vue-draggable 实现三级拖动排序效果
10-15
主要介绍了基于vue-draggable 实现三级拖动排序效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
大屏可视化vue+dataV+echarts
06-03
大屏可视化vue+dataV+echarts
vue3+ts+echarts实现echarts封装
08-01
接下来，创建一个名为`ECharts.vue`的组件文件，用于封装ECharts。在这个文件中，我们将利用Composition API和TypeScript的特性： ```typescript // ECharts.vue import { defineComponent, PropType, ref } from '...
vue+echarts数据显示通用模板
05-31
【Vue+ECharts数据显示通用模板】是一个用于快速搭建数据可视化项目的框架，它集成了柱状图、饼图、地图和表格等多种数据展示方式，旨在帮助开发者实现数据展示功能时能够快速上手，节省开发时间。这个模板充分利用...
monitor:vue + echarts 可视化拖拽图表项目
04-12
可拖拽大屏演示系统，目的是为了能够方便大屏系统的快捷生成，通过拖拽的方式完成图表的搭建。 不用关心设置图表的尺寸，拉伸图表即可控制大小。 能够保存图表在页面上的位置信息，大小信息，下次打开时可还原上次...
低代码开发之vue.draggable的使用（初阶：组件化拖拽生成简单页面）
IT程序猿
09-06 2991
vue.draggable 相关属性。
使用 vue-grid-layout + echart 实现图形可拖拽式布局+自适应大小
lvyilv的博客
05-01 6599
学习目标： 实现 echart 表在网页中的可拖拽式布局+自适应大小 学习内容： 安装 vue-grid-layout 安装 echart 编写可拖拽且可改变大小的 vue-grid-layout 组件 编写一个 echart 折线图组件 设置 echart 自适应大小 一、安装 echart 切到 vue-cli 目录下执行一下命令 npm install vue-grid-layout --save 此命令将为为你在本项目下安装 vue-grid-layout 编写放置 vue-gri
vue基于Echarts的拖拽数据可视化功能实现
fhw10204130的专栏
12-31 4309
我司产品提出了一个需求，做一个数据基于Echars的可拖拽缩放的数据可视化，上网百度了一番，结果出现了两种结局，一种花钱买成熟产品（公司不出钱），一种没有成熟代码，只能自己写了，故事即将开始，敬请期待......。 不，还是先上一张效果图吧，请看...... 前期知识点 1. offset（偏移量） 定义：当前元素在屏幕上占用的空间，如下图： 其中： offsetHeight: 该元素在垂直方向上的占用的空间，单位为px，不包括margin。 offsetWidth：该元素在水...
vue3+vuedraggable不同组件拖拽
03-31
Vue3和Vue2一样都可以使用vuedraggable插件进行不同组件的拖拽。以下是使用vuedraggable插件实现不同组件拖拽的步骤： 1. 安装vuedraggable插件 在终端中执行以下命令： ``` npm install vuedraggable ``` 2. 引入vuedraggable插件 在需要使用vuedraggable插件的组件中引入： ```javascript import draggable from 'vuedraggable' ``` 3. 使用draggable组件 在模板中使用draggable组件，并设置相应的属性： ```html <draggable v-model="list" :element="'ul'" :options="{group:'items'}"> <li v-for="(item, index) in list" :key="item.id">{{ item.name }}</li> </draggable> ``` 其中，v-model绑定了一个数组list，用于记录拖拽后的顺序；:element指定了拖拽的元素类型，这里为ul；:options指定了拖拽的选项，这里设置了group为items，表示不同的组件可以互相拖拽。 注意：v-model绑定的数组中的元素必须要有一个唯一的标识符，用于区分不同的元素。 4. 处理拖拽事件 当拖拽完成后，可以通过监听dragend事件来处理拖拽后的逻辑： ```html <draggable v-model="list" :element="'ul'" :options="{group:'items'}" @dragend="onDragEnd"> <li v-for="(item, index) in list" :key="item.id">{{ item.name }}</li> </draggable> ``` ```javascript methods: { onDragEnd(event) { console.log(event) // 处理拖拽完成后的逻辑 } } ``` 在onDragEnd方法中，可以获取到拖拽完成后的事件对象，通过事件对象可以获取到拖拽前后的元素顺序，从而进行相应的操作。 以上就是使用vuedraggable插件实现不同组件拖拽的步骤。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值