【Echart系列1—— 横轴文字格式化、图表宽度自适应问题】

X轴常见格式化问题

在日常开发中用Echart.js绘制图表时经常会碰到需要修改X轴显示文字格式的情况，通常有以下几种类型：

① 文字竖向排列,如下图

关键代码如下：

  xAxis: {
    type: 'category',
    axisLabel: {
      formatter:function(value){
        return value.split("").join("\n")
      },
    },
    data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
  }

② 文字倾斜显示，如下图

 关键代码如下：

xAxis: {
    type: 'category',
    axisLabel: {
      rotate: 40 ,
    },
    data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
  },

 ③ 鼠标悬浮显示百分号

关键代码如下：

tooltip: {
    trigger: 'axis',
    formatter: function(params) {
        var result = params[0].name + "
";
        params.forEach(function(item) {
          if (item.value) {
              result += item.marker + " " + item.seriesName + " : " + item.value + "%
";
          } else {
              result += item.marker + " " + item.seriesName + " :  - 
";
          }
        });
        return result;
    }
  },

 宽度自适应问题

关键代码如下：

 以上为vue中添加自适应的方法，需要注意的是移除监听事件，否则多次注册windows监听事件会造成页面卡顿的问题