How to combine ECharts and php interface to realize statistical chart display of multi-dimensional data
Abstract: ECharts is a data visualization chart library open sourced by Baidu, which can support multiple chart types and interactions. Combining ECharts and php interfaces, you can easily realize statistical chart display of multi-dimensional data. This article will introduce how to use ECharts to draw different types of charts and use the php interface to pass data to the front end.
Keywords: ECharts, php interface, multi-dimensional data, statistical chart display
1. Background introduction
In data visualization, statistical chart display is a common and Important ways. ECharts provides a wealth of chart types and interactive operations to meet a variety of data display needs. Through the php interface, we can easily transfer back-end data to the front-end to achieve dynamic chart display.
2. Basic use of ECharts
Introduce the ECharts library file into the html page and create a container div for Host chart.
<!DOCTYPE html> <html> <head> <script src="echarts.min.js"></script> </head> <body> <div id="chart"></div> </body> </html>
In JavaScript, create a chart instance and specify the container and chart type.
var chart = echarts.init(document.getElementById('chart'));
Define the style and data of the chart by configuring the parameters of the chart.
var option = { title: { text: '图表标题' }, xAxis: { data: ['类别1', '类别2', '类别3'] }, yAxis: {}, series: [ { name: '系列1', type: 'bar', data: [10, 20, 30] }, { name: '系列2', type: 'bar', data: [15, 25, 35] } ] };
Apply configuration parameters to the chart by calling the chart.setOption method.
chart.setOption(option);
3. Combined with the PHP interface to transfer data
In the PHP interface, from the database or other data sources according to business needs Obtain data from and process the data.
$data = array( 'categories' => ['类别1', '类别2', '类别3'], 'series' => array( array( 'name' => '系列1', 'data' => [10, 20, 30] ), array( 'name' => '系列2', 'data' => [15, 25, 35] ) ) ); echo json_encode($data); // 将数据转为 json 格式输出
Use the XMLHttpRequest object in JavaScript to send a data request to the php interface and parse the returned data.
var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { var data = JSON.parse(xhr.responseText); var option = { title: { text: '图表标题' }, xAxis: { data: data.categories }, yAxis: {}, series: data.series }; chart.setOption(option); } }; xhr.open('GET', 'data.php', true); xhr.send();
4. Implementation of different types of charts
var option = { title: { text: '条形图' }, xAxis: { type: 'value' }, yAxis: { type: 'category', data: ['类别1', '类别2', '类别3'] }, series: [ { name: '系列1', type: 'bar', data: [10, 20, 30] } ] };
var option = { title: { text: '饼图' }, series: [ { name: '系列1', type: 'pie', radius: '55%', data: [ {value: 10, name: '类别1'}, {value: 20, name: '类别2'}, {value: 30, name: '类别3'} ] } ] };
var option = { title: { text: '折线图' }, xAxis: { type: 'category', boundaryGap: false, data: ['类别1', '类别2', '类别3'] }, yAxis: {}, series: [ { name: '系列1', type: 'line', data: [10, 20, 30] } ] };
5. Summary
By combining ECharts and php interfaces, we can easily realize the statistical chart display of multi-dimensional data. Through the rich chart types and interactive operations of ECharts, as well as the data processing and transmission of the PHP interface, we can meet the data display of different business needs. I hope this article will be helpful for implementing statistical chart display using ECharts and php.
The above is the detailed content of How to combine ECharts and php interface to realize statistical chart display of multi-dimensional data. For more information, please follow other related articles on the PHP Chinese website!