<template>
<div class="treeBox">
<div
class="treeChtars"
v-for="(item, index) in treeArr"
:key="index"
:ref="`treeEcharts${index}`"
></div>
</div>
</template>
<script>
export default {
data() {
return {
option: {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove',
backgroundColor: '#dfdfdf',
textStyle: {
color: 'black'
}
},
series: [
{
type: 'tree',
symbolSize: 75,
symbol: 'roundRect',
edgeShape: 'polyline',
edgeForkPosition: '50%',
initialTreeDepth: 2,
orient: 'vertical',
itemStyle: {
color: 'black',
borderColor: 'black'
},
expandAndCollapse: true,
animationDuration: 550,
animationDurationUpdate: 750,
lineStyle: {
color: '#7b7b7b',
width: 3
},
label: {
show: true,
position: 'inside',
textStyle: {
fontSize: 15,
color: '#fff'
}
},
leaves: {
label: {
position: 'inside',
color: '#fff'
},
itemStyle: {
color: '#dfdfdf',
borderColor: '#dfdfdf'
}
},
data: [
{
name: '根节点',
url: '',
// 根节点样式设置
itemStyle: {
color: '#a53626',
borderColor: '#a53626'
},
children: [
{
name: '子节点1',
children: [
{
name: '叶子节点1'
},
{
name: '叶子节点2'
},
{
name: '叶子节点3'
}
]
},
{
name: '子节点2',
children: [
{
name: '叶子节点4'
},
{
name: '叶子节点5'
},
{
name: '叶子节点6'
}
]
}
]
}
]
}
]
},
treeArr: [1, 2, 3]
}
},
created() {},
mounted() {
// this.treeArr.forEach((item, index) => {
// let charst = `tree${index}`
// console.log('charst', this.$refs[charst][0])
// })
this.init()
},
methods: {
init() {
let img1 = 'image://' + require('../../static/images/treeSymbol1.png')
let img3 = 'image://' + require('../../static/images/treesymbol.png')
let testObj = {
data0: [
{
name: '上游',
money: '零部件生产',
symbolSize: [200, 68], //设置自己选择区域的宽高(子节点宽高)
symbol: img1,
label: {
width: 180,
height: 70,
backgroundColor: {}
},
children: [
{
//子集
name: '风轮',
money: '15',
symbolSize: [90, 75],
label: {
width: 90,
height: 75,
// backgroundColor: 'rgba(26, 140, 255, 0.37)'
backgroundColor: '#6392ff'
},
children: [
{
//子集
name: `风电轮毂`,
money: '800',
symbolSize: [35, 95],
symbol: img3,
label: {
height: 40,
backgroundColor: {},
borderColor: 'blue'
}
},
{
//子集
name: `主轴`,
money: '800',
symbolSize: [35, 95],
symbol: img3,
label: {
width: 20,
height: 40,
backgroundColor: {}
}
}
]
},
{
//子集
name: '风电塔筒',
money: '0',
symbolSize: [90, 75],
label: {
width: 90,
height: 75,
// backgroundColor: 'rgba(26, 140, 255, 0.37)'
backgroundColor: '#6392ff'
},
children: [
{
//子集
name: `小米`,
money: '800',
symbolSize: [35, 95],
symbol: img3,
label: {
height: 40,
backgroundColor: {},
borderColor: 'blue'
}
},
{
//子集
name: `主轴`,
money: '800',
symbolSize: [35, 95],
symbol: img3,
label: {
width: 20,
height: 40,
backgroundColor: {}
}
}
]
},
{
//子集
name: '风轮',
money: '15',
symbolSize: [90, 75],
label: {
width: 90,
height: 75,
// backgroundColor: 'rgba(26, 140, 255, 0.37)'
backgroundColor: '#6392ff'
},
children: [
{
//子集
name: `小米`,
money: '800',
symbolSize: [35, 95],
symbol:
'image://' +
require('../../static/images/treesymbol.png'), // 自定义图片路径
label: {
height: 40,
backgroundColor: {},
borderColor: 'blue'
}
},
{
//子集
name: '2222',
money: '800',
symbolSize: [35, 95],
symbol:
'image://' +
require('../../static/images/treesymbol.png'),
label: {
width: 20,
height: 40,
backgroundColor: {}
}
}
]
}
]
}
],
data1: [
{
name: '上游',
money: '零部件生产',
symbolSize: [200, 68], //设置自己选择区域的宽高(子节点宽高)
symbol: img1,
label: {
width: 180,
height: 70,
backgroundColor: {}
},
children: [
{
//子集
name: '风轮',
money: '15',
symbolSize: [90, 75],
label: {
width: 90,
height: 75,
// backgroundColor: 'rgba(26, 140, 255, 0.37)'
backgroundColor: '#6392ff'
},
children: [
{
//子集
name: `风电轮毂`,
money: '800',
symbolSize: [35, 95],
symbol: img3,
label: {
height: 40,
backgroundColor: {},
borderColor: 'blue'
}
},
{
//子集
name: `主轴`,
money: '800',
symbolSize: [35, 95],
symbol: img3,
label: {
width: 20,
height: 40,
backgroundColor: {}
}
}
]
},
{
//子集
name: '风电塔筒',
money: '0',
symbolSize: [90, 75],
label: {
width: 90,
height: 75,
// backgroundColor: 'rgba(26, 140, 255, 0.37)'
backgroundColor: '#6392ff'
},
children: [
{
//子集
name: `小米`,
money: '800',
symbolSize: [35, 95],
symbol: img3,
label: {
height: 40,
backgroundColor: {},
borderColor: 'blue'
}
},
{
//子集
name: `主轴`,
money: '800',
symbolSize: [35, 95],
symbol: img3,
label: {
width: 20,
height: 40,
backgroundColor: {}
}
}
]
},
{
//子集
name: '风轮',
money: '15',
symbolSize: [90, 75],
label: {
width: 90,
height: 75,
// backgroundColor: 'rgba(26, 140, 255, 0.37)'
backgroundColor: '#6392ff'
},
children: [
{
//子集
name: `小米`,
money: '800',
symbolSize: [35, 95],
symbol:
'image://' +
require('../../static/images/treesymbol.png'), // 自定义图片路径
label: {
height: 40,
backgroundColor: {},
borderColor: 'blue'
}
},
{
//子集
name: '2222',
money: '800',
symbolSize: [35, 95],
symbol:
'image://' +
require('../../static/images/treesymbol.png'),
label: {
width: 20,
height: 40,
backgroundColor: {}
}
}
]
}
]
}
],
data2: [
{
name: '上游',
money: '零部件生产',
symbolSize: [200, 68], //设置自己选择区域的宽高(子节点宽高)
symbol: img1,
label: {
width: 180,
height: 70,
backgroundColor: {}
},
children: [
{
//子集
name: '风轮',
money: '15',
symbolSize: [90, 75],
label: {
width: 90,
height: 75,
// backgroundColor: 'rgba(26, 140, 255, 0.37)'
backgroundColor: '#6392ff'
},
children: [
{
//子集
name: `风电轮毂`,
money: '800',
symbolSize: [35, 95],
symbol: img3,
label: {
height: 40,
backgroundColor: {},
borderColor: 'blue'
}
},
{
//子集
name: `主轴`,
money: '800',
symbolSize: [35, 95],
symbol: img3,
label: {
width: 20,
height: 40,
backgroundColor: {}
}
}
]
},
{
//子集
name: '风电塔筒',
money: '0',
symbolSize: [90, 75],
label: {
width: 90,
height: 75,
// backgroundColor: 'rgba(26, 140, 255, 0.37)'
backgroundColor: '#6392ff'
},
children: [
{
//子集
name: `小米`,
money: '800',
symbolSize: [35, 95],
symbol: img3,
label: {
height: 40,
backgroundColor: {},
borderColor: 'blue'
}
},
{
//子集
name: `主轴`,
money: '800',
symbolSize: [35, 95],
symbol: img3,
label: {
width: 20,
height: 40,
backgroundColor: {}
}
}
]
},
{
//子集
name: '风轮',
money: '15',
symbolSize: [90, 75],
label: {
width: 90,
height: 75,
// backgroundColor: 'rgba(26, 140, 255, 0.37)'
backgroundColor: '#6392ff'
},
children: [
{
//子集
name: `小米`,
money: '800',
symbolSize: [35, 95],
symbol:
'image://' +
require('../../static/images/treesymbol.png'), // 自定义图片路径
label: {
height: 40,
backgroundColor: {},
borderColor: 'blue'
}
},
{
//子集
name: '2222',
money: '800',
symbolSize: [35, 95],
symbol:
'image://' +
require('../../static/images/treesymbol.png'),
label: {
width: 20,
height: 40,
backgroundColor: {}
}
}
]
}
]
}
]
}
this.treeArr.forEach((item, index) => {
let treeRef = `treeEcharts${index}`
console.log('treeData', testObj[`data${index}`])
this.initCharts(testObj[`data${index}`], this.$refs[treeRef])
})
},
initCharts(treeData, refs) {
let option = {
series: [
{
type: 'tree',
orient: 'vertical',
name: '自然资源厅',
edgeShape: 'polyline', //链接线是折现还是曲线
data: treeData,
width: 340, //树形图宽
height: 250, //树形图高
top: '20%',
left: '0%',
symbolSize: [60, 38], //设置自己选择区域的宽高(子节点宽高)
symbol: 'rect', //(圆形),rect矩形
// roam: false, //鼠标移到区块时会显示一个灰色背景的title，移动不同区域时是否开启滑动动画
initialTreeDepth: 10,
itemStyle: {
//symbol的样式
color: 'rgba(0,0,0,0.1)', //背景色
borderColor: '#333'
},
label: {
normal: {
// position: [30, 35],
verticalAlign: 'middle',
align: 'center',
backgroundColor: '#99d97c',
color: '#fff',
// padding: 3,
formatter: function (params) {
// console.log('params', params)
let money = params.data.money ? '' + params.data.money : ''
let name =
params.name.substring(0, 11) +
'' +
params.name.substring(11) +
`\n`
return [`{name|${name}}`, `{money|${money}}`].join('\n')
},
rich: {
name: {
// width: 10,
height: 18,
color: '#FFF',
padding: [8, 0],
align: 'center',
fontSize: 12
},
money: {
height: 18,
color: '#fff',
padding: [-40, 0],
align: 'center',
fontSize: 16,
borderWidth: 2,
fontWeight: 'normal'
}
}
}
},
leaves: {
label: {
normal: {
// 控制文字
position: [17, 25],
width: 20,
verticalAlign: 'middle',
// align: 'center',
backgroundColor: '',
formatter: function (params) {
let money = params.data.money
let name = params.name.split('').join('\n') + `\n`
return [`{name|${name}}`, `{money|${money}}`].join('\n')
},
rich: {
//每当被换行符截取,就会自动生成新的NAME,所以宽高选择一个字体的大小即可
name: {
height: 14,
width: 20,
color: '#C2CDE7',
// backgroundColor: 'red',
padding: [0, 0, 0, 0],
// align: 'center',
fontSize: 14,
/*文字换行 汉字和英文数字字符也适配*/
writingMode: 'vertical-rl',
fontFamily: ' PingFangSC-Regular, PingFang SC',
fontWeight: 400
},
money: {
height: 18,
color: '#FFC972',
// padding: [-20, 0],
align: 'center',
fontSize: 12,
borderWidth: 2,
fontWeight: 'normal'
}
}
}
}
},
lineStyle: {
color: 'rgba(203, 224, 255, 0.3)',
width: 1
// color: {
// type: 'linear',
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0,
// color: '#0E769D', // 0% 处的颜色
// },
// {
// offset: 1,
// color: '#939597', // 100% 处的颜色
// },
// ],
// global: false, // 缺省为 false
// },
},
expandAndCollapse: false,
animationDuration: 550,
animationDurationUpdate: 750
}
]
}
let param = $.extend(true, {}, option, {})
let $dom = refs[0]
this.chartTrend = this.$echarts.init($dom)
this.chartTrend.resize()
this.chartTrend.clear()
this.chartTrend.setOption(param)
}
}
}
</script>
<style scoped lang='less'>
.treeBox {
width: 100%;
height: 379px;
display: flex;
justify-content: space-between;
}
.treeChtars {
width: 33%;
height: 379px;
}
</style>
1590
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
