问题描述：
因为不能使用postcss实现自适应的前提下使用dpr进行全局缩放导致echarts图表的hover出现错位问题。
解决：
在查阅了许多方法后发现以下的方法能够解决
<template> <div ref="PieChart" class="chartbox"></div></template><script>import * as echarts from 'echarts';import { getAction } from '@/api/manage';export default { name: 'PieChartBox', data() { return { data:[], chart: null, zoom: 1 } }, mounted() { this.zoom = 1 / document.body.style.zoom this.initChart(); }, beforeDestroy() { if (this.chart) { this.chart.dispose(); } }, methods: { async initChart() { const res = await getAction('/dataasset/tbDataDataStandard/listGroupByDataSubjet') let data = res.result this.chart = echarts.init(this.$refs.PieChart); const option = { title: { text: '', left: 'center' }, legend: { type: 'scroll', orient:'vertical', left: 'left', icon: 'circle', selectedMode: false }, tooltip: { trigger: 'item' }, series: [ { name: '访问来源', type: 'pie', radius: '70%', center: ['60%', '50%'], data: data, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; this.chart.setOption(option);
// 具体解决方法 其他的 zoom:${zoom};
// transform:scale(${1/zoom});transform-origin:0 0 不管用 document.styleSheets[document.styleSheets.length - 1].insertRule('canvas {zoom: ' + this.zoom + '}') document.styleSheets[document.styleSheets.length - 1].insertRule('canvas {transform: scale(' + 1 / this.zoom + ')}') document.styleSheets[document.styleSheets.length - 1].insertRule('canvas {transform-origin: 0 0}') }, resizeChart() { if (this.chart) { this.chart.resize(); this.zoom = 1 / document.body.style.zoom } } }};</script><style lang="less" scoped>.chartbox { width: 100%; height: 480px}</style>
