多倍屏下，使 datav 图表文字清晰
解决方法原理
假如在多倍屏下，画出来的 canvas 大小是 200x100 px，html 页面中设置大小为 100x50 px，那么在 retina 或者 4k 屏幕下，图表文字将更加清晰。在一倍屏下，放大 canvas 不能是图表更加清晰。
解决方案
假设 window.devicePixelRatio 为2，也就是屏幕为2倍屏
/**
* 在多倍屏下，使 canvas 图更加清楚
* @param { Object } dom 原生dom
* @returns null
*/
function makeChartClear (dom) {
// 找到 canvas 元素
let canvas = dom.querySelectorAll("canvas")[0]
if(!canvas) return
let ctx = canvas.getContext('2d')
let dpr = window.devicePixelRatio
let { width: cssWidth, height: cssHeight } = canvas.getBoundingClientRect()
// 内容放大
canvas.width = dpr * cssWidth
canvas.height = dpr * cssHeight
// 画布放大
ctx.scale(dpr, dpr)
}
注意css中设置 canvas dom 大小为原 canvas 的一半
.father {
width: 100px;
height: 50px;
}
.father canvas {
width: 100%;
height: 100%;
}