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. 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:
|
<<: How to run top command in batch mode
>>: A brief analysis of the knowledge points of exporting and importing MySQL data
Recommend
Detailed explanation of how to limit the update/delete range using the mysql parameter sql_safe_updates
Preface As you all know, we have encountered many...
How to create, start, and stop a Docker container
1. A container is an independently running applic...
Why is the scroll bar on the web page set on the right?
Why are the scroll bars of the browsers and word ...
Native js to implement form validation function
Table of contents When developing, analyzing the ...
Example code for implementing concurrent request control in JavaScript/TypeScript
Scenario Suppose there are 10 requests, but the m...
How to install Maven automatically in Linux continuous integration
Unzip the Maven package tar xf apache-maven-3.5.4...
Install Percona Server+MySQL on CentOS 7
1. Environmental Description (1) CentOS-7-x86_64,...
A record of pitfalls in JS regular matching
I recently discovered a pitfall in regular expres...
Examples of using Docker and Docker-Compose
Docker is an open source container engine that he...
Introduction to Nginx log management
Nginx log description Through access logs, you ca...
A brief discussion on how to learn JS step by step
Table of contents Overview 1. Clearly understand ...
Several specific methods of Mysql space cleaning
Table of contents Preface 1. Check the file disk ...
Summary of pitfalls in importing ova files into vmware
Source of the problem As we all know, all network...
How to write asynchronous tasks in modern JavaScript
Preface In this article, we'll explore the ev...
Tutorial on installing and uninstalling python3 under Centos7
1. Install Python 3 1. Install dependency package...