echarts常见问题记录（持续更新）

川长思鸟来 2022-10-28 03:50 401阅读 0赞

### echarts一些问题记录 ###

*   *   *  resize实时改变图表尺寸
         *  formatter解析html标签
         *  图表布局位置调整
         *  bar/line坐标轴name过长处理方案

### resize实时改变图表尺寸 ###

> 在容器大小发生改变时，实时改变图表尺寸

*  **页面只有单个图表** ：直接用`resize`函数
 *  **页面有多个图表** ： 用`addEventListener`
    
        window.addEventListener("resize", () => { 
        	myEcharts.resize();
        });

### formatter解析html标签 ###

> 仅`tooltip`的formatter 可以解析`html标签`

formatter: param => { 
    		const res = `<div style='color: red'> ${ param.name} </div>`;
    		return res;
    	}

### 图表布局位置调整 ###

> 图表布局位置调整

*  一般用 `grid`
    
        grid: [{ 
                left: '10%',
                bottom: '10%',
                top: '10%',
                right: '10%'
            }],
 *  pie饼图
    
        radius : [ '30%', '50%' ],//内外圆的大小
            center : [ '45%', '60%' ],//距离左右，上下距离的百分比
 *  map地图
    
        layoutCenter: ['48%', '50%'],//距离左右，上下距离的百分比
            layoutSize:'145%',//map百分比大小

### bar/line坐标轴name过长处理方案 ###

*  name较短的： 旋转角度rotate倾斜显示
 *  溢出省略…鼠标悬浮显示： 可以写个鼠标悬浮事件+弹窗，让鼠标悬浮时显示完整name（`注:` `triggerEvent: true`）
 *  折行拼接：超出几个字后就折行显示。举个小栗子（看具体业务做适当修改）。
    
        formatter: param => { 
              const nameFold = (name, sub) => { 
                if (!name.length) return "";
                const strLen = name.length;
                if (strLen > sub) { 
                  let sname = "";
                  const num = Math.ceil(strLen / sub);
                  for (let i = 0; i < num; i++) { 
                    sname +=
                      name.substr(
                        i * sub,
                        ["（", "）", "、"].some(i => name.includes(i))
                          ? sub
                          : (i + 1) * sub
                      ) + "<br/>";
                  }
                  return sname;
                } else { 
                  return name + "<br/>";
                }
              };
              // param.name 每20个字折行
              return nameFold(param.name, 20) + param.value;
            }

之后想到再补充…