BUG: tooltip with html not working on the H5 site created by uniapp

[wenjie-kooboo]

Version

4.9.0

Steps to reproduce

The example as follows is working on normal web site, but it is not working on the H5 site which is created by uniapp:

option = {
    title: {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: function() {
            return '<div style="color:red">Hello world</div>';
        }
    },
    legend: {
        orient: 'vertical',
        left: 'left',
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [
                {value: 1048, name: '搜索引擎'},
                {value: 735, name: '直接访问'},
                {value: 580, name: '邮件营销'},
                {value: 484, name: '联盟广告'},
                {value: 300, name: '视频广告'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

What is expected?

The text in tooltip should be red

What is actually happening?

the text with html tags is showing

---

In "zrender\lib\core\env.js" line 12, I found this code:

 if (typeof wx === 'object' && typeof wx.getSystemInfoSync === 'function') {

but the site created by uniapp , typeof wx === 'object' && typeof wx.getSystemInfoSync === 'function' is true.
for example, this site https://hellouniapp.dcloud.net.cn/, you can open Console of Chrome, and run typeof wx === 'object' && typeof wx.getSystemInfoSync === 'function', you can see it's true, but it's not wechat application.

[echarts-bot]

Hi! We've received your issue and please be patient to get responded. 🎉
The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical question.

If you are interested in the project, you may also subscribe our mailing list.

Have a nice day! 🍵

[Ovilia]

Try using 'richText' for renderMode, which renders the tooltip inside the Canvas rather than taking an extra DOM element.

[wenjie-kooboo]

Hi @Ovilia , I tried 'richText' and I found it's not working on tooltip even on the official site https://echarts.apache.org/examples/en/editor.html?c=pie-simple. For example:

option = {
    title: {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        left: 'center'
    },
    label: {
         formatter: function() {
            return '{a|hello world}'
        },
        rich: {
            a: {
                color: 'red',
                fontSize: 20
            }
        },
    },
    tooltip: {
        trigger: 'item',
        renderMode: 'richText',
        formatter: function() {
            return '{a|hello world}'
        },
        rich: {
            a: {
                color: 'red',
                fontSize: 20
            }
        },
    },
    legend: {
        orient: 'vertical',
        left: 'left',
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [
                {value: 1048, name: '搜索引擎'},
                {value: 735, name: '直接访问'},
                {value: 580, name: '邮件营销'},
                {value: 484, name: '联盟广告'},
                {value: 300, name: '视频广告'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

I found it's working on label, but it's not working on tooltip.

[Ovilia]

It should be

option = {
    title: {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        renderMode: 'richText'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [
                {value: 1048, name: '搜索引擎'},
                {value: 735, name: '直接访问'},
                {value: 580, name: '邮件营销'},
                {value: 484, name: '联盟广告'},
                {value: 300, name: '视频广告'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

[wenjie-kooboo]

Hi @Ovilia , I want to use the formatter function to custom the tooltip. For example, I want to make the words "hello world" red.

 tooltip: {
        trigger: 'item',
        renderMode: 'richText',
        formatter: function() {
            return '{a|hello world}'
        },
        rich: {
            a: {
                color: 'red',
                fontSize: 20
            }
        },
    },