echarts 树图滚轮放大缩小文字
放大缩小代码
-
使用
getZr()
注册和取消mousewheel
事件 -
字体大小设置放在
textStyle
里面
this.myChart.getZr().off("mousewheel")
this.myChart.getZr().on("mousewheel", (param) => {
let currentOption = this.myChart.getOption();
if (currentOption.series[0]) {
let zoom = currentOption.series[0].zoom;
currentOption.textStyle.fontSize = 10 * zoom
currentOption.series[0].label.width = 150 * zoom
option && this.myChart.setOption(currentOption);
}
});
整体方法代码
initTree() {
const echartDom = this.$refs.myEchartsRef;
this.myChart = this.$echarts.init(echartDom);
this.myChart.clear()
const option = {
color: "#ff0000",
textStyle: {
fontSize: 10
},
series: [
{
type: "tree",
orient: "LR", //竖向或水平 TB代表竖向 LR代表水平
edgeShape: "polyline", //控制折线的形式
id: 0,
name: "tree1",
data: this.verticalTreeData,
top: 0,
left: "20%",
right: "20%",
bottom: 0,
symbolSize: 7,
edgeForkPosition: "63%",
initialTreeDepth: 3,
position: "left",
roam: true,
lineStyle: {
width: 1,
color: "#3a74ca",
},
scaleLimit: {
min: 1,
max: 5
},
label: {
color: "#ffffff",
align: "center",
borderRadius: 5,
width: 150,
padding: [5, 0, 0, 0],
backgroundColor: "#2a61b3",
rich: {
oneBox: {
// fontSize: 12,
borderRadius: 5,
fontWeight: "bold",
},
twoBox: {
// fontSize: 12,
borderRadius: 5,
fontWeight: "bold",
},
threeBox: {
// fontSize: 12,
borderRadius: 5,
fontWeight: "bold",
},
bottomBox: {
// fontSize: 12,
color: "#9eb5d8",
padding: 2,
borderRadius: [0, 0, 5, 5],
},
},
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",
},
},
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();
if (currentOption.series[0]) {
let zoom = currentOption.series[0].zoom;
currentOption.textStyle.fontSize = 10 * zoom
currentOption.series[0].label.width = 150 * zoom
option && this.myChart.setOption(currentOption);
}
});
},
- 传送门: