一、ECharts布局三大核心要素

1. ​​容器级布局

   /* 容器设计规范 */
   .chart-container {
     max-width: 700px;     /* 最大宽度限制 */
     padding: 20px;        /* 内边距控制 */
     box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* 专业投影效果 */
     border-radius: 10px;  /* 圆角设计 */
   }
   #main {
     height: 450px;        /* 固定高度容器 */
   }

2. ​​标题系统双级配置

   // HTML标题+ECharts标题双重配置
   graphic: {
     type: 'text',
     top: 80,              // 精确定位到像素
     style: { text: '数据情况统计' }  // 自定义图例标题
   },
   title: { left: 'left' } // 主标题左对齐

3. 图例定位技巧

   legend: {
     orient: 'vertical',   // 垂直排列
     left: 'right',        // 靠右定位
     top: '120px',         // 向下偏移预留空间
   }

二、高级布局技巧

1. ​​混合定位策略

   series: [{
     center: ['40%', '55%'], // 百分比+像素混合定位
     radius: '55%'           // 相对尺寸控制
   }]

2. 响应式布局实战方案

   window.addEventListener('resize', () => {
     // 动态调整容器尺寸
     chartDom.style.height = window.innerHeight * 0.6 + 'px';
     myChart.resize(); // 必须调用的重绘方法
   });

3. ​​多端适配技巧

   // 移动端优化方案
   if(window.innerWidth < 768) {
     option.legend.orient = 'horizontal';
     option.legend.top = 'bottom';
     option.series[0].center = ['50%', '40%'];
   }

三、专业视觉增强方案

1. ​​悬浮提示定制

   tooltip: {
     formatter: '{a} <br/>{b}: {c} ({d}%)', // 自定义显示格式
     backgroundColor: 'rgba(30,136,229,0.9)' // 品牌色统一
   }

2. ​​数据标签优化

   label: {
     formatter: '{b}: {c}\n({d}%)', // 换行显示
     fontSize: 13,                  // 字号控制
     distanceToLabelLine: 5         // 标签与引导线间距
   }

3. 强调效果设计

   emphasis: {
     itemStyle: {
       shadowBlur: 10,              // 发光效果
       shadowColor: 'rgba(0,0,0,0.5)' 
     }
   }

四、企业级解决方案

1. ​​主题风格统一

   // 基于CSS变量配置
   :root {
     --primary-color: #1e88e5;
   }
   .explanation {
     border-left: 4px solid var(--primary-color);
   }

2. 图例分组管理

   legend: {
     data: [
       { name: '青少年', icon: 'circle' },
       { name: '青年', icon: 'rect' } // 自定义图标
     ]
   }

3. 大屏布局框架

   // 多图表组合布局
   grid: [{
     left: '5%', top: '10%', width: '45%', height: '40%'
   }, {
     right: '5%', bottom: '10%', width: '45%', height: '40%'
   }]