HighCharts实现3D不同高度圆环图、3D饼图

最近做可视化比较多，就常用的图表类型做了一下总结。

因为做可视化的图表代码量非常大，所以会把echarts图表单独抽离出来，封装成一个组件，也可以复用，所以这里我直接把封装的组件直接放在这里，是可以直接拿来用的，根据所需稍作修改即可。

这里都是用的vue3，其实和vue2差不多，在写法上稍作修改即可。

其中用到了一个 fontChart 的方法，这样是为了在window变化（改变缩放）的时候能够让字体也达到自适应，因为默认的单位是px，如果不使用的话，当我们去减小屏幕缩放的时候，这时候屏幕分辨率就会变大，但是我们的字体还是xxpx，就会让我们的字体看上去特别小，所以这里使用了这个方法，fontChart方法如下：

scr/utils/echartPxToRem.js

export function fontChart(res) {
  let docEl = document.documentElement,
    clientWidth =
      window.innerWidth ||
      document.documentElement.clientWidth ||
      document.body.clientWidth;
  if (!clientWidth) return;
  // 此处的3840 为设计稿的宽度，记得修改！
  let fontSize = clientWidth / 1920;
  return res * fontSize;
}

 接下来正题：

 第一步首先安装 highcharts