vue 根据屏幕大小来改变echarts的大小

** 屏幕分辨率 3840*1080

fnResize();
      window.onresize = function () {
        fnResize();
      }
      function fnResize() {
        var deviceWidth = document.documentElement.clientWidth || window.innerWidth;
        document.documentElement.style.fontSize = (deviceWidth / 38.4) + 'px';
        localStorage.setItem('rootFontSize', deviceWidth / 38.4)
      }

html

<div ref="gaugeChart"></div>

js

export default{
	data(){
		return {
			legendTop: 0,
		    legendItemWidth: 0,
		    legendFontSize: 0,
		    gridTop: 0,
		    gridRight: 0,
		    borderRadius: 0,
		}
	},
	mounted(){
		// 窗口尺寸发生变化重置图表
	    window.addEventListener("resize", () => {
	        let gaugeChart = echarts.init(this.$refs.gaugeChart)
	        gaugeChart.resize();
	        this.calculationFont(localStorage.getItem('rootFontSize'))
	        gaugeChart.setOption({
	          series:[{
	            progress: { // 当前进度
	                show: true,
	                width: this.legendItemWidth,
	              },
	              pointer: {
	                show: false
	              },
	              axisLine: {  // 是否显示轴线
	                show: true,
	                lineStyle: {
	                  width: this.legendItemWidth
	                }
	              },
	              detail: {
	                borderRadius: this.borderRadius,
	                fontSize: this.legendFontSize,
	              },
	          }]
	        })
	      })
	},
	methods:{
		// 计算配置图表的各种边距
	    calculationFont (font) {
	      this.legendTop = font * 0.18
	      this.legendItemWidth = font * 0.2
	      this.legendFontSize = font * 0.48
	      this.gridTop = font * 0.96
	      this.gridRight = font * 0.3
	      this.borderRadius = font * 0.3
	    },
		
		// 图表
    setChart(typeDom){
      this.calculationFont(localStorage.getItem('rootFontSize'))
      let gaugeChart = echarts.init(this.$refs.gaugeChart)
      
      gaugeChart.setOption({
         series: [
          {
            type: 'gauge',
            radius: "96%",
            min: 0,
            max: 100,
            splitNumber: 12,
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
	              {offset: 0, color: 'rgba(0, 222, 255, 0.8)'},// 0% 处的颜色
	              {offset: 1, color: 'rgba(255, 255, 255, 0.7)'}// 100% 处的颜色
		        ],
                globalCoord: false
              }
            },
            progress: { // 当前进度
              show: true,
              width: this.legendItemWidth,
            },
            pointer: {
              show: false
            },
            axisLine: {  // 是否显示轴线
              show: true,
              lineStyle: {
                width: this.legendItemWidth
              }
            },
            axisTick: { // 是否显示刻度
              show:false,
            },
            splitLine: { // 是否显示分割线
              show:false
            },
            axisLabel: { // 是否显示刻度标签
              show:false,
            },
            anchor: {
              show: false
            },
            title: {
              show: false
            },
            detail: {
              valueAnimation: true,
              width: '60%',
              lineHeight: 40,
              borderRadius: this.borderRadius,
               offsetCenter: [0, 0],
              fontSize: this.legendFontSize,
              fontWeight: 'bolder',
              formatter: '{value} %',
              color: '#fff',
              fontFamily: 'ZiTiQuanXinYiGuanHeiTi',
              textShadowColor: '#00DEFF',
              textShadowBlur: 5,
              textShadowOffsetX: 0,
              textShadowOffsetY: 2
            },
            data: [{
				value: 50
			}]
          }
        ]
      })
    },
	}
}