Home > Article > Backend Development > How to combine ECharts and php interface to realize multi-chart linkage statistical chart display
How to combine ECharts and php interface to realize multi-chart linkage statistical chart display
- WBOYOriginal
- 2023-12-18 10:07:08856browse
In the field of data visualization, ECharts is a widely used front-end chart library, and its powerful data visualization functions are sought after by various industries. In actual projects, we often encounter situations where multiple charts need to be displayed in a linked manner. This article will introduce how to combine ECharts and PHP interfaces to realize the linked statistical chart display of multiple charts, and give specific code examples.
1. Pre-requisite skills
In the practice of this article, you need to master the following skills:
- Basic knowledge of HTML, CSS, and JavaScript;
- Basic knowledge of ECharts;
- Basic knowledge of PHP.
2. Requirements Analysis
Our requirement is to display multiple interrelated charts on one page, and these charts can be linked to each other.
The requirements analysis is as follows:
- There are two maps on the page, a main map and a secondary map.
- There is a bar chart and a line chart on the page.
- On the left side of the page, we can see a drop-down menu. This drop-down menu contains multiple options. Each option will trigger the corresponding data reload and update the corresponding chart.
- When we select any option in the drop-down menu, all charts will change. The main map and sub-map will follow the changes in the data, and the bar charts and line charts will also change. Update accordingly.
3. Implementation plan
- Page layout
First, lay out our page in an HTML file. Create a div container named wrap and place all charts in this div container. Among them, the height of the map container needs to be set to 100% to make full use of the page space.
<body>
<div id="wrap">
<div id="map1" style="height: 100%; width: 60%; float:left; "></div>
<div id="chart1" style="height: 400px; width: 40%; float:left;"></div>
<div id="map2" style="height: 100%; width:60%; float:left;"></div>
<div id="chart2" style="height: 400px; width: 40%; float:left;"></div>
</div>
</body>- Calling ECharts
We need to introduce the ECharts library file into the page. This library file can be downloaded from the ECharts official website (https://echarts.apache.org/en/download.html).
Use the <script> tag in the HTML file to introduce the ECharts library file and create the corresponding chart instance. We name the chart instances in the code chart1, chart2, map1, and map2. </script>
<!-- 引入ECharts的库文件 -->
<script src="echarts.common.min.js"></script>
<script>
// 创建主地图的图表实例
var map1 = echarts.init(document.getElementById('map1'));
// 创建次地图的图表实例
var map2 = echarts.init(document.getElementById('map2'));
// 创建条形图的图表实例
var chart1 = echarts.init(document.getElementById('chart1'));
// 创建折线图的图表实例
var chart2 = echarts.init(document.getElementById('chart2'));
</script>- Get data
We use PHP to write an interface to get data from the server. The specific data format can be designed according to actual needs. In this article, we assume that the returned data format is as follows:
{
"map1_data":[...],
"map2_data":[...],
"chart1_data":[...],
"chart2_data":[...],
...
}Here we use jQuery's .ajax() method to request data from the server, and call the corresponding function to draw the chart after the request is successful.
function getData(option) {
$.ajax({
type: "POST",
url: "getdata.php",
data: option,
dataType: "json",
success: function(response) {
drawMap1(response.map1_data);
drawMap2(response.map2_data);
drawChart1(response.chart1_data);
drawChart2(response.chart2_data);
...
}
});
}- Drawing Charts
Next, we need to write functions to draw maps, bar charts, and line charts using the data we receive. In this article, we use ECharts API to draw charts. For specific API usage, please refer to ECharts official documentation.
function drawMap1(data) {
// 使用接收到的数据进行地图实例的数据更新
map1.setOption(option);
}
function drawMap2(data) {
// 使用接收到的数据进行地图实例的数据更新
map2.setOption(option);
}
function drawChart1(data) {
// 使用接收到的数据进行条形图实例的数据更新
chart1.setOption(option);
}
function drawChart2(data) {
// 使用接收到的数据进行折线图实例的数据更新
chart2.setOption(option);
}- Chart linkage
In the last step, we need to achieve linkage between charts. When the user selects any option in the drop-down menu, all charts will change accordingly.
We can use the dispatchAction() method in the ECharts API to set up linkage between charts. When a chart is selected, we need to pass the selected data of the chart to other charts.
option1.on('mapSelect', function(params) {
// 获取地图选中的区域
var selectedData = params.batch[0].selected[0];
// 为条形图和折线图设置选中数据
chart1.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: selectedData.dataIndex
});
chart2.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: selectedData.dataIndex
});
// 为次地图设置选中数据
map2.dispatchAction({
type: 'mapSelect',
name: selectedData.name,
seriesIndex: 0
});
// 为请求数据添加参数
var option = {
map1_data: selectedData.name,
...
}
// 请求更新数据
getData(option);
});4. Summary
In this article, we introduced how to combine ECharts and PHP interfaces to achieve multi-chart linkage statistical chart display. We first understood the requirements, and then gave a detailed implementation plan and provided specific code examples from five aspects: page layout, calling the ECharts library, obtaining data and drawing charts, and realizing chart linkage. After studying this article, I believe readers can better apply the ECharts library to visualize data with multi-chart linkage.
The above is the detailed content of How to combine ECharts and php interface to realize multi-chart linkage statistical chart display. For more information, please follow other related articles on the PHP Chinese website!