Generating Statistical Charts with Labels and Legends Using ECharts and PHP

With the development of Internet technologies, data visualization has become an increasingly important task. Statistical charts, as an intuitive and easy-to-understand way of presentation, are widely used in data analysis and decision support. ECharts, a high‑quality open‑source chart library, offers a rich set of visualization types and powerful features, making it a top choice for many developers and data analysts.

This article explains how to use ECharts together with a PHP interface to generate statistical charts that include labels and legends, illustrating the process with a concrete code example.

First, include the necessary ECharts resource files in your project. You can obtain the latest version from the official website or GitHub, unzip the files into your project directory, and reference the required JavaScript and CSS files in your HTML.

Next, prepare the data needed for the chart. In PHP you can retrieve data via database queries, API calls, etc., and convert it to JSON format. For this example we assume the following data has been obtained:

$data = [
    ['name' => '图例1', 'value' => 100],
    ['name' => '图例2', 'value' => 200],
    ['name' => '图例3', 'value' => 300],
    // ...
];

Then dynamically generate an HTML element that will serve as the ECharts container:

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

After that, write JavaScript code to initialize ECharts and render the chart:

// Import ECharts library
import echarts from 'echarts';

// Get the container element
var chartContainer = document.getElementById('chart');

// Initialize ECharts instance
var chart = echarts.init(chartContainer);

// Set chart options and data
var option = {
    title: {
        text: '统计图表',
        subtext: '数据来源: PHP接口',
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a}
{b} : {c} ({d}%)',
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data:
,
    },
    series: [
        {
            name: '标签名称',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data:
,
            label: {
                normal: {
                    show: true,
                    formatter: '{b} : {c} ({d}%)',
                },
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '20',
                    fontWeight: 'bold',
                },
            },
        },
    ],
};

// Apply the configuration and render the chart
chart.setOption(option);

In the code above, we first import the ECharts library and obtain the chart container element. Then we create an ECharts instance using the init() method, set the configuration options—including title, tooltip, legend, and a pie‑type series—and supply the data prepared in PHP.

Finally, we call the setOption() method to apply the configuration and render the chart.

By following these steps, you can successfully generate a statistical chart with labels and legends using ECharts and a PHP interface. Adjust the options and data as needed to create richer visualizations.

In summary, the process includes:

1. Import ECharts resource files;

2. Prepare the data and convert it to JSON;

3. Create an HTML element to host the chart;

4. Write JavaScript to initialize ECharts and configure the chart;

5. Use setOption() to render the chart.

For more detailed usage of ECharts and PHP interfaces, refer to the official documentation or other resources.