One of the most common visual components of this chapter is the Tooltip, which helps users interactively understand the details of the data. Guo Baokun convention: come up to see a demo first

<template>
   <div id="chart"></div>
</template>

<script>
    import * as echarts from 'echarts'
    let myChart = null,
    
    tooltip = {
        // Do not write anything at first
    },
    
    xAxis= {
        type: 'category'.data: ['The Manager'.'Lin Wan 'er']
    },
    
    series = [
        { name: 'Charm score'.type: 'bar'.data: [99.95] {},name: 'Force value'.type: 'bar'.data: [70.20]}];const options = {     
        tooltip,
        xAxis,
        yAxis: {},
        series
    };
    
    ~function init() {
        myChart = echarts.init(document.getElementById('chart')); // Wait for the DOM to load
        myChart.setOption(options)  
    }() 
</script>
Copy the code

Effect:

We can obviously see that the secretary girl is better…

Trigger mode (item/axis/None)

The tooltip above only shows one of these (charms), because the default trigger for tooltip is ‘item’. There are actually three values to choose from. Let’s look at the other two

// item: data item graph trigger, mainly used in scatter chart, pie chart and other charts without category axis.
// This is used in bar charts, line charts, etc., where the 'category axis' is used.
// None: nothing is triggered. This is different from show: false. (Leave a message if you know)
tooltip = {
    trigger: 'axis'};Copy the code

You can see that Axis displays the “all” feature values for the manager

The category axis is the horizontal axis. The category axis is the horizontal axis. ‘category’), non-category axis commonly has three kinds: time, value and log. For example, li Li and Lin Wan ‘er on the x axis above are category axis. Those, such as 2018~2021, are non-category axis

Optimization of style

Next, how can we modify the Tootip appearance style

tooltip = {
    ...
    backgroundColor: 'rgba (50,50,50,0.7)'./ / the background color
    textStyle: {
        color: '#fff'.// Text color
        align:'left'./ / left alignment
        //overflow: 'truncate' when overflow... (You need to set width)}}Copy the code

Effect:

The sorting

tooltip = {
    ...
    order: 'valueAsc'  // Arrange the data in ascending order according to the data value.
}
Copy the code

Effect:

As you can see, the smaller force values are listed above. By default, they are listed in sequence

extraCssText

Additional CSS styles attached to the floating layer. This humble property can set a lot of things!!

tooltip = {
     ...
     extraCssText: 'width: 130px; height: 150px; '
}
Copy the code

Effect:

Note: This attribute takes precedence over the ontology style

tooltip = {
    ...
    extraCssText: ' border-color: blue; '.borderColor: 'red',},Copy the code

This renders the border color blue, regardless of the order in which it was written.

formatter

Sometimes you need to add a special notation to the value, such as colons, parentheses, and hyphens, and you need a formatter

tooltip = {
    ...
    formatter: '{a0} ({c0})<br />{a1}: {c1}',}Copy the code



A0 C0 above… {a}, {b}, {c}, {d}, {b}, {c}, {d}, {a}, {b}, {c}, {d}, {a}, {b}, {c}, {d

  • A: Name of the series
  • B: Data name
  • C: numerical
  • D: Percentage (often used in pie charts)

A0 c0 above represents the subscript 0, which corresponds to the subscript of series. If a1 is written before A0 and after a0, then “tootip” shows that force value is up and charm value is down, which can be used for sorting according to needs

The last whisper

    'fly on the branches are funny, occupied the nest are secretly happy'
Copy the code