Generating Charts with Labels and Legends using ECharts and PHP API

With the development of internet technology, data visualization has become an increasingly important task. Statistical charts, as an intuitive and easy‑to‑understand display method, are widely used in data analysis and decision support. ECharts, an excellent open‑source chart library, offers rich chart types and powerful features, making it a top choice for many developers and data analysts.

This article introduces how to use ECharts together with a PHP interface to generate a statistical chart that includes labels and a legend, demonstrated through a concrete code example.

First, include the relevant 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 necessary JS and CSS files in your HTML.

Next, prepare the data required for the chart. In PHP, you can fetch data via database queries, API calls, etc., and convert it to JSON format. In 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 contains the ECharts chart container, as shown below:

<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 the ECharts instance
var chart = echarts.init(chartContainer);

// Set the 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 data to render the chart
chart.setOption(option);

In the above code, we first import the ECharts library and obtain the chart container element. Then we use the init() method to create an ECharts instance and set the chart options and data. The title defines the chart title and subtitle, tooltip defines the hover tooltip, legend defines the legend, and series defines the series data, illustrated here with a pie chart.

Finally, we call the setOption() method to apply the configuration and data to the chart, thereby rendering it.

By following these steps, we have successfully used ECharts and a PHP interface to generate a statistical chart with labels and a legend. You can adjust the configuration and data according to your needs to create richer chart effects.

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

1. Include the relevant ECharts resource files;

2. Prepare the data needed for the chart and convert it to JSON format;

3. Create an HTML element that contains the ECharts chart container;

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

5. Use the setOption() method to apply the configuration and data to the chart and render it.

We hope the above content helps you; for more detailed functions and usage of ECharts and PHP interfaces, you can consult the official documentation or other related resources for deeper learning. Wish you great progress on the road of data visualization!

Java learning material

C language learning material

Frontend learning material

C++ learning material

PHP learning material