Echarts 问题解决 —— 设置图例、提示框上下角标；坐标轴文字过多显示不全、文字竖直一列显示、让坐标轴类目隔一个换一行；

目录

1.设置图例、提示框上下角标

1.1 修改弹框内容的方法

1.2 修改图例文字的方法

1.3 在 rich 中单独设置角标

1.4 实战

2.坐标轴文字过多显示不全

2.1 方法一：将 坐标轴上的文字 强制显示完整，并进行倾斜

2.2 方法二：利用 formatter，让文字竖直一列显示

2.3 方法三：利用 formatter，让坐标轴类目隔一个换一行

---

1.设置图例、提示框上下角标

• 效果展示：
• formatter: function (name) {
•     return name + '% '; // 将每个图例后面加上 %
  }
• 可以将文字变成指定格式，比如上面
• 假设图例是 1，2，3，那么处理之后的图例变成 1% 2% 3%
• ———————————————————————————————————————

1.1 修改弹框内容的方法

• 给 角标 添加单独的 标签，标签样式在 legend > textStyle > rich 中设置
• str.replace("原内容","<标签> 角标 </标签> 正常文字")
• function replaceHtmlWord(str) {
      return str.replace("2NO", "²NO")
                .replace("值得", "值<wsb>得</wsb>")
                .replace("PM2.5", "PM_2.5")
                .replace("PM天然", "PM<wxb>天然</wxb>")
  }
• replace("2NO", "²NO") 解释：
• 2是角标，NO是正常文字，<sup>是修饰角标2的标签，样式在 rich 中设置
• ———————————————————————————————————————

1.2 修改图例文字的方法

• 给 角标 添加单独的 类名，类名样式在 legend > textStyle > rich 中设置
• str.replace("原内容","{ 类名 | 角标 } 正常文字")
• function replaceWords(str) {
      return str.replace("值得", "值{wsb|得}")
                .replace("2NO", "{sup|2}NO")
                .re