|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div class="echarts-container" />
|
|
|
+ <div id="main" class="echarts-container" />
|
|
|
</template>
|
|
|
<script>
|
|
|
import { TreeChart } from "echarts/charts";
|
|
|
@@ -23,6 +23,9 @@ export default {
|
|
|
myChart:null,
|
|
|
centerLoca: [],
|
|
|
fontSize: 6,
|
|
|
+ chartWidth:0,
|
|
|
+ chartHeight:0,
|
|
|
+ center:[this.chartWidth,'50%'],
|
|
|
};
|
|
|
},
|
|
|
props: {
|
|
|
@@ -52,6 +55,14 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
+ chartWidth: {
|
|
|
+ handler(newValue, old) {
|
|
|
+ console.log(newValue);
|
|
|
+ if (newValue) {
|
|
|
+ this.init();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
},
|
|
|
mounted() {
|
|
|
this.init();
|
|
|
@@ -65,7 +76,7 @@ export default {
|
|
|
init() {
|
|
|
const that = this;
|
|
|
// console.log('$el:', this.$el)
|
|
|
- that.myChart = echarts.init(that.$el);
|
|
|
+ that.myChart = echarts.init(this.$el);
|
|
|
that.myChart.clear();
|
|
|
option = {
|
|
|
tooltip: {
|
|
|
@@ -221,15 +232,15 @@ export default {
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
- width: "100%",
|
|
|
- height: "100%",
|
|
|
+ width: that.chartWidth + 'px',
|
|
|
+ height:'100%',
|
|
|
type: "tree",
|
|
|
data: [this.treeData],
|
|
|
name: "树图",
|
|
|
top: "1%", // 组件离容器上侧的距离，像素值20，或相对容器的百分比
|
|
|
left: "1%", // 组件离容器左侧的距离
|
|
|
bottom: "1%", // 组件离容器下侧的距离
|
|
|
- right: "2%", // 组件离容器右侧的距离
|
|
|
+ right: "1%", // 组件离容器右侧的距离
|
|
|
layout: "orthogonal", // 树图的布局，正交orthogonal和径向radial两种
|
|
|
orient: "TB", // 树图中正交布局的方向，'LR','RL','TB','BT'，只有布局是正交时才生效
|
|
|
edgeShape: "polyline", // 树图边的形状，有曲线curve和折线polyline两种，只有正交布局下生效
|
|
|
@@ -240,8 +251,8 @@ export default {
|
|
|
min: 0.5,
|
|
|
max: 10,
|
|
|
},
|
|
|
- // center: ['400%', '60%'],
|
|
|
- // center: [-50, 50],
|
|
|
+ center: that.center || null,
|
|
|
+ // center: [5, 5],
|
|
|
initialTreeDepth: -1, // 树图初始的展开层级（深度），根节点是0，不设置时全部展开
|
|
|
// symbol: 'emptyCircle', // 标记的图形，默认是emptyCircle;circle,rect,roundRect,triangle,diamond,pin,arrow,none
|
|
|
symbol: function (value, params) {
|
|
|
@@ -369,7 +380,7 @@ export default {
|
|
|
|
|
|
option && that.myChart.setOption(option, true);
|
|
|
that.resize();
|
|
|
-
|
|
|
+
|
|
|
// that.adjustTreeView();
|
|
|
that.myChart.getZr().off("mousewheel");
|
|
|
that.myChart.getZr().on("mousewheel", (param) => {
|
|
|
@@ -388,24 +399,26 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
|
|
|
- resize() {
|
|
|
- console.log(this.myChart)
|
|
|
-
|
|
|
+ resize() {
|
|
|
let elesArr = Array.from(
|
|
|
new Set(this.myChart._chartsViews[0]._data._graphicEls)
|
|
|
- );
|
|
|
- console.log(elesArr)
|
|
|
-
|
|
|
+ );
|
|
|
let dep = this.myChart._chartsViews[0]._data.tree.root.height; //获取树高
|
|
|
- let layer_height = 100; //层级之间的高度
|
|
|
+ console.log(dep)
|
|
|
+ let layer_height = 90; //层级之间的高度
|
|
|
let currentHeight = layer_height * (dep + 1) || layer_height;
|
|
|
let newHeight = Math.max(currentHeight, layer_height);
|
|
|
this.chartHeight = newHeight + "px";
|
|
|
- let layer_width = 300; // 兄弟节点之间的距离
|
|
|
+ let layer_width = 90; // 兄弟节点之间的距离
|
|
|
let currentWidth = layer_width * (elesArr.length - 1) || layer_width;
|
|
|
let newWidth = Math.max(currentWidth, layer_width);
|
|
|
- this.chartWidth = newWidth + "px";
|
|
|
- this.myChart.resize();
|
|
|
+ console.log(newWidth)
|
|
|
+ this.center[0] = newWidth
|
|
|
+ this.chartWidth = newWidth;
|
|
|
+
|
|
|
+ window.addEventListener("resize", () => {
|
|
|
+ this.myChart.resize();
|
|
|
+ });
|
|
|
},
|
|
|
|
|
|
doGlobalTreeChart(ec, data) {
|
|
|
@@ -420,13 +433,6 @@ export default {
|
|
|
var domWidth = zr.painter.getWidth();
|
|
|
var treeWidth = this.getTreeWidth(zr);
|
|
|
if (treeWidth <= domWidth) return;
|
|
|
- var adjustSize = (domWidth / treeWidth) * 0.95; //多缩小0.05不至于完全充盈dom
|
|
|
- var lastNodeX = rightNode.style.x * adjustSize;
|
|
|
- var rightOffset =
|
|
|
- domWidth - lastNodeX - (domWidth - treeWidth * adjustSize) / 2; //尽可能的让其居中
|
|
|
- zr.painter._layers[1].scale = [adjustSize, adjustSize, 0, 0]; //前两个为缩放大小，后两个为缩放原点
|
|
|
- zr.painter._layers[1].position = [rightOffset, treeTopPadding]; //偏移量
|
|
|
- this.myChart.refresh();
|
|
|
},
|
|
|
|
|
|
//计算最左边节点和最右边节点(symbol为image或icon)的间隔即为树图宽度
|
tyler