Echarts legend component properties and source code

The legend component is a commonly used component in ECharts. It is used to distinguish the names of series markers with different colors and express the relationship between data and graphics. When operating, users can control which data series are displayed or not displayed by clicking the legend.

In ECharts 3.x/ECharts 4.x, a single ECharts instance can have multiple legend components, which facilitates the layout of multiple legends. When there are too many legends, you can use scrolling to turn pages.

In ECharts, the properties of the legend component are shown in the table

The schematic diagram of the legend component properties is shown in the figure .

Draw a column mashup chart using the evaporation, precipitation, minimum temperature, and maximum temperature data for a certain year, and configure a legend component for the chart.
When there are too many legends or the legend is too long, you can use vertical scrolling legend or horizontal scrolling legend, see the property legend.type. At this time, set the value of the type attribute to "scroll", which means that the legend is only displayed in one line, and the excess part will automatically be displayed as a scrolling effect, as shown in the figure.

As can be seen from the figure, the sliding icon on the upper right is the scroll icon of the legend, which can present the legend with a scrolling effect.

The source code of the legend is as follows;

<html>

<head>
    <meta charset="utf-8">
    <!--Introduce ECharts script-->
    <script src="js/echarts.js"></script>
</head>

<body>
    <!---Prepare a DOM with size (width and height) for ECharts-->
    <div id="main" style="width: 600px; height: 600px"></div>
    <script type="text/javascript">
        //Based on the prepared DOM, initialize the ECharts chart var myChart = echarts.init(document.getElementById("main"));
        //Specify the configuration items and data of the chart var option = {
            color: ["red", 'green', 'blue', 'grey'], //Use your own predefined colors legend: {
                orient: 'horizontal', // 'vertical'
                x: 'right', //'center'|'left'|{number},
                y: 'top', //'center'|'bottom'|{number}
                backgroundColor: '#eee',
                borderColor: 'rgba(178,34,34,0.8)',
                borderWidth: 4,
                padding: 10,
                itemGap: 20, textStyle: { color: 'red' },
            },
            xAxis: { //Configure the x-axis coordinate system data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
            },
            yAxis: [ //Configure the y-axis coordinate system { //Set the first y-axis type: 'value',
                    axisLabel: { formatter: '{value} ml' }
                },
                { //Set the second y-axis type: 'value',
                    axisLabel: { formatter: '{value} °C' },
                    splitLine: { show: false }
                }
            ],
            series: [ //Configure data series { //Set data series 1
                    name: 'Evaporation in a certain year', type: 'bar',
                    data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6]
                },
                { //Set data series 2
                    name: 'Precipitation in a certain year', smooth: true,
                    type: 'line', yAxisIndex: 1, data: [11, 11, 15, 13, 12, 13, 10]
                },
                { //Set data series 3
                    name: 'The highest temperature in a certain year', type: 'bar',
                    data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6]
                },
                { //Set data series 4
                    name: 'The lowest temperature in a certain year', smooth: true,
                    type: 'line', yAxisIndex: 1, data: [-2, 1, 2, 5, 3, 2, 0]
                }
            ]
        };
        //Use the configuration items and data just specified to display the chart myChart.setOption(option); 
    </script>
</body>

</html>

Summarize

This is the end of this article about the properties and source code of the Echarts legend component. For more relevant Echarts legend component content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

Example of setting legend color and map background color in echarts
Pyecharts adjusts the position and spacing between the legend and each section
In echarts, legend and coordinate system grid realize left and right layout examples
Implementing multiple legend code parsing based on Python pyecharts

<<: How to run top command in batch mode

>>: A brief analysis of the knowledge points of exporting and importing MySQL data

MySQL 8.0.15 winx64 installation and configuration method graphic tutorial under windows

Echarts legend component properties and source code

MySQL 8.0.15 winx64 installation and configuration method graphic tutorial under windows

Modify the default data directory of MySQL 8.0 (quick operation without configuration)

MySQL performance optimization tips

border-radius method to add rounded borders to elements

js detects keywords in the title and description and replaces or jumps to other pages when found

Improve the efficiency of page code modification and master the core knowledge of HTML language

SQL implements addition, subtraction, multiplication and division operations on two adjacent rows of data

Slot arrangement and usage analysis in Vue

Detailed explanation of HTML basics (Part 2)

Difference between HTML4 and HTML5: How to add focus implementation code to an input

Recommend

HTML table tag tutorial (12): border style attribute FRAME

The vue project realizes drawing a watermark in a certain area

Detailed explanation of the idea of implementing dynamic columns in angularjs loop object properties

7 ways to vertically center elements with CSS

Windows Service 2016 Datacenter\Stand\Embedded Activation Method (2021)

Some useful meta setting methods (must read)

Ubuntu Server 18.04.5 LTS Server Edition Installation and Configuration Graphic Tutorial

ThingJS particle effects to achieve rain and snow effects with one click

Mysql accidental deletion of data solution and kill statement principle

Linux system prohibits remote login command of root account

Detailed explanation of MySQL database paradigm

js canvas realizes circular water animation

Complete steps to configure IP address in Ubuntu 18.04 LTS

25 Tools to Improve Website Usability and Conversion Rates

JS code to achieve page switching effect