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")
                .replace("PM2.5", "PM{sub|2.5}")
                .replace("PM天然", "PM{wxb|天然}");
  }
• replace("2NO", "{sup|2}NO") 解释：
• 2是角标，NO是正常文字，{sup | } 是修饰角标2的类名，样式在 rich 中设置
• ———————————————————————————————————————

1.3 在 rich 中单独设置角标

•         textStyle:{
              // 未单独设置样式的图例（即非上下标）
              lineHeight: 12,
              verticalAlign: "middle",
              // 单独设置样式的图例（即上下标）
              rich: {
                  // 数字下标
                  sub: {
                      verticalAlign: "bottom",
                      fontSize: 8
                  },
                  // ......
                  // 文字上标
                  wsb: {
                      verticalAlign: "top",
                      fontSize: 7,
                  }}}
• ———————————————————————————————————————

1.4 实战

• 

// 修改弹框内容用到的方法
function replaceHtmlWord(str) {
    return str.replace("2NO", "<sup>2</sup>NO")
              .replace("值得", "值<wsb>得</wsb>")
              .replace("PM2.5", "PM<sub>2.5</sub>")
              .replace("PM天然", "PM<wxb>天然</wxb>")
}
// 修改图例文字用到的方法
function replaceWords(str) {
    return str.replace("值得", "值{wsb|得}")
              .replace("2NO", "{sup|2}NO")
              .replace("PM2.5", "PM{sub|2.5}")
              .replace("PM天然", "PM{wxb|天然}");
}
option = {
    tooltip : {
        trigger: 'axis',
        axisPointer : {
            type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter:function(v){
            var html = '';
            $.each(v, function() {
                html += '<p>'
                html += this.seriesName + "：" + this.value
                html += '</p>'
            });
            return replaceHtmlWord(html);
        }
    },
    legend: {
        data: ['PM天然', 'PM2.5', '2NO', '值得'],
        // 图例整体的位置
        right:20,
        top:10,
        // 图例图案的宽高
        itemWidth:16,
        itemHeight:11,
        // 使用自定义方法处理图例文本
        formatter:function(name){
            return replaceWords(name);
        },
        // 设置文本样式
        textStyle:{
            // 未单独设置样式的图例（即非上下标）
            lineHeight: 12,
            verticalAlign: "middle",
            fontSize: 12,
            color:"#fff",
            // 单独设置样式的图例（即上下标）
            rich: {
                // 数字下标
                sub: {
                    verticalAlign: "bottom",
                    fontSize: 8
                },
                // 数字上标
                sup: {
                    verticalAlign: "top",
                    fontSize: 8
                },
                // 文字下标
                wxb: {
                    verticalAlign: "bottom",
                    fontSize: 7,
                },
                // 文字上标
                wsb: {
                    verticalAlign: "top",
                    fontSize: 7,
                }
            }
        }
    },
    ...
};

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

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

• interval：如果设置为 1，表示隔一个标签显示一个标签，以此类推
• rotate：表示倾斜角度，旋转之后可能超出图表范围，此时可以结合 grid 进行控制

axisLabel: {  
   interval: 0, // 强制显示完整
   rotate: 40 // 文字倾斜
}  
grid: { // 和 rotate 搭配，防止文字被遮挡
    left: '10%',  
    bottom:'35%'  
},  

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

• formatter:function (value,index) {} 

1. value：类目值
2. index：索引值

// 一个字一行（就是说竖直展示）
axisLabel: {  
      interval: 0,  
      formatter:function(value) {  
             return value.split("").join("\n");  
         }  
  } 

// 两个字一行
axisLabel: {  
      interval: 0,  
      formatter:function(value) {  
          var ret = ""; // 拼接加 \n 返回的类目项  
          var maxLength = 2; // 每项显示文字个数  
          var valLength = value.length; // X轴类目项的文字个数  
          var rowN = Math.ceil(valLength / maxLength); // 类目项需要换行的行数  
          if (rowN > 1)
          {  
              for (var i = 0; i < rowN; i++) {  
                  var temp = ""; // 每次截取的字符串  
                  var start = i * maxLength; // 开始截取的位置  
                  var end = start + maxLength; // 结束截取的位置   
                  temp = value.substring(start, end) + "\n";  
                  ret += temp; // 拼接最终字符串  
              }  
              return ret;  
          }  
          else {  
              return value;  
          }  
      }  
  }  

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

axisLabel: {  
      interval: 0,  
      formatter:function(value,index) {  
          if (index % 2 != 0) {  
              return '\n\n' + value;  
          }  
          else {  
              return value;  
          }  
      }  
  }