快速实现树形结构图组件 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. 团队如何选择合适的Git分支策略?

    现代软件开发过程中要实现高效的团队协作,需要使用代码分支管理工具实现代码的共享.追溯.回滚及维护等功能.目前流行的代码管理工具,包括CVS,SVN,Git,Mercurial等. 相比CVS和SVN的 ...

  2. Golang 常用库之jwt-go

    本文地址 https://www.cnblogs.com/zichliang/p/17303759.html github地址:https://github.com/dgrijalva/jwt-go ...

  3. Buffer中的public void write(Buffer source, long byteCount)解析

    这个把source缓冲区中的数据写到当前缓冲区的方法是比较经典的: if (source == null) throw new IllegalArgumentException("sourc ...

  4. selenium部分知识点总结

    selenium部分总结 最近写了一个selenium自动化脚本. 基于此总结一些常用的代码 1. 用户输入换行符不终止输入 strings = '' s = input('请输入:(q停止输入)') ...

  5. 28-PWA

    const { resolve } = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin') ...

  6. mysql+proxysql+replication-manager的主从半同步复制+高可用+读写分离

    环境: AlmaLinux release 9.1 MySQL Community Server Ver 8.0.33 Replication Manager v2.2.40 for MariaDB ...

  7. 海思码率控制相关参数调优(CBR/VBR)

    1.CBR 海思相关参数调整(在Hisi板,cat /proc/umap/rc 可查看相关参数变化) 1.1 RC参数 1.2 VENC参数 VENC_PARAM_H264_CBR_S/VENC_PA ...

  8. Selenium 高亮显示操作元素

    一.代码 使用 https://www.cnblogs.com/TSmagic/p/16595168.html 此篇代码即可 二.编辑 test_ys_case.py 文件 # coding=utf- ...

  9. 手记系列之四 ----- 关于使用MySql的经验

    前言 本篇文章主要介绍的关于本人在使用MySql记录笔记的一些使用方法和经验,温馨提示,本文有点长,约1.5w字,几十张图片,建议收藏查看. 一.MySql安装 下载地址:https://dev.my ...

  10. QUIC在京东直播的应用与实践

    作者:京东零售 周凯 一. 前言与背景 国内的互联网直播技术从2005年前后兴起,彼时最具代表性的直播产品是由PPLive创始人姚欣在华中科技大学就读期间发起的校园直播项目PPLive.当时的直播技术 ...