隨著技術(shù)的發(fā)展，開發(fā)的復(fù)雜度也越來越高，傳統(tǒng)開發(fā)方式將一個(gè)系統(tǒng)做成了整塊應(yīng)用，經(jīng)常出現(xiàn)的情況就是一個(gè)小小的改動(dòng)或者一個(gè)小功能的增加可能會(huì)引起整體邏輯的修改，造成牽一發(fā)而動(dòng)全身。
通過組件化開發(fā)，可以有效實(shí)現(xiàn)單獨(dú)開發(fā)，單獨(dú)維護(hù)，而且他們之間可以隨意的進(jìn)行組合。大大提升開發(fā)效率低，降低維護(hù)成本。
今天給大家介紹的一款組件: 前端Vue uni-appApp/小程序/H5通用tree樹形結(jié)構(gòu)圖 ,閱讀全文下載完整代碼請關(guān)注微信公眾號(hào)： 前端組件開發(fā)
效果圖如下：
文章來源：http://www.zghlxwxcb.cn/news/detail-594361.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-594361.html
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實(shí)現(xiàn)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": "大型企業(yè)",
itemStyle: {
color: fatherColor
},
},
{
"name": "中型企業(yè)",
itemStyle: {
color: midColor
},
},
{
"name": "小型企業(yè)",
itemStyle: {
color: smallColor
},
},
{
"name": "其他規(guī)模企業(yè)",
itemStyle: {
color: fatherColor
},
}
]
};
//?生物與新醫(yī)藥
let xclkQ = {
"name": "生物與新醫(yī)藥",
itemStyle: {
color: fatherColor
},
"children": [{
"name": "大型企業(yè)",
itemStyle: {
color: fatherColor
},
},
{
"name": "中型企業(yè)",
itemStyle: {
color: midColor
},
},
{
"name": "小型企業(yè)",
itemStyle: {
color: smallColor
},
},
{
"name": "其他規(guī)模企業(yè)",
itemStyle: {
color: fatherColor
},
}
]
};;
let data = {
"name": "行業(yè)分類",
itemStyle: {
color: fatherColor
},
"children": [swyyQ, xclkQ]
}
// 獲取網(wǎng)頁寬度?
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代碼實(shí)現(xiàn)部分
<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": "大型企業(yè)",
itemStyle: {
color: fatherColor
},
},
{
"name": "中型企業(yè)",
itemStyle: {
color: midColor
},
},
{
"name": "小型企業(yè)",
itemStyle: {
color: smallColor
},
},
{
"name": "其他規(guī)模企業(yè)",
itemStyle: {
color: fatherColor
},
}
]
};
// 新材料行業(yè)
let xclkQ = {
"name": "生物與新醫(yī)藥",
itemStyle: {
color: fatherColor
},
"children": [{
"name": "大型企業(yè)",
itemStyle: {
color: fatherColor
},
},
{
"name": "中型企業(yè)",
itemStyle: {
color: midColor
},
},
{
"name": "小型企業(yè)",
itemStyle: {
color: smallColor
},
},
{
"name": "其他規(guī)模企業(yè)",
itemStyle: {
color: fatherColor
},
}
]
};;
let data = {
"name": "行業(yè)分類",
itemStyle: {
color: fatherColor
},
"children": [swyyQ, xclkQ]
}
// 獲取網(wǎng)頁寬度
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>
到了這里，關(guān)于前端Vue uni-app App/小程序/H5 通用tree樹形結(jié)構(gòu)圖的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
