apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.1k stars 19.6k forks source link

[Feature] Hope "tooltip" supports "rich". 希望“tooltip”支持“rich” #17543

Open leekbillow opened 2 years ago

leekbillow commented 2 years ago

What problem does this feature solve?

目前tooltip不支持richrenderMode:'richText'似乎是一个没用的选项,在没有dom的微信小程序里,没办法自定义不同的样式。 Currently, richis not supported bytooltip, andrenderMode:'richText'seems to be a useless option. In wechat applets without DOM, there is no way to customize different styles.

option = {
  tooltip: {
    renderMode: 'richText',
    formatter({ name, value }) {
      return `{name|${name}}:{value|${value}}`;
    },
    // invalid 无效
    rich: {
      name: { color: 'red' },
      value: { color: 'blue' }
    },
    textStyle: {
      // invalid 无效
      rich: {
        name: { color: 'red' },
        value: { color: 'blue' }
      }
    }
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
};

What does the proposed API look like?

tooltip.rich or tooltip.textStyle.rich

echarts-bot[bot] commented 2 years ago

@leekbillow It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗

TRANSLATED
**TITLE** [Feature] Hope "tooltip" supports "rich". Hope "tooltip" supports "rich" **BODY** ### What problem does this feature solve? Currently `tooltip` does not support `rich`, `renderMode:'richText'` seems to be a useless option, in WeChat applet without dom, there is no way to customize different styles. Currently, `rich` is not supported by `tooltip`, and `renderMode:'richText'`seems to be a useless option. In wechat applets without DOM, there is no way to customize different styles. ````js option = { tooltip: { renderMode: 'richText', formatter({ name, value }) { return `{name|${name}}:{value|${value}}`; }, // invalid is invalid rich: { name: { color: 'red' }, value: { color: 'blue' } }, textStyle: { // invalid is invalid rich: { name: { color: 'red' }, value: { color: 'blue' } } } }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [120, 200, 150, 80, 70, 110, 130], type: 'bar' } ] }; ```` ### What does the proposed API look like? `tooltip.rich` or `tooltip.textStyle.rich`
susiwen8 commented 1 year ago

tooltip does suppot richText

xiaofan10 commented 1 year ago

I have the same problem

helgasoft commented 3 weeks ago

@leekbillow, instead of rich one could use HTML styles directly, like:

  tooltip: {
    renderMode: 'html',
    formatter({ name, value }) {
      return "<span style='color:red;'>"+name+" </span><span style='color:blue;'>"+value+"</span>";
    },