【echarts】使用过程中问题优化及处理

xAxis

1. 字数过长，换行显示

axisLabel: {
            // 坐标轴刻度标签的相关设置。
            interval: 0, // 设置为 1，表示『隔一个标签显示一个标签』
            //  margin:15,
            textStyle: {
              color: '#fff',
              fontStyle: 'normal',
              fontSize: 12
            },
            formatter: function(params) {
              var newParamsName = '';
              var paramsNameNumber = params.length;
              var provideNumber = 1; // 一行显示几个字，后续一行具体显示几个字，主要修改这个值
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
              if (paramsNameNumber > provideNumber) {
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = '';
                  var start = p * provideNumber;
                  var end = start + provideNumber;
                  if (p == rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    tempStr = params.substring(start, end) + '\n';
                  }
                  newParamsName += tempStr;
                }
              } else {
                newParamsName = params;
              }
              return newParamsName;
            }
            // rotate:50,
          },

2. 字数过长，省略展示

axisLabel: {
              color: '#fff',
              formatter: function(value) {
                if (value.length > 3) {
                  return `${value.slice(0, 3)}...`; // 超出3个字，...展示
                }
                return value;
              }
            },

3. x 轴只展示第一个和最后一个

axisLabel:{
    interval: xData.length - 1  // xData 为 x 轴数据
}

4. 只显示最后一个坐标值，其余的省略，且最后一个值不能超过区域空间

// length 为 x 轴上的数值集合长度       
const length = this.xData.length;
axisLabel: {
            showMaxLabel: true,
            rotate: 0,
            align: 'right', // 这个是关键
            formatter: function(params, index) {
              if (index === length - 1) {
                return params;
              }
              return '';
            }
          }
        }

yAxis

1. 缩放 脱离 0 值比例

yAxis：{
    type: 'value',
    	// 是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度
    	// 只在数值轴中（type: 'value'）有效。
    scale: true
}

配置前效果

配置后效果

series

1. pictorialBar 设置 各种具象图形元素时，当为负值时，具象图形没有根据值变动，可通过对 值的正负不同 处理设置 symbolOffset ，参考 echarts 配置文档 改变

series: [{
    data:[
    {
        value: '4.1',,
         symbolOffset: [0,-5] // 只对当前数据项生效
    },
    {
        value: '-2.2',,
         symbolOffset: [0,5] // 只对当前数据项生效
    }]
}]

后续遇到的相关也持续更新记录下