Generating Charts with Labels and Legends Using ECharts and a PHP API

With the rapid development of internet technologies, visualizing data has become increasingly important, and statistical charts are widely used for analysis and decision support. ECharts, an open‑source chart library, offers rich visualization types and powerful features, making it a popular choice for developers and analysts.

This article demonstrates how to use ECharts together with a PHP interface to generate statistical charts that include labels and legends, presenting a complete code example.

First, include the necessary ECharts resource files in your project by downloading the latest version from the official website or GitHub, extracting them, and linking the required JavaScript and CSS files in your HTML.

Next, prepare the data for the chart in PHP. Retrieve data from a database, API, or other sources, convert it to JSON, and define an array such as:

$data = [
    ['name' => 'Legend1', 'value' => 100],
    ['name' => 'Legend2', 'value' => 200],
    ['name' => 'Legend3', 'value' => 300],
    // ...
];

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

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

Write JavaScript to initialize ECharts, configure the chart options, and bind the data:

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

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

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

// Set chart configuration and data
var option = {
    title: {
        text: 'Statistical Chart',
        subtext: 'Data source: PHP API',
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a}
{b} : {c} ({d}%)',
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data:
,
    },
    series: [{
        name: 'Label 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',
            },
        },
    }],
};

// Render the chart with the specified options
chart.setOption(option);

The JavaScript code first imports the ECharts library, obtains the container element, creates an ECharts instance with init() , and then defines the chart options where title sets the main and subtitle, tooltip configures hover information, legend provides the legend entries, and series defines a pie chart with labels.

Finally, the setOption() method applies the configuration and data to render the chart.

In summary, the steps to generate a chart with labels and legends using ECharts and a PHP interface are:

Include the ECharts resource files.

Prepare the chart data in PHP and convert it to JSON.

Create an HTML element to host the chart.

Write JavaScript to initialize ECharts and set the chart options and data.

Use setOption() to apply the configuration and render the chart.

For more detailed usage of ECharts and PHP integration, refer to the official documentation and related resources.