Echarts中修改坐标轴的多行文字样式

219 阅读1分钟

产品经理给出的需求

image.png

单轴副文本样式需要不一样

官网给出的文档中有提到 坐标轴的值可以添加富文本 不过有自己的格式

在此我的示例

比如后台传来的数据是[aabb,ccdd]

这个时候我们对数据进行处理

坐标轴的data:[aabb,ccdd]

首先我们需要换行,换行操作是写一个方法,replace ','成 '/n' 这样'/n'就会被转义成换行符

当初尝试过在data的数组中添加html标签.并没有生效

看了文档才知道有自己规定的模式

{class|aabb,class|ccdd}

 for (let i = 0; i < this.xName.length; i++) {
            this.xName[i] =
              "{aa|" +
              this.getCaption(this.xName[i], 0) +
              "}\n{bb|" +
              this.getCaption(this.xName[i], 1) +
              "}";
          }


data:this.xName