快速实现树形结构图组件 tree组件,可拖拽移动,点击展开收缩,无限添加子集; 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12650

效果图如下:

 

实现代码如下:

# treeShapeStruct 树形结构图,可拖拽移动,点击展开收缩,无限添加子集使用方法

#### HTML代码部分

```html

<template>

<view class="content">

<view class="titleIos"></view>

<div class="mui-content" style="margin-top: 16px;">

<div id="container" style="height: 86vh; margin-top: 0px;"></div>

</div>

</view>

</template>

```

#### JS代码 (引入组件 填充数据)

```javascript

<script>

import echarts from '../../static/h5/echarts.min.js'

export default {

data() {

return {

}

},

onReady() {

},

onLoad: function(e) {

console.log(e);

},

onShow() {

},

mounted() {

this.treeData()

},

methods: {

treeData() {

var dom = document.getElementById("container");

var myChart = echarts.init(dom);

//  颜色设定 不同颜色寓意不同权重

var fatherColor = 'green';

var midColor = 'rgb(193, 92, 31)';

var smallColor = 'rgb(247, 203, 174)';

var option;

// 新能源汽车

let swyyQ = {

"name": "新能源汽车",

itemStyle: {

color: midColor

},

"children": [{

"name": "大型企业",

itemStyle: {

color: fatherColor

},

},

{

"name": "中型企业",

itemStyle: {

color: midColor

},

},

{

"name": "小型企业",

itemStyle: {

color: smallColor

},

},

{

"name": "其他规模企业",

itemStyle: {

color: fatherColor

},

}

]

};

// 新材料行业

let xclkQ = {

"name": "生物与新医药",

itemStyle: {

color: fatherColor

},

"children": [{

"name": "大型企业",

itemStyle: {

color: fatherColor

},

},

{

"name": "中型企业",

itemStyle: {

color: midColor

},

},

{

"name": "小型企业",

itemStyle: {

color: smallColor

},

},

{

"name": "其他规模企业",

itemStyle: {

color: fatherColor

},

}

]

};;

let data = {

"name": "行业分类",

itemStyle: {

color: fatherColor

},

"children": [swyyQ, xclkQ]

}

// 获取网页宽度 设置树形条目实体宽高度

let width = document.body.scrollWidth;

let widthSize = 0.039 * width;

if (widthSize > 36) {

widthSize = 36;

}

let heightSize = widthSize * 2.2;

myChart.setOption(

(option = {

tooltip: {

trigger: 'item',

triggerOn: 'mousemove'

},

series: [{

type: 'tree',

data: [data],

left: '2%',

right: '2%',

top: '8%',

bottom: '20%',

symbol: 'square',

symbolSize: [widthSize, heightSize],

orient: 'vertical',

expandAndCollapse: true,

initialTreeDepth: 2,

label: {

position: 'top',

rotate: 0,

verticalAlign: 'middle',

align: 'center',

fontSize: 12

},

leaves: {

label: {

position: 'bottom',

rotate: -90,

verticalAlign: 'middle',

align: 'left'

}

},

animationDurationUpdate: 150

}]

})

);

if (option && typeof option === 'object') {

myChart.setOption(option);

}

},

}

}

</script>

```

#### CSS

```CSS

<style>

.content {

display: flex;

flex-direction: column;

}

</style>

```

前端树形结构图组件 tree组件,可拖拽移动,点击展开收缩,无限添加子集的更多相关文章

  1. Qt之股票组件-自选股--列表可以拖拽、右键常用菜单

    目录 一.开头嘴一嘴 二.效果展示 三.自选股列表 1.列表初始化 2.添加Item 3.右键菜单 4.拖拽Item 5.刷新数据 四.相关文章 原文链接:Qt之股票组件-自选股--列表可以拖拽.右键 ...

  2. wordpress模块无法拖拽/显示选项点击无反应

    问题:wordpress模块无法拖拽/显示选项点击无反应,还有编辑器的全屏什么的都用不了,按F12查看了console,提示很多jQuery is not defined... 解决方法:把wp-in ...

  3. js 实现table表格拖拽和点击表头升降序排序

    js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...

  4. vue组件实现图片的拖拽和缩放

    vue实现一个组件其实很简单但是要写出一个好的可复用的组件那就需要多学习和钻研一下,一个好的组件必须有其必不可少的有优点:一是能提高应用开发效率.测试性.复用性等:二是组件应该是高内聚.低耦合的:三是 ...

  5. odoo开发笔记-tree列表视图拖拽排序

    odoo列表tree视图 拖拽排序 实现效果: 实现方式: 模型中定义字段: class CusYourModel(models.Model): """ 你的模型 &qu ...

  6. asp.net webuploader粘贴,拖拽,点击上传图片

    demo.html代码:<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset= ...

  7. js制作可拖拽可点击的悬浮球

    兼容mouse事件和touch事件,支持IE9及其以上 效果展示:https://jsfiddle.net/shifeng/7xebf3u0/ // index.html <!DOCTYPE h ...

  8. 如何实现Canvas图像的拖拽、点击等操作

    上一篇Canvas的博文写完后,有位朋友希望能对Canvas绘制出来的图像进行点击.拖拽等操作,因为Canvas绘制出的图像能很好的美化.好像是想做炉石什么的游戏,我也没玩过. Canvas在我的理解 ...

  9. 百度地图API 拖拽或点击地图位置获取坐标

    function setPlace(map,myValue,callback){ function getAddress(){ var pp = local.getResults().getPoi(0 ...

  10. JS面向对象组件(六) -- 拖拽功能以及组件的延展

    HTML部分 <div id="div1"></div> <div id="div2"></div> CSS部分 ...

随机推荐

  1. docker方式实现redis数据持久化离线安装

    保存镜像 root@hello:~# docker pull redis:latest latest: Pulling from library/redis a2abf6c4d29d: Already ...

  2. 【杂绪】#4 & 【Diary】CSP-S1 2021 游记(慎) & CSP-S 备赛发狂日记

    减少..减少掉 我没法同时做那么多事情了........ -------------------------------------------- 但是我\(\color{#EEEEEE}{真真切切地 ...

  3. 数据泵:impdp导入用户ORA-01653

    ,问题描述:在导入一个用户数据的时候,大小为14G左右,导进来的时候卡半天,后来发现是表空间满了,已经恢复了大概6G左右,剩下8G左右没有恢复.此时磁盘剩余19G,加了15G的表空间,磁盘就剩下4G左 ...

  4. JQuery点击复制文本框内容的方法插件

    [导读] 文章介绍了两种常用的点击复制文本框内容方法,一种是but IE only,同样的这个也是我们经常使用的.优点是体积小,仅有十来行代码,但缺点也很明显,只支持IE及以IE为内核的浏览器,另一种 ...

  5. 【Java SE】IO流

    1.File类 ①File类的一个对象代表一个文件或一个文件目录 ②File类声明在java.io下 1.1 FIle类的声明 路径分隔符 Windows和DOS系统默认使用'',UNIX和URL使用 ...

  6. Midjourney 提示词工具(10 个国内外最好最推荐的)

    Midjourney,是一个革命性的基于人工智能的艺术生成器,可以从被称为提示的简单文本描述中生成令人惊叹的图像.Midjourney已经迅速成为艺术家.设计师和营销人员的首选工具(包括像我这样根本不 ...

  7. elastic-job源码(1)- job自动装配

    版本:3.1.0-SNAPSHOT git地址:https://github.com/apache/shardingsphere-elasticjob   Maven 坐标 <dependenc ...

  8. Linux 内存管理 pt.1

    哈喽大家好,我是咸鱼 今天我们来学习一下 Linux 操作系统核心之一:内存 跟 CPU 一样,内存也是操作系统最核心的功能之一,内存主要用来存储系统和程序的指令.数据.缓存等 关于内存的学习,我会尽 ...

  9. Netty服务端开发及性能优化

    作者:京东物流 王奕龙 Netty是一个异步基于事件驱动的高性能网络通信框架,可以看做是对NIO和BIO的封装,并提供了简单易用的API.Handler和工具类等,用以快速开发高性能.高可靠性的网络服 ...

  10. 2023-04-15:ffmpeg的filter_audio.c的功能是生成一个正弦波音频,然后通过简单的滤镜链,最后输出数据的MD5校验和。请用go语言改写。

    2023-04-15:ffmpeg的filter_audio.c的功能是生成一个正弦波音频,然后通过简单的滤镜链,最后输出数据的MD5校验和.请用go语言改写. 答案2023-04-15: 代码见gi ...