[ECharts series] ECharts chart rendering problems & solutions

1 Problem description

For echats rendering, only the Y-axis value appears at the first time, and the X-axis value does not appear. Switch to the next page, and the X-axis value will appear.

2 Reason analysis

 If the X-axis value only appears after switching pages when using ECharts to render, it may be because ECharts did not correctly calculate the size of the X-axis during initialization.

The following are possible causes and solutions:

1. data format is incorrect
2. The type of the X-axis is not set
3. The relevant properties of the X-axis are not set
4. too much data
5. X-axis range not set
6. The resize method is not called
7. The data monitoring method is incorrect

2.1 The data format is incorrect

ECharts requires that the data format of the X-axis must be an array, and each element in the array must be a string type.

If the data format of the X-axis is incorrect, it may cause the X-axis to not be displayed correctly. Please check if the data format of the X-axis is correct, and try to convert the data of the X-axis to the correct format.

2.2 The type of X axis is not set

ECharts supports various types of X-axis, such as category, time, value, etc. If the type of the X-axis is not set, the X-axis may not be displayed correctly. Please set the X-axis type in the configuration item of ECharts, and make sure the type matches the data format of the X-axis.

2.3 The relevant properties of the X-axis are not set

In ECharts, there are some related properties of the X axis that need to be set, such as axisLabel, axisLine, axisTick, etc. If these properties are not set correctly, the X-axis may not be displayed correctly. Please set the relevant properties of the X-axis in the configuration items of ECharts, and make sure that the properties are set correctly.

2.4 Too much data

If the amount of data on the X-axis is too large, the X-axis may not be displayed correctly. Please try to narrow down the data range of the X-axis and use the zoom function of ECharts to view it.

2.5 The range of the X-axis is not set

In ECharts, the range of the X axis can be controlled by setting the min and max properties. If the X-axis range is not set correctly, it may cause errors when ECharts calculates the X-axis size. Please set the range of the X-axis in the configuration item of ECharts, and make sure the range is set correctly.

2.6 The resize method is not called

When switching pages, the browser window size may change, which may cause errors when ECharts calculates the X-axis size. To solve this problem, you can call the resize method of ECharts after switching pages to force ECharts to recalculate the size. Please call the resize method of ECharts after page switching, and make sure the method is called correctly.

If only the Y-axis appears but not the X-axis when rendering with ECharts for the first time, you can troubleshoot and solve the above possible reasons.

 3 How to set the range of X-axis?

In ECharts, you can control the range of the X-axis by setting the min and max properties of the X-axis. Here's how to set the X-axis range:

3.1 Setting a fixed range

If you need to fix the range of the X-axis, you can directly set the values ​​of the min and max attributes. For example, the following code sets the X-axis range from 0 to 100:

option = {
    xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E'],
        min: 0,
        max: 100
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        type: 'bar',
        data: [10, 20, 30, 40, 50]
    }]
};

3.2 Automatically calculate the range based on the data

If you want to automatically calculate the range of the X-axis based on the data, you can set the values ​​of the min and max properties to 'auto', and ECharts will automatically calculate the range of the X-axis based on the data. For example, the following code sets the X-axis range to be calculated automatically:

option = {
    xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E'],
        min: 'auto',
        max: 'auto'
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        type: 'bar',
        data: [10, 20, 30, 40, 50]
    }]
};

In this example, ECharts will automatically calculate the range of the X-axis according to the data, so that all data can be displayed correctly on the X-axis.

You can control the range of the X-axis by setting the min and max properties, and choose different methods to set the range of the X-axis according to your needs.

4 How to set the interval of X-axis? 

In ECharts, you can control the interval of the X-axis by setting the interval property of the X-axis.

Here's how to set the X-axis interval:

1. Set a fixed interval
2. Automatically calculate intervals based on data

4.1 Set a fixed interval

If you need to fix the interval of the X-axis, you can directly set the value of the interval attribute. For example, the following code sets the interval of the x-axis to 2:

option = {
    xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E'],
        interval: 2
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        type: 'bar',
        data: [10, 20, 30, 40, 50]
    }]
};

In this example, the X-axis interval is set to 2, so the distance between two adjacent data points is the width of 2 data points.

4.2 Automatic calculation of intervals based on data

If you want to automatically calculate the interval of the X-axis according to the data, you can set the value of the interval attribute to 'auto', and ECharts will automatically calculate the interval of the X-axis according to the data. For example, the following code sets the interval for the X-axis to be calculated automatically:

option = {
    xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E'],
        interval: 'auto'
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        type: 'bar',
        data: [10, 20, 30, 40, 50]
    }]
};

In this example, ECharts will automatically calculate the interval of the X-axis according to the data, so that all data can be displayed correctly on the X-axis.

You can control the interval of the X-axis by setting the interval attribute, and choose different methods to set the interval of the X-axis according to your needs.

5 How to call the resize method

In ECharts, the size of the chart can be recalculated by calling the resize method. Here's how to call the resize method:

1. Call the resize method directly
2. Listen for window size changes and call the resize method

5.1 Call the resize method directly

You can directly call the resize method of the ECharts instance in the JavaScript code, for example:

var myChart = echarts.init(document.getElementById('myChart'));
// 在需要重新计算尺寸的时候调用resize方法
myChart.resize();

In this example, first create an ECharts instance and bind it to an HTML element. Then, call the resize method when the size needs to be recalculated, and ECharts will recalculate the size of the chart.

5.2 Monitor window size changes and call the resize method

If you need to automatically recalculate the size of the chart when the size of the browser window changes, you can listen to the resize event of the window and call the resize method when the event occurs. For example:

var myChart = echarts.init(document.getElementById('myChart'));
// 监听窗口的resize事件
window.addEventListener('resize', function () {
  // 调用resize方法
  myChart.resize();
});

In this example, first create an ECharts instance and bind it to an HTML element. Then, listen to the resize event of the window, and call the resize method when the event occurs, and ECharts will automatically recalculate the size of the chart.

In short, you can recalculate the size of the chart by calling the resize method directly or listening to the window size change and calling the resize method.

6 How to render data in real time

In ECharts, the data of the chart can be updated in real time by calling the setOption method. Here's how to render data in real time:

1. Update data in real time
2. Update data regularly

6.1 Update data in real time

First, the chart's data needs to be updated. Data can be updated by modifying the option attribute of the ECharts instance. For example:

var myChart = echarts.init(document.getElementById('myChart'));
// 初始数据
var data = [10, 20, 30, 40, 50];
// 更新数据
data.push(60);
// 更新ECharts实例的option属性
myChart.setOption({
  series: [{
    data: data
  }]
});

In this example, first create an ECharts instance and bind it to an HTML element. Then, define an array data as the initial data. Next, add a new data point to the array by calling the push method. Finally, call the setOption method to update the option property of the ECharts instance, so that the data in the chart is updated with new data.

6.2 Regularly update data

If you need to render data in real time, you can use a timer to regularly update the data, and call the setOption method to update the chart in real time. For example:

var myChart = echarts.init(document.getElementById('myChart'));
// 初始数据
var data = [10, 20, 30, 40, 50];
// 定时器，每隔1秒更新一次数据
setInterval(function () {
  // 更新数据
  data.push(Math.floor(Math.random() * 100));
  // 更新ECharts实例的option属性
  myChart.setOption({
    series: [{
      data: data
    }]
  });
}, 1000);

In this example, first create an ECharts instance and bind it to an HTML element. Then, define an array data as the initial data. Then, use the timer to update the data every 1 second, and call the setOption method to update the chart in real time.

7 Monitor data

In ECharts, you can monitor data by using the data area zoom and brush tools provided in the dataZoom component and the toolbox component.

Here's how to listen for data:

Use the dataZoom component

7.1 Using the dataZoom component

The dataZoom component allows the user to select and zoom the area of ​​the data, so as to monitor the data. To use the dataZoom component, you need to add the corresponding configuration in the option configuration item of the ECharts instance.

For example, the following code uses the dataZoom component to monitor data:

var myChart = echarts.init(document.getElementById('myChart'));
option = {
    xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E']
    },
    yAxis: {
        type: 'value'
    },
    dataZoom: [{
        type: 'slider',
        start: 0,
        end: 100
    }],
    series: [{
        type: 'bar',
        data: [10, 20, 30, 40, 50]
    }]
};
myChart.setOption(option);

In this example, a slider is added using the dataZoom component, and the user can select and zoom the data area by dragging the slider.

When the data area changes, the currently selected data area can be obtained by listening to the dataZoom event. For example:

myChart.on('dataZoom', function (params) {
    console.log(params.startValue, params.endValue);
});

In this example, use the on method to monitor the dataZoom event, and output the start value and end value of the currently selected data area when the event occurs.

7.2 Use the brush tool in the toolbox component

The brush tool in the toolbox component allows the user to select and highlight the area of ​​the data, so as to monitor the data. To use the brush tool, you need to add the corresponding configuration in the option configuration item of the ECharts instance.

For example, the following code listens for data using the brush tool:

var myChart = echarts.init(document.getElementById('myChart'));
option = {
    xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E']
    },
    yAxis: {
        type: 'value'
    },
    toolbox: {
        feature: {
            brush: {
                type: ['rect', 'polygon', 'clear']
            }
        }
    },
    series: [{
        type: 'bar',
        data: [10, 20, 30, 40, 50]
    }]
};
myChart.setOption(option);

In this example, a brush tool that can select a rectangular or polygonal area is added using the brush tool in the toolbox component. Users can use this tool to select and highlight areas of data.

When the data area changes, the currently selected data area can be obtained by listening to the brushSelected event. For example:

myChart.on('brushSelected', function (params) {
    console.log(params.batch[0].selected);
});

In this example, use the on method to monitor the brushSelected event, and output the start value and end value of the currently selected data area when the event occurs.

8 votes