Vue3+Echarts中label中formatter自定义元素

397 阅读1分钟

vue3项目中使用echarts,我使用的是tree图(echart示例),现在有个地方想实现的效果是如下图(这张图就是我已经实现的效果),就是在前端加个标签。我本来想在formatter里面return <span><span>,结果显示的是整个html代码,不是我要的效果,然后就去仔细看了下配置项,使用另一种方式实现了。

30ba1bbe072f9a764febcd8cf72cf45.png

思路

formatter中把自定义字段赋值给b或c(label中formatter配置项),再在rich中给b或c添加样式即可。

实现

label: {
    formatter: function(params) {
        // data.type赋值给b,name赋值给c
        return `{b|${params.data.type}}{c|${params.name}}`
    },
    rich: {
        // 给b或c各自添加样式
        b: {},
        c: {}
    }
}

可参考label中rich配置项