How to implement chart linkage in ECharts

How to implement chart linkage in ECharts requires specific code examples

When we need to display multiple related data, it is necessary to display the data in the form of a chart An intuitive and effective way. In practical applications, we often encounter situations where multiple charts of different types need to be displayed in conjunction. As a powerful data visualization library, ECharts provides chart linkage functions, which can help us quickly realize this requirement.

The method of realizing chart linkage in ECharts is through event triggering and data interaction. By monitoring the events of a certain chart, when the event is triggered, the corresponding data can be obtained and corresponding operations can be performed, thereby achieving the linkage effect of the chart. The following will explain how to implement chart linkage in ECharts through specific code examples.

First, we need to prepare two different types of charts, a bar chart and a line chart. For convenience, we use the sample data officially provided by ECharts for demonstration. The following is the HTML code for the bar chart and line chart:

<div id="bar" style="width: 600px;height:400px;"></div>
<div id="line" style="width: 600px;height:400px;"></div>

Then, introduce the ECharts library in JavaScript and write the corresponding code to create the chart and monitor the chart events. The following is the complete JavaScript code:

// 图表数据
var barData = [
    {name: '周一', value: 120},
    {name: '周二', value: 200},
    {name: '周三', value: 150},
    {name: '周四', value: 80},
    {name: '周五', value: 70},
    {name: '周六', value: 110},
    {name: '周日', value: 130}
];

var lineData = [
    {name: '周一', value: 190},
    {name: '周二', value: 230},
    {name: '周三', value: 170},
    {name: '周四', value: 120},
    {name: '周五', value: 90},
    {name: '周六', value: 150},
    {name: '周日', value: 160}
];

// 创建柱状图
var barChart = echarts.init(document.getElementById('bar'));
var barOption = {
    xAxis: {
        type: 'category',
        data: barData.map(item => item.name)
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        type: 'bar',
        data: barData.map(item => item.value)
    }]
};
barChart.setOption(barOption);

// 创建折线图
var lineChart = echarts.init(document.getElementById('line'));
var lineOption = {
    xAxis: {
        type: 'category',
        data: lineData.map(item => item.name)
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        type: 'line',
        data: lineData.map(item => item.value)
    }]
};
lineChart.setOption(lineOption);

// 监听柱状图点击事件
barChart.on('click', function(params) {
    // 获取点击的数据
    var data = barData[params.dataIndex];
    
    // 根据点击的数据更新折线图数据
    lineOption.series[0].data = [data.value, data.value, data.value, data.value, data.value, data.value, data.value];
    lineChart.setOption(lineOption);
});

In the above code, instances of the bar chart and line chart are first created and their initial data is set. Then, set the data to the chart by calling the setOption method. Then, by listening to the click event of the bar chart, obtain the click data in the event callback function, then update the line chart data based on the click data, and set the updated data to the line chart through the setOption method . In this way, the linkage effect of the bar chart and the line chart is achieved.

It should be noted that the above is just a simple example, and actual applications may involve more complex data interaction and chart linkage requirements. But the overall implementation idea and operation method are the same: by listening to the events of the chart, obtain the data and perform corresponding operations.

Through the above sample code, we can see that it is not complicated to implement chart linkage in ECharts. With the rich functions and flexible operations provided by ECharts, we can easily achieve interactive effects between multiple charts, providing more possibilities for data analysis and display.

The above is the detailed content of How to implement chart linkage in ECharts. For more information, please follow other related articles on the PHP Chinese website!