How to Easily Generate Statistical Charts with Labels and Legends Using ECharts and PHP API

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

With the rapid development of internet technology, data visualization has become an essential part of data analysis and decision-making. Statistical charts offer an intuitive and easy-to-understand way to present data, widely used across various fields. ECharts is a powerful open-source charting library that provides a rich variety of chart types and features, making it a popular choice among developers.

This article will demonstrate how to use ECharts combined with PHP API to generate statistical charts with labels and legends through a practical example.

Include ECharts Resources

First, you need to include the necessary ECharts resources in your project. You can download the latest version from the official website or GitHub, place the files into your project directory, and include the corresponding JS and CSS files in your HTML.

Prepare the Data

On the PHP side, data is typically fetched from a database or API and converted into JSON format for frontend consumption. Here's an example dataset:

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

Create the Chart Container

In your HTML file, create a container element to hold the chart:

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

Initialize ECharts and Render the Chart

Then, write JavaScript code to initialize the ECharts instance and configure 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);

// Define the chart options and data
var option = {
    title: {
        text: 'Statistical Chart',
        subtext: 'Data Source: PHP API',
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)',
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: <?=json_encode(array_column($data, 'name'))?>,
    },
    series: [
        {
            name: 'Label Name',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: <?=json_encode($data)?>,
            label: {
                normal: {
                    show: true,
                    formatter: '{b} : {c} ({d}%)',
                },
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '20',
                    fontWeight: 'bold',
                },
            },
        },
    ],
};

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

Explanation of the Implementation

The code imports the ECharts library and obtains the container element. It then creates a chart instance using echarts.init(). The option object defines the chart title, tooltip, legend, and series data. Here, a pie chart is used, with labels and legends dynamically populated from PHP API data.

Finally, the chart is rendered by calling setOption() with the configuration.

Summary

The key steps to generate statistical charts with ECharts and PHP API include:

• Including ECharts resource files;
• Preparing and converting chart data into JSON format;
• Creating the chart container element in HTML;
• Writing JavaScript to initialize and configure the chart;
• Using setOption() to render the chart.

By following these steps, you can customize a wide range of charts to enhance data presentation and user experience. We hope this guide helps you in your data visualization projects.