Echarts 设置缩放功能后，最小化后，图形乱动
- 给 servies 设置 center 中心点，缩放事件监听，判断最小的时候，给他设置中心点，放大的时候，自动获取中心点
中心点代码
// echarts设备树形结构
initTree() {
const echartDom = this.$refs.myEchartsRef;
this.myChart = this.$echarts.init(echartDom);
this.myChart.clear()
const option = {
series: [
{
id: 0,
center: ['50%', '50%'], // 设置中心点
roam: true,
scaleLimit: {
min: 1,
max: 5
},
},
],
};
this.myChart.resize();
option && this.myChart.setOption(option, true);
this.myChart.getZr().off("mousewheel")
this.myChart.getZr().on("mousewheel", (param) => {
let currentOption = this.myChart.getOption();
let zoom = currentOption.series[0].zoom;
if (currentOption.series[0]) {
if (zoom === 1) {
currentOption.series[0].center = ['50%', '50%']
} else {
currentOption.series[0].center = null
}
option && this.myChart.setOption(currentOption);
}
});
},
全部代码
// echarts设备树形结构
initTree() {
const echartDom = this.$refs.myEchartsRef;
this.myChart = this.$echarts.init(echartDom);
this.myChart.clear()
const option = {
color: "#ff0000",
textStyle: {
fontSize: 12
},
series: [
{
type: "tree",
orient: "LR", //竖向或水平 TB代表竖向 LR代表水平
edgeShape: "polyline", //控制折线的形式
center: ['50%', '50%'],
id: 0,
name: "tree1",
data: this.verticalTreeData,
top: 0,
left: "12%",
right: "12%",
bottom: 0,
symbolSize: 7,
edgeForkPosition: "63%",
initialTreeDepth: 3,
position: "left",
roam: true,
lineStyle: {
width: 1,
color: "#3a74ca",
},
scaleLimit: {
min: 1,
max: 5
},
layoutCenter: ['50%', '50%'],
label: {
// color: "#ffffff",
align: "center",
borderRadius: 5,
width: 140,
padding: [5, 0, 0, 0],
backgroundColor: "#e4ebff",
borderColor: '#bbbbbb',
borderWidth: '1',
borderType: 'solid',
rich: {
oneBox: {
// fontSize: 12,
borderRadius: 5,
fontWeight: "bold",
padding: [3, 0, 0, 0],
color: '#4169e1',
},
twoBox: {
// fontSize: 12,
borderRadius: 5,
fontWeight: "bold",
padding: [3, 0, 0, 0],
color: '#4169e1'
},
threeBox: {
// fontSize: 12,
borderRadius: 5,
padding: [3, 0, 0, 0],
fontWeight: "bold",
color: '#4169e1'
},
bottomBox: {
// fontSize: 12,
color: "#9eb5d8",
padding: [5, 0, 3, 0],
borderRadius: [0, 0, 5, 5],
color: '#FF9200'
},
},
formatter: function (param) {
const { data } = param;
let res = "";
switch (data.state) {
case 1:
res += `{oneBox|${data.equipmentName + "\n"}} {bottomBox| ${data.description
}} `;
break;
case 2:
res += `{twoBox|${data.equipmentName + "\n"}} {bottomBox| ${data.description
}} `;
break;
case 3:
res += `{threeBox|${data.equipmentName + "\n"
}} {bottomBox| ${data.description}} `;
break;
default:
res += `{threeBox|${data.equipmentName + "\n"
}} {bottomBox| ${data.description}} `;
break;
}
return res;
},
},
leaves: {
label: {
position: "right",
verticalAlign: "middle",
// fontSize: 10,
// lineHeight: 40,
align: "center",
},
},
lineStyle: {
color: '#4169e1'
},
expandAndCollapse: false,
animationDuration: 550,
animationDurationUpdate: 750,
},
],
};
this.myChart.resize();
option && this.myChart.setOption(option, true);
this.myChart.getZr().off("mousewheel")
this.myChart.getZr().on("mousewheel", (param) => {
let currentOption = this.myChart.getOption();
let zoom = currentOption.series[0].zoom;
console.log(currentOption, 'currentOption.series[0]');
if (currentOption.series[0]) {
currentOption.textStyle.fontSize = 12 * zoom
currentOption.series[0].label.width = 140 * zoom
if (zoom === 1) {
currentOption.series[0].center = ['50%', '50%']
} else {
currentOption.series[0].center = null
}
option && this.myChart.setOption(currentOption);
}
});
},
