使用的是css3中transform的scale属性来实现缩放的
说明：为什么没有用zoom。
刚开始用的是zoom。但是因为hover之后，tooltip会错位就换成了transform的scale
另附：zoom和scale的区别
声明：本来echarts的柱状图可以使用dataZoom来实现缩放。但是产品经理要求整个柱状图整体缩放（其实没啥意义）。所以做了这个效果
以下代码仅供参考
<template>
<div
class="box canvasCommon"
ref="canvasBox"
@wheel.prevent="handleTableWheel($event)"
>
<ul class="el-toolBar-list flex">
<li class="el-toolBar-item" @click.stop="zoomToggle(1)">
<el-tooltip class="item" effect="dark" content="默认" placement="bottom-start">
<i class="topo-icon el-icon-full-screen"></i>
</el-tooltip>
<!-- <span class="topo-text">默认</span> -->
</li>
<li class="el-toolBar-item" @click.stop="zoomToggle(0.1)">
<el-tooltip class="item" effect="dark" content="放大" placement="bottom-start">
<i class="topo-icon el-icon-zoom-in"></i>
</el-tooltip>
<!-- <span class="topo-text">放大</span> -->
</li>
<li class="el-toolBar-item" @click.stop="zoomToggle(-0.1)">
<el-tooltip class="item" effect="dark" content="缩小" placement="bottom-start">
<i class="topo-icon el-icon-zoom-out"></i>
</el-tooltip>
<!-- <span class="topo-text">缩小</span> -->
</li>
</ul>
<vue-draggable-resizable
ref="$dragPlug"
:w="150"
:h="150"
:x="canvasX"
:y="canvasY"
:min-width="50"
:min-height="50"
:grid="[10, 10]"
>
<div
class="canvas"
id="topo"
ref="canvas"
style="width: 100%; height: 100%"
></div>
</vue-draggable-resizable>
</div>
</template>
<script>
import VueDraggableResizable from 'vue-draggable-resizable';
export default {
components: {
VueDraggableResizable,
},
data() {
return {
canvasX: 0,
canvasY: 50
};
},
},
methods: {
handleTableWheel(event) {
let val = 0;
if (event.wheelDelta > 0) {
val = 0.1;
} else {
val = -0.1;
}
this.$nextTick(() => {
this.zoomToggle(val);
});
},
zoomToggle(val) {
let obj = this.$refs.canvas;
if (val === 1) {
obj.style.transform = 'scale(1)';
this.canvasX = 0
this.canvasY = 50
this.$refs.$dragPlug.left = this.canvasX
this.$refs.$dragPlug.top = this.canvasY
return;
}
var st = window.getComputedStyle(obj);
var tr =
st.getPropertyValue('-webkit-transform') ||
st.getPropertyValue('-moz-transform') ||
st.getPropertyValue('-ms-transform') ||
st.getPropertyValue('-o-transform') ||
st.getPropertyValue('transform') ||
'FAIL';
var values = tr.split('(')[1].split(')')[0].split(',');
var a = values[0];
var b = values[1];
var scale = Math.sqrt(a * a + b * b);
if (scale < 0.3 && val < 0) {
return;
}
obj.style.transform = `scale(${scale + val})`;
},
// 初始化Echart，配置项及点击事件
/*initCharts() {
let dom = this.$refs['canvas'];
this.myChart = echarts.init(dom);
var that = this;
const cabinetTotalU = this.instData.cabinetTotalU;
const titleList = this.instData.cabinetList.map((item) => {
item.value = item.cabinetUsedU;
return item.cabinetName;
});
let option = {
title: {
text: this.instData.cabinetColumnName,
x: 'center',
y: 'top'
},
xAxis: {
type: 'category',
data: titleList
},
yAxis: {
type: 'value',
show: false,
max: cabinetTotalU
},
tooltip: {
axisPointer: {
type: 'shadow'
},
snap: false,
position: function (point) {
return [point[0], '10%'];
},
triggerOn: 'mousemove|click',
enterable: true,
hideDelay: 1500,
trigger: 'axis',
backgroundColor: 'rgba(255,255,255,0.8)',
color: 'black',
textStyle: { color: '#666666' },
extraCssText:
'z-index: 9; box-shadow: 0 0 3px rgba(195, 195, 195, 0.8);',
formatter: function (params) {
if (params.length > 0) {
that.node = params[0].data;
return `
<div>
<div>${params[0].name}</div>
<div>
<button class="btn" type="button" data-sign="jump" onclick="${that.goToDetail(
params[0]
)}">节点跳转</button>
<button class="btn" type="button" data-sign="detail" onclick="${that.goToDetail(
params[0]
)}">节点详情</button>
<button class="btn" type="button" data-sign="position" onclick="${that.goToDetail(
params[0]
)}">落位信息</button>
</div>
</div>
`;
}
return '';
}
},
grid: {
left: '10%',
top: '10%',
right: '10%',
bottom: '10%',
containLabel: true
},
// dataZoom: [
// {
// type: "inside",
// },
// {
// type: "slider",
// bottom:"5%",
// },
// ],
series: [
{
data: this.instData.cabinetList,
type: 'bar',
showBackground: true,
itemStyle: {
color: '#FF6E4B'
},
label: {
show: true,
position: 'inside',
formatter: `{c}/${cabinetTotalU}`,
textStyle: {
// 数值样式
color: 'black',
fontSize: 16,
fontWeight: 600
}
}
}
]
};
this.myChart.setOption(option);
},*/
}
};
</script>
<style lang='scss'>
.canvasCommon {
width: 100%;
height: calc(100vh - 245px);
background: #fff;
.el-toolBar-list {
border: 1px solid #ddd;
background: #fff;
position: sticky;
width: 135px;
margin-right: 10px;
float: right;
top: 10px;
z-index: 3;
.el-toolBar-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 6px 12px;
cursor: pointer;
.topo-icon {
font-size: 20px;
margin-bottom: 1px;
}
.topo-text {
font-size: 12px;
}
&:hover {
color: salmon;
}
}
}
}
</style>
