TreeChart.vue
<template>
<div ref="chartRef" class='big-chart'></div>
</template>
<script setup lang='ts'>
import { onMounted, PropType, shallowRef, watch } from 'vue'
import * as echarts from 'echarts'
import { ECharts, EChartsCoreOption } from 'echarts'
const props = defineProps({
option: {
type: Object as PropType<EChartsCoreOption>,
required: true,
default: () => ({})
},
loading: Boolean
})
const chartRef = shallowRef<HTMLElement | null>(null)
const chart = shallowRef<ECharts | null>(null)
function init() {
if (props.option) {
chart.value = echarts.init(chartRef.value!)
setOption(props.option)
}
}
function setOption(option, notMerge?: boolean, lazyUpdate?: boolean) {
chart?.value?.setOption(option, notMerge, lazyUpdate)
}
function resize() {
chart.value!.resize()
}
watch(() => props.option, () => {
console.log(props.option,'props.option')
setOption(props.option)
})
// show loading
watch(() => props.loading, (val) => {
if (!chart.value) return
if (val) {
chart.value!.showLoading()
} else {
chart.value!.hideLoading()
}
})
onMounted(() => {
setTimeout(() => {
init()
}, 10);
})
defineExpose({
chart,
setOption,
resize
})
</script>
<style lang='scss' scoped>
.big-chart {
width: 500px;
height: 500px;
}
</style>
在父组件中使用:
<template>
<div>
<!-- 其他代码 -->
<MyTreeCharts :option="option"></MyTreeCharts>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import MyTreeCharts from './components/TreeCharts.vue';
const topographyData = ref([
{
name: '总配电室',
children: [
{
name: 'A区配电柜',
children: [
{
name: 'A1线路',
value: 100,
children: [
{
name: 'A1-1支线',
value: 45
},
{
name: 'A1-2支线',
value: 55
}
]
},
{
name: 'A2线路',
value: 80,
children: [
{
name: 'A2-1支线',
value: 40
},
{
name: 'A2-2支线',
value: 40
}
]
},
{
name: 'A3线路',
value: 90
}
]
},
{
name: 'B区配电柜',
children: [
{
name: 'B1线路',
value: 70,
children: [
{
name: 'B1-1支线',
value: 35
},
{
name: 'B1-2支线',
value: 35
}
]
},
{
name: 'B2线路',
value: 85,
children: [
{
name: 'B2-1支线',
value: 42
},
{
name: 'B2-2支线',
value: 43
}
]
},
{
name: 'B3线路',
value: 95
}
]
},
{
name: 'C区配电柜',
children: [
{
name: 'C1线路',
value: 95,
children: [
{
name: 'C1-1支线',
value: 30
},
{
name: 'C1-2支线',
value: 35
},
{
name: 'C1-3支线',
value: 30
}
]
},
{
name: 'C2线路',
value: 75,
children: [
{
name: 'C2-1支线',
value: 25
},
{
name: 'C2-2支线',
value: 25
},
{
name: 'C2-3支线',
value: 25
}
]
}
]
},
{
name: 'D区配电柜',
children: [
{
name: 'D1线路',
value: 88,
children: [
{
name: 'D1-1支线',
value: 44
},
{
name: 'D1-2支线',
value: 44
}
]
},
{
name: 'D2线路',
value: 92,
children: [
{
name: 'D2-1支线',
value: 46
},
{
name: 'D2-2支线',
value: 46
}
]
},
{
name: 'D3线路',
value: 78
},
{
name: 'D4线路',
value: 85
}
]
},
{
name: 'E区配电柜',
children: [
{
name: 'E1线路',
value: 82,
children: [
{
name: 'E1-1支线',
value: 41
},
{
name: 'E1-2支线',
value: 41
}
]
},
{
name: 'E2线路',
value: 76,
children: [
{
name: 'E2-1支线',
value: 38
},
{
name: 'E2-2支线',
value: 38
}
]
},
{
name: 'E3线路',
value: 94,
children: [
{
name: 'E3-1支线',
value: 47
},
{
name: 'E3-2支线',
value: 47
}
]
}
]
}
]
}
]);
const option = ref({
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'tree',
data: topographyData.value,
top: '3%',
left: '27%',
bottom: '3%',
right: '50%',
symbolSize: 8,
itemStyle: {
normal: {
color: 'rgb(231, 56, 40)',
borderColor: 'rgb(231, 56, 40)'
},
emphasis: {
color: '#ffffff',
borderColor: 'rgb(231, 56, 40)'
}
},
label: {
position: 'left',
verticalAlign: 'middle',
align: 'right',
fontSize: 12
},
lineStyle: {
color: 'rgb(231, 56, 40)',
width: 2 // 线条宽度
},
leaves: {
label: {
position: 'middle',
verticalAlign: 'top',
align: 'left'
}
},
emphasis: {
focus: 'descendant'
},
zoom: 1.0, // 缩放系数
expandAndCollapse: true,
animationDuration: 550,
animationDurationUpdate: 750
}
]
})
</script>
最终的效果图:
image.png
