Some time ago, there was a visual page, in which there is a module that deals with the need to have multiple bar graphs in each X-axis interval

The first option

I saw the design draft for the first time and felt it was not very difficult (I stepped on a pit as a result), so I wrote it out specially to record it.

This is the graph made for the first time, but it was found to be too different from the demand graph (the simulation data was not written so much at that time, so the style problem of data full lattice was not completely seen).

The graph required is in the interval of X-axis. When the data is stable, the interval of X-axis can be filled, but this method cannot be filled, and the column is too small to be convenient to watch (for large screen).

The following picture shows the effect of the first simulation data (at that time, I still thought the module was simple). At that time, I thought that this should be enough, and did not consider the problems caused by Echarts adaptive when there was a lot of data.

This scheme, although it can also meet the data in time, but the display effect is too poor. So the author reimagined the second plan.

Second option

A few days ago I looked at the echarts attribute documentation, but I couldn’t find a solution to the first solution, the problem of spacing each X-axis interval. So I switched to this new plan. (I searched and searched on the official website, found a similar image, and suddenly had an idea.)

The first approach is to treat each interval as a block, bound by an X-axis name, which is fine in theory, but ugly in style. The new idea is to treat each scale as an object. After simulating the data, it was found that it could achieve the appearance of THE UI diagram (without too thin columns due to adaptation), so this scheme was adopted.

The example was developed under VUE 3.0.

So how do you use Echarts in VUE 3.0

  1. npm install echarts –save
  2. The dependency is then imported into the main.js file. There is an on-demand import mode, which is used globally in this example.
  3. import * as echarts from 'echarts'
  4. The way vue3.0 mounts new properties has also changed
  5. app.config.globalProperties.echarts = echarts
  6. Then use it on the desired page

The data is also fixed (upper limit 96, which is directly used in the simulation) with 12 scales in 8 intervals. The idea is to divide it into eight arrays, each containing eight ranges of values. And then each of the 12 scales takes the value of each of the subscripts in the eight intervals.

Then use the following code to generate the bar chart, and throw the generated barList into the series in echarts.

      for(let i = 0; i < 12; i++) {
        let item = dataList[i]
        if(item) {
          barList.push({
            type:'bar',
            data: item
          })
        }
      }`
Copy the code

Effect:

In this way, the design is successfully restored, and the columns do not become very small when the data is full.

Thank you.