The Legend component is a common component in ECharts. It is used to distinguish the names of series of tags in different colors, and expresses the association between data and graphics. Users can click legends to control which data series are displayed or not displayed. In ECharts 3.x/ECharts 4.x, a single ECharts instance can have multiple legend components, facilitating the layout of multiple legends. Scrolling can be used when there are too many legends.
In ECharts, the properties of a legend component are shown in a table
A schematic diagram of the legend component properties is shown.
Use evaporation, precipitation, minimum and maximum temperature data for a given year to create a histogram mash-up, and configure a legend component for the chart. When the number of legends is too large or the legend length is too long, you can use the vertical scroll legend or horizontal scroll legend. See the attribute legend. Type. If the type attribute is set to “Scroll”, the legend will be displayed on only one line, and the extra part will be automatically displayed as the 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 as a scrolling effect.
The legend source code is as follows;
<html> <head> <meta charset="utf-8"> <! - introduce ECharts script -- > < script SRC = "js/ECharts js" > < / script > < / head > < body > <! <div id="main" style="width: 600px; height: 600px"></div> <script type="text/javascript"> Var myChart = echarts.init(document.getelementById ("main")); Var option = {color: ["red", 'green', 'blue', 'grey'], // Use the pre-defined legend color: {Orient: 'horizontal', //'vertical' x: 'right', //'center'|'left'|{number}, y: 'top' / / 'center' | 'bottom' | {number} backgroundColor: '# eee and borderColor:' rgba (178,34,34,0.8), borderWidth: 2, padding: 10, itemGap: 20, textStyle: {color: 'red'},}, xAxis: { [' Monday ', 'on Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday' ']}, yAxis: [y coordinate {/ / configuration / / set the article 1 y type: 'value' axisLabel: {formatter: Type: 'value', axisLabel: {formatter: '{value} °C'}, splitLine: {show: False}}], series: [// set data series 1 {// set data series 1 name: 'evaporation of 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 year ', type: 'bar', data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6]}, {// Set data series 4 name: 'minimum temperature of a certain year ', smooth: true, type: 'line', yAxisIndex: 1, data: [-2, 1, 2, 5, 3, 2, 0] } ] }; // Display the graph mychart.setoption (option) with the configuration item and data just specified; </script> </body> </html>Copy the code