# Vue引用js文件的多種方式 **1.vue-cli webpack全局引入jquery** (1)首先 npm install jquery --save (--save 的意思是將模塊安裝到項目目錄下，併在package文件的dependencies節點寫入依賴。) (2)在webpack. ...
隨著技術的發展，開發的複雜度也越來越高，傳統開發方式將一個系統做成了整塊應用，經常出現的情況就是一個小小的改動或者一個小功能的增加可能會引起整體邏輯的修改，造成牽一發而動全身。
通過組件化開發，可以有效實現單獨開發，單獨維護，而且他們之間可以隨意的進行組合。大大提升開發效率低，降低維護成本。
今天給大家介紹的一款組件: 前端Vue uni-appApp/小程式/H5通用tree樹形結構圖 ,附源碼下載地址 ： https://ext.dcloud.net.cn/plugin?id=13604
效果圖如下：
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>
