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

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;
      }
  

之后想到再补充…