echart 模糊失真

### ECharts 图表显示模糊失真解决方案

#### 使用 SVG 渲染模式替代 Canvas
对于高分辨率屏幕或需要高质量图形展示的情况，建议采用 SVG 渲染模式来代替默认的 Canvas 模式。SVG 是一种矢量图形格式，无论怎样缩放都能保持清晰度不变，不会出现模糊现象[^3]。

// 初始化图表实例时指定 renderer 选项为 'svg'
var myChart = echarts.init(document.getElementById('main'), null, {
    renderer: 'svg' // 设置渲染器为 svg
});

#### 动态调整容器尺寸并重置宽高属性
当页面初次加载完成后再去获取 DOM 容器的实际大小，并据此设定图表的具体宽度高度参数；同时监听窗口变化事件以便及时更新这些数值以适应不同设备下的视窗改变情况[^2]。

function resizeHandler() {
    const container = document.getElementById('chart-container');
    myChart.resize({
        width: container.clientWidth,
        height: container.clientHeight
    });
}

window.addEventListener('resize', resizeHandler);
setTimeout(resizeHandler, 0); // 首次加载完成后立即执行一次调整操作

#### 确保 CSS 中不含有影响 canvas 自然比例尺的行为定义
避免在样式文件里针对 chart 所处 div 添加可能导致其内部 canvas 被拉伸变形的相关规则声明，比如 `width` 或者 `height` 百分比单位以及 overflow 属性等设置不当都可能引起此类问题发生[^1]。

/* 不要这样做 */
#chart-container {
    /* 错误示范：这会让 canvas 被强制拉伸 */
    width: 100%;
    height: 80vh;
}