1. 什么是uniapp echarts失真问题
在uniapp中使用echarts进行图表生成时，有些开发者会遇到图表显示失真的情况，尤其是在高分辨率手机上，图表更容易产生失真现象。这就是uniapp echarts失真问题。
2. 失真问题产生的原因
uniapp echarts失真问题的根本原因在于canvas画布的宽高与设备像素比之间的关系不对，导致渲染图形时出现了拉伸或压缩，从而产生失真现象。
2.1 DPI的概念
DPI（Dots Per Inch），即每英寸点数，也称为像素密度或像素每英寸数。它用于描述打印机、扫描仪和显示器屏幕的分辨率。
2.2 PPI的概念
PPI（Pixels Per Inch），即每英寸像素数，也称为像素密度或像素每英寸数。它用于描述设备屏幕的显示精度。
2.3 计算公式
设备像素比=设备物理像素/PPI，canvas的实际像素=canvas的逻辑像素*设备像素比。
3. 解决方法
3.1 设置viewport属性
在head标签中设置viewport属性，可以让浏览器正确的渲染页面：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
其中，width=device-width表示页面宽度等于设备宽度，initial-scale=1.0表示页面初始缩放比例为1，maximum-scale=1.0表示页面最大缩放比例为1，user-scalable=0表示禁止用户缩放页面。
3.2 设置画布大小
在uniapp中，通过设置ehcarts组件的canvas-id属性来控制画布大小，同时，还需要设置canvas的width和height属性，保证在不同手机上视觉效果都一致。其中，canvas的大小应该是逻辑像素大小，可以使用uniapp的 px2dpx 函数将设计稿中的像素值转换为逻辑像素值，如下所示：
import {px2dpx} from '@/utils/util.js'
this.canvasWidth = px2dpx(750)
this.canvasHeight = px2dpx(500)
<echarts canvas-id="mychart" :canvas-height="canvasHeight" :canvas-width="canvasWidth" class="chart"></echarts>
3.3 设置渲染分辨率比例
在进行echarts的初始化时要设置设备像素比（devicePixelRatio），保证逻辑像素与物理像素的对应关系正确，并且在渲染时不会出现拉伸或压缩。代码如下：
let devicePixelRatio = uni.getSystemInfoSync().devicePixelRatio // 获取设备像素比
let canvas = document.getElementById('mychart')
let width = canvas.clientWidth
let height = canvas.clientHeight
canvas.width = width * devicePixelRatio // 设置canvas宽度为逻辑像素宽度乘以设备像素比
canvas.height = height * devicePixelRatio // 设置canvas宽度为逻辑像素高度乘以设备像素比
let ctx = canvas.getContext('2d')
ctx.scale(devicePixelRatio, devicePixelRatio) // 设置画布的渲染分辨率比例
var chart = echarts.init(canvas, null, { devicePixelRatio: devicePixelRatio });
4. 总结
在uniapp中使用echarts时，出现图表失真的情况是很常见的问题。本文介绍了实现uniapp echarts失真问题的三种解决方法：
设置viewport属性
设置画布大小
设置渲染分辨率比例
使用这些方法可以解决uniapp echarts失真问题，并保证在不同设备上图表显示正常。