Mastering ECharts Tooltips: How to Get Data by Using String Template

Are you tired of dealing with clunky and inflexible tooltips in your ECharts visualizations? Do you want to unlock the full potential of your data and present it in a clear and concise manner? Look no further! In this comprehensive guide, we’ll dive into the world of string templates and show you how to get data by using this powerful feature in ECharts tooltips.

What are ECharts Tooltips?

ECharts tooltips are small, interactive windows that appear when you hover over or click on a data point in your chart. They provide additional information about the data, such as values, labels, and other relevant details. By default, ECharts tooltips display basic information, but with string templates, you can customize them to display exactly what you need.

Why Use String Templates in ECharts Tooltips?

• Flexibility**: String templates allow you to define the structure and content of your tooltips, giving you complete control over the information displayed.
• Customization**: With string templates, you can tailor your tooltips to fit your specific needs, whether it’s displaying complex calculations, conditional statements, or even external data.
• Readability**: By formatting your tooltips with string templates, you can make your data more readable and easier to understand, which is essential for effective data visualization.

Basic String Template Syntax

A string template in ECharts is a string that contains placeholders for data values, which are replaced with actual values when the tooltip is rendered. The basic syntax is as follows:

{variable_name}

In this syntax, `variable_name` is the name of the variable that you want to display in the tooltip. For example, if you want to display the value of the `x` axis, you would use `{x}`.

Example 1: Displaying Basic Data Values

Let’s create a simple line chart with a tooltip that displays the `x` and `y` values:

option = {
  tooltip: {
    trigger: 'axis',
    formatter: '{b0}: {c0}'
  },
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'line'
    }
  ]
};

In this example, the tooltip will display the category label (`{b0}`) and the corresponding value (`{c0}`). The `b0` and `c0` placeholders are used to access the `x` and `y` values, respectively.

Example 2: Displaying Calculated Values

Let’s create a bar chart with a tooltip that displays the percentage of each bar:

option = {
  tooltip: {
    trigger: 'axis',
    formatter: '{b0}: {c0} ({d}%)'
  },
  xAxis: [
    {
      type: 'category',
      data: ['A', 'B', 'C', 'D', 'E']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      data: [10, 20, 30, 40, 50],
      type: 'bar'
    }
  ]
};

In this example, the tooltip will display the category label (`{b0}`), the value (`{c0}`), and the percentage (`{d}%`). The `d` placeholder is used to access the percentage value, which is calculated using the `c0` value.

Conditional Statements in String Templates

Conditional statements allow you to customize your tooltips based on specific conditions. For example, you can display different messages or values depending on the data values or other conditions.

option = {
  tooltip: {
    trigger: 'axis',
    formatter: '{b0}: {c0} {c0 > 30 ? "High" : "Low"}'
  },
  xAxis: [
    {
      type: 'category',
      data: ['A', 'B', 'C', 'D', 'E']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      data: [10, 20, 30, 40, 50],
      type: 'bar'
    }
  ]
};

In this example, the tooltip will display the category label (`{b0}`), the value (`{c0}`), and either “High” or “Low” depending on whether the value is greater than 30 or not.

Nesting String Templates

Nesting string templates allows you to create complex and flexible tooltips. You can use nested templates to display multiple values, conditional statements, or even external data.

option = {
  tooltip: {
    trigger: 'axis',
    formatter: '{b0}: {c0} ({d}%) {c0 > 30 ? "High" : "Low"} ({seriesName})'
  },
  xAxis: [
    {
      type: 'category',
      data: ['A', 'B', 'C', 'D', 'E']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Series 1',
      data: [10, 20, 30, 40, 50],
      type: 'bar'
    }
  ]
};

In this example, the tooltip will display the category label (`{b0}`), the value (`{c0}`), the percentage (`{d}%`), a conditional statement (`{c0 > 30 ? “High” : “Low”}`), and the series name (`{seriesName}`).

External Data in String Templates

You can also use external data in your tooltips by accessing external variables or datasets.

var externalData = [
  {name: 'A', description: 'Description A'},
  {name: 'B', description: 'Description B'},
  {name: 'C', description: 'Description C'},
  {name: 'D', description: 'Description D'},
  {name: 'E', description: 'Description E'}
];

option = {
  tooltip: {
    trigger: 'axis',
    formatter: function(params) {
      var name = params.name;
      var description = externalData.find(function(item) {
        return item.name === name;
      }).description;
      return '{b0}: {c0} - ' + description;
    }
  },
  xAxis: [
    {
      type: 'category',
      data: ['A', 'B', 'C', 'D', 'E']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      data: [10, 20, 30, 40, 50],
      type: 'bar'
    }
  ]
};

In this example, the tooltip will display the category label (`{b0}`), the value (`{c0}`), and the corresponding description from the external data array.

Conclusion

In this comprehensive guide, we’ve covered the basics of string templates in ECharts tooltips and demonstrated how to use them to create custom and flexible tooltips. By mastering string templates, you can unlock the full potential of your ECharts visualizations and present your data in a clear and concise manner.

Remember, with great power comes great responsibility. Use string templates wisely and creatively to create engaging and informative tooltips that will make your data shine!

Keyword	Description
String Template	A string that contains placeholders for data values, which are replaced with actual values when the tooltip is rendered.
{variable_name}	A placeholder for a data value, such as x, y, or seriesName.
Conditional Statement	A statement that allows you to customize your tooltips based on specific conditions.
Nested String Template	A string template that contains another string template, allowing for complex and flexible tooltips.
External Data	Data that is accessed from outside the chart, such as an external array or dataset.

By following this guide, you’ll be well on your way to creating amazing ECharts visualizations with custom and flexible tooltips. Happy charting!

Here are 5 Questions and Answers about “How to get data by using string template in echarts tooltip”:

Frequently Asked Question

Get the lowdown on how to harness the power of string templates in echarts tooltips to fetch the data you need!