<template> <div ref="chart" class="echarts-con" :style="{'zoom': zoom}"></div> </template> <script> import * as echarts from 'echarts' // import { EleResize } from '@/utils/esresize' export default { props: { chartData: { type: Object, required: true, }, }, watch: { chartData: { deep: true, handler(val) { this.initChart() }, }, }, data() { return { chart: null, zoom: 1, } }, methods: { initChart() { // let chartDom = document.getElementById('chart') let chartDom = this.$refs['chart'] this.chart = echarts.init(chartDom) this.chartData && this.chart.setOption(this.chartData, true) this.chart.resize() }, }, mounted() { this.zoom = 1 / document.body.style.zoom window.addEventListener('resize', () => { this.zoom = 1 / document.body.style.zoom }) /* 图表初始化 */ this.$nextTick(() => { this.initChart() }) }, } </script> <style scoped> .echarts-con { min-height: 320px; width: 100%; } </style>
红色部分是解决问题的重点,其他都是常规的封装。
标签:zomm,鼠标,缩放,chartData,initChart,chart,zoom,echarts From: https://www.cnblogs.com/sinceForever/p/16945379.html