vue2+echart 树状图节点密集，可滚动鼠标缩放，尺寸根据节点调整

本文主要是介绍vue2+echart 树状图节点密集，可滚动鼠标缩放，尺寸根据节点调整，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

vue2+echart 树状图节点密集，可滚动鼠标缩放，尺寸根据节点调整

<template><div ref="chart" style="width: 100%; height: 600px;"></div>
</template><script>
import * as echarts from 'echarts';export default {mounted() {this.initChart();},methods: {initChart() {const chart = echarts.init(this.$refs.chart);const option = {series: [{type: 'tree',orient: "TB", //竖向或水平   TB代表竖向  LR代表水平edgeShape: 'polyline', //设置直线symbolSize: 10, // 调整节点大小layout: 'orthogonal', // 设置布局为直角坐标系roam: true, // 开启漫游emphasis: {focus: 'descendant'},expandAndCollapse: true,animationDuration: 550,animationDurationUpdate: 750,data: [{name: '根节点',children: [{name: '子节点1', children: [{ name: '子节点1' },{ name: '子节点2' },{ name: '子节点1' },{ name: '子节点2' },{ name: '子节点1' },{ name: '子节点2' },{ name: '子节点1' },{ name: '子节点2' },{ name: '子节点1' },{ name: '子节点2' },{ name: '子节点1' },{ name: '子节点2' },{ name: '子节点1' },{ name: '子节点2' },{ name: '子节点1' },{ name: '子节点2' },{ name: '子节点1' },{ name: '子节点2' },{ name: '子节点1' },{ name: '子节点2' },{ name: '子节点1' },{ name: '子节点2' },{ name: '子节点1' },{ name: '子节点2' },{ name: '子节点1' },{ name: '子节点2' },]},{ name: '子节点2' }]}],// 其他配置...}]};chart.setOption(option);chart.on('click', (params) => {if (params.dataType === 'node') {// 取消之前高亮的节点chart.dispatchAction({type: 'downplay',seriesIndex: 0,dataIndex: this.currentIndex});// 高亮当前点击的节点this.currentIndex = params.dataIndex;chart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: this.currentIndex});}});// 保存echarts实例this.chart = chart;}},beforeDestroy() {if (this.chart) {this.chart.dispose(); // 清理chart实例}}
};
</script>