解决Echarts x轴数据与图片位置不匹配,以及x轴数据不展示问题

1、数据不匹配问题

解决Echarts x轴数据与图片位置不匹配,以及x轴数据不展示问题_第1张图片

解决方法:

在xAxis 中插入axisLabel属性并设置该属性的interval值为0即可解决

解决Echarts x轴数据与图片位置不匹配,以及x轴数据不展示问题_第2张图片
axisLabel:{
       interval:0
}

2、设置x轴长度不超过指定字符长度替换为省略号

解决Echarts x轴数据与图片位置不匹配,以及x轴数据不展示问题_第3张图片

只需要在xAxis中添加formatter属性对value值进行格式化

解决Echarts x轴数据与图片位置不匹配,以及x轴数据不展示问题_第4张图片
lineOption.xAxis = {
   data: xAxis,
   axisLabel: {
        formatter: function(value) {
                       if (value.length > 6) {
                           return `${value.slice(0,5)}...`;
                        }
                         return value
                   },
                   interval:0
    },
                        
}

你可能感兴趣的:(Echart使用,echarts,vue.js)