Echarts可视化x轴或y轴文字换行,添加省略号

这里写自定义目录标题

  • x轴文字换行,y轴同理
      • 效果图
  • 文字太多想添加省略号
      • 效果图

x轴文字换行,y轴同理

  xAxis: [{
                    type: "category",
                    splitLine: {
                        show: false
                    },
        
                    axisLabel: {
                        interval: 0,
                        textStyle: {
                            color: "#fff",
                            fontSize: 14,
                            lineHeight: 16,
                        },
                        rich: {//这里主要是设置样式,详情可查Echarts官方教程
             //Echarts官方教程地址://https://echarts.apache.org/zh/option.html#xAxis.axisLabel.rich
                            Sunny: {
                                padding: [0, 5, 0, 5],
                                align: 'left',
                            },
                        },
                        //这里就是重点
                        formatter: function (params, index) {
                            var newParamsName = "";
                            var splitNumber = 5;
                            var paramsNameNumber = params && params.length;
                            if (paramsNameNumber && paramsNameNumber <= 4) {
                                splitNumber = 4;
                            } else if (paramsNameNumber >= 5 && paramsNameNumber <= 7) {
                                splitNumber = 4;
                            } else if (paramsNameNumber >= 8 && paramsNameNumber <= 9) {
                                splitNumber = 5;
                            } else if (paramsNameNumber >= 10 && paramsNameNumber <= 14) {
                                splitNumber = 5;
                            } else {
                                params = params && params.slice(0, 15);
                            }

                            var provideNumber = 7; //一行显示几个字
                            var rowNumber = Math.ceil(paramsNameNumber / provideNumber) || 0;
                            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;
                            }
                            params = newParamsName
                            //给他添加样式
                            return '{Sunny|' + params + '}';
                        },
                    }
                }],

效果图

Echarts可视化x轴或y轴文字换行,添加省略号_第1张图片

文字太多想添加省略号

  xAxis: [{
                        type: "category",
                        splitLine: {
                            show: false
                        },
                          axisLabel: {
                            interval: 0,//x轴中间隔几个数据,默认是1
                            textStyle: {
                                color: "#fff",
                                fontSize: 14,
                                 lineHeight: 16,
                            },
                              formatter: function (params) {
                                  let valueTxt = ''
                                  let textNum = 4
                                  if (params.length > textNum) {
                                      valueTxt = params.substring(0, textNum) + '...'
                                  } else {
                                      valueTxt = params
                                  }
                                  return valueTxt
                              },
                        }
                    }],

效果图

Echarts可视化x轴或y轴文字换行,添加省略号_第2张图片

你可能感兴趣的:(echarts,vue.js,前端)