如何手动调整Apache ECharts仪表盘画布的宽高？

ECharts仪表盘的画布尺寸并非通过配置项里的grid调整（grid仅针对直角坐标系图表生效），你可以通过以下两种方式手动设置画布宽高：

• 设置挂载DOM容器的样式
  ECharts画布的默认尺寸由其挂载的DOM元素尺寸决定，直接给目标DOM元素添加宽高样式即可：

  <!-- 示例：给挂载仪表盘的div设置固定宽高 -->
  <div id="gauge-container" style="width: 300px; height: 300px;"></div>
  

  也可以通过CSS类统一设置：

  #gauge-container {
    width: 400px;
    height: 400px;
    /* 可选：添加边框方便观察画布范围 */
    border: 1px solid #ccc;
  }
  

• 初始化ECharts实例时指定尺寸
  在调用echarts.init方法时，通过第三个参数传入尺寸配置，直接定义画布大小：

  const myChart = echarts.init(
    document.getElementById('gauge-container'),
    null,
    { width: 350, height: 350 }
  );
  myChart.setOption(option);
  

内容的提问来源于stack exchange，提问作者tan shi yu