Location>code7788 >text

ECharts realize radar charts in detail

Popularity：732 ℃/2024-09-02 15:55:32

ECharts is an open source data visualization tool by Baidu , it provides a rich set of chart types , such as line charts , bar charts , pie charts , scatter plots ,radar chartThe core functionality of the ECharts component is realized in the following ways: maps, K charts, heat maps, dashboards, etc., as well as a rich set of interactive features:

  1. data-driven：
    ECharts utilizes a data-driven design philosophy where charts are generated and updated based on data. Users can customize their charts by setting theoption object to describe the configuration of the chart, including information such as data, axes, series type, legend, and so on.

  2. Canvas or SVG Rendering：
    ECharts supports either Canvas or SVG as the underlying rendering engine; Canvas is good for dynamic or real-time chart rendering, while SVG is good for static or more interactive charts.ECharts uses Canvas rendering by default.

  3. responsive layout：
    ECharts supports responsive layout, the size of the chart container can be dynamically changed and the chart will automatically scale according to the size of the container.

  4. animation effect：
    ECharts provides rich animation effects, including data fading, data transition animation, etc., which makes the data changes more intuitive and vivid.

  5. interactive function：
    ECharts supports a variety of interactive features, such as Tooltip, DataZoom, Legend, AxisZoom, etc., which enhances the user's interactive experience.

  6. event listener：
    ECharts provides an event listening mechanism that allows users to listen and respond to various events of the chart, such as click, hover, data item selection, etc., thus realizing complex interaction logic.

  7. Multi-dimensional data presentation：
    ECharts allows users to present multi-dimensional data in charts, such as in scatter plots where additional dimensions are represented by the color and size of the data points.

  8. Scalability and customization：
    ECharts provides the ability to extend and customize, users can through the Custom Series (Custom Series) and extension plug-ins to achieve special chart effects.

  9. performance optimization：
    ECharts performs a number of performance optimizations such as lazy rendering, dirty rectangle rendering, and hierarchical rendering to support chart rendering with large data volumes.

  10. Multi-language support：
    ECharts supports multiple languages and can display different text contents according to the user's language preference.

  11. Componentized design：
    ECharts charts consist of several components, such as Title, Toolbox, Legend, Axis, Series, etc. Each component has its own configuration items.

  12. Data conversion and processing：
    ECharts provides data conversion and processing functions, such as data filtering, sorting, aggregation, etc., which enable data to be presented according to the user's needs.

The principle of ECharts implementation involves knowledge from various fields such as computer graphics, data structures, animation design and so on. Its design philosophy of simplicity, flexibility, and extensibility has made it one of the very popular tools in the field of data visualization.

Below we present a concrete example of code implementation using the implementation of radar charts as an example.

How to implement an interactive radar chart using ECharts?

To use ECharts to implement an interactive radar chart, we need to set the radar chart configuration items, and can listen to the user's interactive events to enhance the interactivity of the chart, without further ado, on the code:

Step 1: Introduce the ECharts library

First, introduce the ECharts library in your HTML file:

<script src="/npm/echarts/dist/"></script>

Step 2: Create Chart Container

In the HTML file, create a container for the radar chart:

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

Step 3: Writing Radar Map Configuration

In JavaScript, initialize the ECharts instance and configure the radar chart. We need to define the indicator, series, and other configuration items for the radar chart.

var myChart = (('main'));

var option = {
    title: {
        text: 'Interactive Radar Chart'
    },
    tooltip: {},
    legend: {
        data: ['Budget allocation（Allocated Budget）', 'Actual expenses（Actual Spending）']
    },
    radar: {
        // shape: 'circle',
        name: {
            textStyle: {
                color: '#fff',
                backgroundColor: '#999',
                borderRadius: 3,
                padding: [3, 5]
           }
        },
        indicator: [
           { name: 'sales (representative, agreement etc)（sales）', max: 6500},
           { name: 'managerial（Administration）', max: 16000},
           { name: 'information technology（Information Technology）', max: 30000},
           { name: 'first aid（Customer Support）', max: 38000},
           { name: 'research and development（Development）', max: 52000},
           { name: 'market (also in abstract)（Marketing）', max: 25000}
        ]
    },
    series: [{
        name: 'budget vs overhead（Budget vs spending）',
        type: 'radar',
        // areaStyle: {normal: {}},
        data : [
            {
                value : [4200, 30000, 20000, 35000, 50000, 18000],
                name : 'Budget allocation（Allocated Budget）'
            },
             {
                value : [5000, 14000, 28000, 26000, 42000, 21000],
                name : 'Actual expenses（Actual Spending）'
            }
        ]
    }]
};

(option);

Step 4: Adding Interactions

We can add interactivity by listening to events provided by ECharts, for exampleclickEvents,mouseoverEvents, etc.

('click', function (params) {
    // Interaction logic when clicking on an area of the radar map.
    (); // Print the name of the area clicked on
}).

('mouseover', function (params) {
    // Interaction logic when the mouse hovers over an area of the radar map.
    (); // Print the name of the data series the mouse hovered over
}).

Step 5: Test the radar map

When we're done, let's open the HTML file in a browser to see if the radar chart is displaying as expected and to see if the interactions are working properly.

Let me explain.

  • Radar map configuration: inoptionIn the object, theradarProperties define the structure of the radar chart, including the maximum value and name of the indicator (indicator).seriesattribute defines data series, each of which can represent a set of data.
  • event listener: Bymethod listens for chart events and can execute the appropriate logic when the user interacts with the chart (such as clicking or hovering).

How to implement a radar chart with multiple series using ECharts?

Looking further, to implement a radar chart with multiple series in ECharts, we need to define multiple series in the configuration item, each of which can represent a set of data. Take a look at the code implementation:

Step 1: Introduce the ECharts library

First, introduce the ECharts library in our HTML file:

<script src="/npm/echarts/dist/"></script>

Step 2: Create Chart Container

In the HTML file, create a container for the radar chart:

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

Step 3: Writing Radar Map Configuration

In JavaScript, initialize the ECharts instance and configure the radar chart. We need to define the indicator, multiple data series, and other configuration items for the radar chart.

var myChart = (('main'));

var option = {
    title: {
        text: 'Multi-series radar charts'
    },
    tooltip: {},
    legend: {
        data: ['range1', 'range2']
    },
    radar: {
        // shape: 'circle',
        name: {
            textStyle: {
                color: '#fff',
                backgroundColor: '#999',
                borderRadius: 3,
                padding: [3, 5]
            }
        },
        indicator: [
            { name: 'dimension (math.)1', max: 100},
            { name: 'dimension (math.)2', max: 100},
            { name: 'dimension (math.)3', max: 100},
            { name: 'dimension (math.)4', max: 100},
            { name: 'dimension (math.)5', max: 100}
        ]
    },
    series: [{
        name: 'range1',
        type: 'radar',
        data : [
            {
                value : [80, 70, 90, 60, 70],
                name : 'range1'
            }
        ]
    },
    {
        name: 'range2',
        type: 'radar',
        data : [
            {
                value : [90, 80, 70, 90, 80],
                name : 'range2'
            }
        ]
    }]
};

(option);

Step 4: Test the radar map

You can now open this HTML file in a browser to see if the radar chart is displaying as expected and if multiple series are displaying correctly, without showing the effect image.

To explain the code implementation

  • Radar map configuration: inoptionIn the object, theradarProperties define the structure of the radar chart, including the maximum value and name of the indicator (indicator).seriesattribute defines multiple data series, each of which can represent a set of data.
  • Data Series: Each series passestype: 'radar'specified as a radar map type.dataproperty contains an array where each object in the array represents a data point.valueAn attribute is an array containing the values of each dimension.

How to set different colors and labels for ECharts radar charts?

Setting different colors and labels for radar charts in ECharts can be done via the configuration item in theseries respond in singingradar attribute to realize it:

Step 1: Introduce the ECharts library

Introduces the ECharts library in the HTML file:

<script src="/npm/echarts/dist/"></script>

Step 2: Create Chart Container

In the HTML file, create a container for the radar chart:

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

Step 3: Writing Radar Map Configuration

In JavaScript, initializing the ECharts instance and configuring the radar map, we can then use theseries Set different colors and labels in the

var myChart = (('main'));

var option = {
    title: {
        text: 'Multi-series radar charts'
    },
    tooltip: {},
    legend: {
        data: ['range1', 'range2']
    },
    radar: {
        // shape: 'circle',
        name: {
            textStyle: {
                color: '#fff',
                backgroundColor: '#999',
                borderRadius: 3,
                padding: [3, 5]
            }
        },
        indicator: [
            { name: 'dimension (math.)1', max: 100},
            { name: 'dimension (math.)2', max: 100},
            { name: 'dimension (math.)3', max: 100},
            { name: 'dimension (math.)4', max: 100},
            { name: 'dimension (math.)5', max: 100}
        ],
        splitLine: {
            lineStyle: {
                color: 'rgba(255, 255, 255, 0.5)'
            }
        },
        splitArea: {
            areaStyle: {
                color: ['rgba(114, 172, 209, 0.2)', 'rgba(114, 172, 209, 0.4)', 'rgba(114, 172, 209, 0.6)', 'rgba(114, 172, 209, 0.8)', 'rgba(114, 172, 209, 1)']
            }
        }
    },
    series: [{
        name: 'range1',
        type: 'radar',
        color: '#f9713c', // 设置range颜色
        data : [
            {
                value : [80, 70, 90, 60, 70],
                name : 'range1'
            }
        ]
    },
    {
        name: 'range2',
        type: 'radar',
        color: '#b3e4a1', // 设置range颜色
        data : [
            {
                value : [90, 80, 70, 90, 80],
                name : 'range2'
            }
        ]
    }]
};

(option);

Step 4: Test the radar map

To test this next, open the HTML file in your browser and view the radar charts, with each series having a different color and label.

Go ahead and explain the code implementation

  • Color settings: inseries In the configuration, thecolor property sets a different color for each series.
  • Label Setting: inradar In the configuration, thename attribute defines the label style for each dimension in the radar chart, including text color and background color.
  • Split lines and zone colors：splitLine cap (a poem)splitArea attribute defines the radar map's segmentation line and region color, respectively, which can be set to a gradient or a different color.

How do I add dynamic data updates to ECharts radar charts?

To add dynamic data updates to ECharts radar charts, we can use JavaScript timers such assetInterval) to periodically fetch new data from the server and use the ECharts-providedsetOption method to update the chart:

Step 1: Introduce the ECharts library

Introduces the ECharts library in the HTML file:

<script src="/npm/echarts/dist/"></script>

Step 2: Create Chart Container

In the HTML file, create a container for the radar chart:

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

Step 3: Initialize the radar map

In JavaScript, initialize the ECharts instance and set the initial radar map configuration.

var myChart = (('main'));

var option = {
    // Initial configuration of the radar chart
    // ...
};

(option);

Step 4: Define the data update function

Create a function to get new data and update the radar chart. We can use an AJAX request to get the data from the server or use any other method to get the data.

function fetchDataAndUpdateChart() {
    // Assuming this is the function that fetches the data, it can be an AJAX request or something else.
    // This uses setTimeout to simulate a data update.
    setTimeout(function () {
        var newData = {
            value: [() * 100, () * 100, () * 100, () * 100, () * 100],
            name: 'dynamicData'
        };

        // Update the radar map data
        ({
            series: [{
                name: 'series1', [newData], [newData], [newData], [newData], [newData])
                data: [newData]
            }]
        });

        // Recursive call for periodic updates
        fetchDataAndUpdateChart(); }, 2000); // Update data every 2 seconds.
    }, 2000); // update data every 2 seconds
}

// Initial call to the data update function
fetchDataAndUpdateChart(); // Initial call to data update function.

O up, perfect to show the effect.

Interpretation Code

  • Initialize Radar Map: Sets the initial configuration of the radar chart, including title, tooltip, legend, radar indicator, series, etc.
  • Dynamic data update: ByfetchDataAndUpdateChart function periodically fetches new data and uses thesetOption method to update the radar chart. In this example, using thesetTimeout to simulate getting data from the server at regular intervals.
  • recursive call: infetchDataAndUpdateChart The end of the function recursively calls itself to update the data at regular intervals.

ultimate

The above is a case study of using ECharts to implement radar charts. Using ECharts to achieve a large display of data can be very cool, such as charts like this one:
/manager/upload/202303/07/

Well, today's content is here, welcome to pay attention to Wei brother love programming, original is not easy, thank you for the praise attention to comment, support it.

<Previous Next>