echarts图例换行时有textStyle，icon怎么顶部对齐?

Question

效果图是这样子的：

网上搜了一下formatter修改后 orient: 'vertical',也不生效了，图标也没有顶部对齐，但如果把textStyle去掉后是顶部对齐的，求实现效果图效果！

legend: {
      width: '100%',
      itemWidth: 8,
      itemHeight: 8,
      icon: 'roundRect',
      textStyle: {
        rich: {
          label: {
            fontSize: 12,
            lineHeight: 16,
            color: '#73767D',
          },
          value: {
            fontSize: 20,
            lineHeight: 24,
            padding: [4, 0, 0, 0],
            color: '#17181A',
          },
        },
      },
      right: '0',
      top: '10',
      height: '100px',
      data: ['境内企业(不含港澳台)', '境外企业'],
      orient: 'vertical',
      formatter: (name) => {
        const value = name === '境内企业(不含港澳台)' ? options.jn : options.jw;
        let params1 = `{label|${name}}\n{value|${value}}`;
        let tmp = params1.split('\n');
        let res = '' + params1;
        for (let i in tmp) {
          res = res.replace(tmp[i], '');
        }
        return res + params1;
      },
    },

Answer 1

你 formatter 前两行就基本可以完成的事

formatter: (name) => {
  const value = name === '境内企业(不含港澳台)' ? options.jn : options.jw;
  return `{label|${name}}\n{value|${value}}`;
}

后面一顿操作得到了个 res = '\n'，所以不是orient: 'vertical'不生效了，而是你拼了个换行符

formatter: (name) => {
  const value = name === '境内企业(不含港澳台)' ? options.jn : options.jw;
  let params1 = `{label|${name}}\n{value|${value}}`;
  let tmp = params1.split('\n');
  let res = '' + params1;
  for (let i in tmp) {
    res = res.replace(tmp[i], '');
  }
  // res 值为 \n
  return res + params1;
}

基于前两行得到的效果大致是这样的

然后再配置一下 textStyle 的 padding，调整一下上边距即可

修改后的代码如下，根据实际情况调整

legend: {
  width: '100%',
  itemWidth: 8,
  itemHeight: 8,
  icon: 'roundRect',
  textStyle: {
    padding: [22, 0, 0, 0],
    rich: {
      label: {
        fontSize: 12,
        lineHeight: 16,
        color: '#73767D',
      },
      value: {
        fontSize: 20,
        lineHeight: 24,
        padding: [4, 0, 0, 0],
        color: '#17181A',
      },
    },
  },
  right: '0',
  top: '10',
  height: '100px',
  data: ['境内企业(不含港澳台)', '境外企业'],
  orient: 'vertical',
  formatter: (name) => {
    const value = name === '境内企业(不含港澳台)' ? options.jn : options.jw;
    return `{label|${name}}\n{value|${value}}`;
  },
},