前端Vue uni-app App/小程序/H5 通用tree树形结构图

原创已于 2023-10-19 09:14:16 修改 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #uni-app #前端框架 #html5 #小程序 #javascript

于 2023-07-19 09:18:10 首次发布

本文介绍了如何使用Vueuni-app和ECharts组件来创建一个通用的树形结构图，该组件适用于App、小程序和H5。通过组件化开发，可以提高开发效率，降低维护成本。示例展示了如何配置和使用这个tree树形结构图组件，以展示不同规模企业的行业分类。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

随着技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。

通过组件化开发，可以有效实现单独开发，单独维护，而且他们之间可以随意的进行组合。大大提升开发效率低，降低维护成本。

今天给大家介绍的一款组件: 前端Vue uni-appApp/小程序/H5通用tree树形结构图 ,

阅读全文下载完整组件代码请关注微信公众号：前端组件开发
在这里插入图片描述

效果图如下：

cc-treeChart

使用方法


<!-- 引入lime-echart组件 -->

import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';

import * as echartsLime from '@/uni_modules/lime-echart/static/echarts.min'

export default {

components: {

LEchart

},

}

<l-echart ref="chart" @finished="init"></l-echart>

<!-- 在method实现init方法 -->

async init() {

var fatherColor = 'green';

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

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

// 新能源汽车

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 = 360;

let widthSize = 0.039 * width;

if (widthSize > 36) {

widthSize = 36;

}

let heightSize = widthSize * 2.6;

this.option = {

tooltip: {

trigger: 'item',

triggerOn: 'mousemove'

},

series: [{

type: 'tree',

data: [data],

left: '20%',

right: '20%',

top: '16%',

bottom: '32%',

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

}]

};

// chart 图表里

const chart = await this.$refs.chart.init(echartsLime);

chart.setOption(this.option)

}

HTML代码实现部分


<template>

<view class="content">

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

<l-echart ref="chart" @finished="init"></l-echart>

</view>

</view>

</template>

<script>

import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';

import * as echartsLime from '@/uni_modules/lime-echart/static/echarts.min'

export default {

components: {

LEchart

},

data() {

return {

option: {},

}

},

mounted() {

},

methods: {

async init() {

var fatherColor = 'green';

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

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

// 新能源汽车

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 = 360;

let widthSize = 0.039 * width;

if (widthSize > 36) {

widthSize = 36;

}

let heightSize = widthSize * 2.6;

this.option = {

tooltip: {

trigger: 'item',

triggerOn: 'mousemove'

},

series: [{

type: 'tree',

data: [data],

left: '20%',

right: '20%',

top: '16%',

bottom: '32%',

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

}]

};

// chart 图表

const chart = await this.$refs.chart.init(echartsLime);

chart.setOption(this.option)

}

}

}

</script>

<style>

.content {

display: flex;

flex-direction: column;

}

</style>