你这种formatter写法会直接把html标签显示在浏览器中

是的，如果使用类似上面提到的方式来设置节点的 `formatter` 属性，会将 HTML 标签直接显示在浏览器中。这是因为 Echarts 的 `formatter` 属性用于设置节点的文本内容，可以支持 HTML 标签来实现富文本效果，但是这也会导致 HTML 标签在浏览器中被解析并显示出来。

如果想要避免 HTML 标签在浏览器中被解析的问题，可以使用 Echarts 提供的 `rich` 属性来实现富文本效果。具体实现方式如下：

1. 在 Echarts 的 `option` 对象中，针对树状图的 `series` 属性中的 `data` 数组中每个节点的 `label` 属性中设置 `rich` 属性，例如：

label: {
  rich: {
    image: {
      height: 20,
      width: 20,
      backgroundColor: {
        image: 'path/to/image.png'
      }
    },
    name: {
      color: '#333',
      fontSize: 14,
      fontFamily: 'Microsoft YaHei'
    }
  },
  formatter: function(params) {
    // 这里的params是节点数据对象，可以通过params来获取节点的id、name等信息
    var imageStyle = ''; // 判断节点类型，根据节点类型设置不同的图片样式
    if (params.type === 'type1') {
      imageStyle = '{backgroundColor: {image: "path/to/type1/image.png"}}';
    } else if (params.type === 'type2') {
      imageStyle = '{backgroundColor: {image: "path/to/type2/image.png"}}';
    }
    // 返回富文本字符串模板
    return '{image|' + imageStyle + '}' + '{name|' + params.name + '}';
  }
}

2. 在以上代码中，通过在 `label` 属性中设置 `rich` 属性来定义不同的富文本样式，例如 `image` 和 `name`，并通过设置样式的属性来实现不同的效果，例如设置 `backgroundColor` 属性来设置图片的背景颜色、设置 `color` 属性来设置文本颜色等。

3. 在以上代码中，通过在 `formatter` 属性中返回一个富文本字符串模板，并通过 `|` 符号来指定富文本的样式名称，例如 `{image|}` 和 `{name|}`，并在模板中通过 `+` 符号来拼接不同的富文本内容。

需要注意的是，以上代码只是一个示例，具体的实现方式需要根据具体的需求和数据结构来进行修改和调整。