图表echart做像素适配

187 阅读1分钟
export function chartRem(res) {
  let docEl = document.documentElement,
      clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
  if (!clientWidth) return;
  let chartRem = 100 * (clientWidth / 1920);
  return res*chartRem;
}

在需要设置的地方首先引入公用的chartRem方法 import { chartRem } from './lib/utils'

然后在1920屏宽下像素设置为12px,就可以传入0.12

那么在3840px分辨率下 clientWidth / 1920 = 2; 就是10020.12,因此3840分辨率下最终返回的就是1920的2倍像素。

legend: {
  left: chartRem(2.7),
  itemWidth: chartRem(0.08),
  itemHeight: chartRem(0.08),
  itemGap: chartRem(0.1),
  textStyle: {
    fontSize: chartRem(0.12),
  }
},