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 the basic usage of the Linux debugger GDB
Table of contents 1. Overview 2. gdb debugging 2....
Detailed explanation of setting up DNS server in Linux
1. DNS server concept Communication on the Intern...
How to completely delete the MySQL 8.0 service under Linux
Before reading this article, it is best to have a...
7 ways to vertically center elements with CSS
【1】Know the width and height of the centered elem...
How to solve jQuery conflict problem
In front-end development, $ is a function in jQue...
Detailed explanation of Angular component life cycle (I)
Table of contents Overview 1. Hook calling order ...
MySQL 5.7.18 master-slave replication setup (one master and one slave) tutorial detailed explanation
1. Replication Principle The master server writes...
The design process of Alibaba's Mid-Autumn Festival logo combined with the website
<br />First think of the idea, then draw a s...
25 Examples of News-Style Website Design
bmi Voyager Pitchfork Ulster Grocer Chow True/Sla...
Two ways to introduce svg icons in Vue
How to introduce svg icons in Vue Method 1 of int...
Implementing a web calculator based on JavaScript
This article shares the specific code of JavaScri...
Detailed explanation of Nginx Rewrite usage scenarios and code examples
Nginx Rewrite usage scenarios 1. URL address jump...
The problem of Chinese garbled characters appearing when connecting to MySQL database in Idea
Problem: When using JDBC to connect to the MySQL ...
Solve the problem of regular automatic file deletion by crontab+shell script under Centos7
Problem description: Recently, there is a demand ...
Centos7 install mysql5.6.29 shell script
This article shares the shell script of mysql5.6....