Let’s cut to the chase.

For example, here is the result:

The first thing that comes to mind when you see the figure is that after you pull the interface and process the data, you must calculate a total value and push it to the last item in the series. Then, in order to prevent the total value from being displayed accurately and in real time when you click hide Legend, you also need to add a LegendSelectChanged event. Methods that recalculate total values are handled when the event is triggered.

The above is the overall idea, specific how to achieve the effect of the style, there are two methods:

  • topushAdd the same to the total objecttype: 'bar'.Stack: 'total', setting values are displayed at the bottom of the aggregate bar chart, i.eposition: 'insideBottom', set the bar chart of total as transparent background
  • Set differentstrackorstrackJust set it to an empty string,typeFor the samebarIn this case, the total bar chart cannot be stacked to the top. In this case, you only need to setbarGap: '-100%'Ok, but also set the bar chart level of the totalz: 0Otherwise, the aggregate bar chart overwrites the actual tree chart. For details, seeechartsThe official API

Note: If method 1 is used, the value range of Y-axis will be twice as large, and the upper part of the graph will be empty, as shown in the following figure:

Therefore, it is troublesome to dynamically control the maximum value of the Y-axis.

Method 2 is relatively simple, a key implementation code is as follows:

// Series data for push totals
{
    name: 'total'.type: 'bar'.stack: ' '.label: {
        normal: {
            show: true.position: 'top'.color: '# 000'}},z: - 1.// The distance between columns of different series is a percentage. If you want the columns of two series to overlap, you can set barGap to '-100%'.
    barGap: '100%'.data: totalData
}
Copy the code

The following is the effect diagram of my actual project:

Above, recommend the second method personally, what is wrong place, welcome to correct ~