A grid layout is a common layout, and most components in ECharts support a grid layout. The title component, as the name implies, is the title of the diagram, and is one of the simpler components in ECharts. The Legend component is also a common component in ECharts, which distinguishes the name of a series of tags in different colors. To complete the entire diagram, you need to configure and use the title and legend components in ECharts.

In ECharts 2.x, a single ECharts instance can have at most one title component, and each title component can be configured with a main title and subtitle. In ECharts 3.x or ECharts 4.x, you can configure any number of title components, which can be useful when titles need to be typeset or when multiple charts in a single instance need titles, where the properties of the title component are shown in the table.

A diagram of the header component properties is shown.

The title component supports a grid layout, and many components in ECharts also support a grid layout. A nine-grid layout divides an area into nine sections, as shown in the figure. The top row is divided into three cells, which can be used by x, Y (x, y in ECharts 2.x, left, top in ECharts 3.0). Respectively set to ‘left’ and ‘top’, ‘center’ and ‘top’, (‘ right ‘and’ top ‘). The middle row is also divided into 3 squares, respectively (‘left’,’center’), (‘center’,’center’), (‘right’,’center ‘). The bottom row is also divided into three squares, namely (‘left’,’bottom’), (‘center’,’bottom’), (‘right’,’bottom’). Of course, the nine-grid layout can also be located by a pair of values.

Use the temperature change data of a certain time in the next week to draw a line chart, and configure a title component for the chart, as shown in the figure. As you can see from the figure, it is a line chart with a main title and subtitle configured in the upper left corner of the chart.

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: 650px; height: 600px"></div> <script type="text/javascript"> Var myChart = echarts.init(document.getelementById ("main")); MytextStyle = {// Define your own text format variable color: "blue", // set the text color fontStyle: "Normal", / / italic font oblique oblique fontWeight: "normal", / / set the text bold degree | bolder | lighter | 100 | 200 | 300 | 400... FontFamily: "bold ", // set font series fontSize: 14, // set fontSize}; // Set the grid component to show: true, // Set the grid component to display x: 15, y: 66, // Set the grid upper-left position borderColor: '#FA8072', // set the grid boundary color}, title: {// set the title component show: true, // set the title component whether to display text: "Temperature change in coming Week ", // Set the main title subtext:" line chart ", // set the subtitle target: "blank", //'self' current window opens, 'blank' new window opens subtarget: "Blank ", // set the subtitle to open the link's window textAlign: "center", // Set the text horizontal alignment textBaseline: "top", // Set the text vertical alignment textStyle: MytextStyle, // Set the title style //subtextStyle: mytextStyle, // set the subtitle style: 5, // Set the title margin itemGap: Zlevel: 0, z: zlevel: 0, zlevel: 0, z: 0 Left: "10%", // Set the distance between the component and the left side of the container, 'left', 'center', 'right', '20%' top: "10", // Set the distance of the component from the top of the container, 'top', 'middle', 'bottom', '20%' right: "auto", // Set the distance of the component from the right of the container, '20%' bottom: "Auto ", // set the distance between the component and the bottom of the container, '20%' backgroundColor: "yellow", // set the title backgroundColor borderColor: "# CCC ", // set the borderColor borderWidth: // set the shadowColor to "red", // set the shadowColor to "0 ", // set the shadow horizontal offset distance: 0, // set shadow vertical offset distance shadowBlur: 10 // set shadowBlur size}, tooltip: {// configure tooltip component trigger: 'axis'}, legend: {// configure legend component data: [' Max Temperature ', 'min temperature ']}, Toolbox: {// Configure toolbox components show: true, feature: {mark: {show: true}, dataView: {show: true, readOnly: false }, magicType: { show: true, type: ['line', 'bar'] }, restore: { show: true }, saveAsImage: { show: True}}}, calculable: true, xAxis: [// Configure x coordinate system {show: false, type: 'category', boundaryGap: false, data: [' Monday ', 'on Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday' ']}], yAxis: {[/ / configure y coordinate system show: false, type: 'value' axisLabel: {formatter: '{value} °C'}}], series: [// config data series {name: 'Max temperature ', smooth: true, type: 'line', data: [11, 11, 15, 13, 12, 13, 10], markPoint: {// Set markPoint data: [{type: 'Max ', name:' Max '}, {type: 'min', name: Data: [{type: 'average', name: 'average'}]}}, {name: 'minimum temperature ', smooth: true, type: 'line', data: [1, -2, 2, 5, 3, 2, 0], markPoint: {// Set the marker point data: [{name: 'week minimum ', value: -2, xAxis: 1, yAxis: 1.5}}], markLine: {/ / set the tag line data: [{type: 'business' name: 'average'}]}}}; // Display the graph mychart.setoption (option) with the configuration item and data just specified; </script> </body> </html>Copy the code

Using the data of temperature change, air quality index, gold price trend and stock A trend within 20 days in A certain month, A scatter chart is drawn in A DOM container, and the title component is configured for four charts respectively, as shown in the figure. As can be seen from the figure, there are altogether 4 scatter charts in the figure, and each chart is configured with a title, and a total of 4 titles are configured.

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 titles = [' temperature change ', 'air quality index ',' gold trend ', 'stock A Trend ']; Var dataAll = [/ / data [[10.0, 8.04], [8.0, 6.95], [13.0, 7.58], [9.0, 8.81], [11.0, 8.33], [14, 9.96], [6, 7.24], [4, 12, 4.26], [10.84], [7, 4.82], [5.0, 5.68]], [[10, 9.14], [8.0, 8.14], [13, 8.74], [9, 8.77], [11, 9.26], [14.0, 8.1]. [6.0, 6.13], [4.0, 3.10], [12.0, 9.13], [7, 7.26], [5.0, 4.74]], [[4.0, 4.6], [5.0, 5.7], [6.0, 6.4], [7.0, 8.1], [8.0, 7.1], [9.0, 8.4], [10.0, 9.8], [11.0, 9.9], [12.0, 8.5], [13.0, 9.2], [15.0, 11.0]], [[2.0, 2.8], [3.0, 3.6], [4.0, 4.1], [5.0, 5.4], [6.0, 6.7], [7.0, 7.4], [8.0, 7.5], [9.0, 7.5], [12.0, 9.6], [15.0, 10.1], [18.0, 11.9]]]; var markLineOpt = { animation: false, lineStyle: { normal: { type: 'solid' } }, data: [[{ coord: [0, 3], symbol: {coord: [20, 13], symbol: 'None'}]]} var option = {title: [// configures the title component {text: titles[0], textAlign: 'center', left: '25%', top: '1%' }, { text: titles[1], left: '73%', top: '1%', textAlign: 'center' }, { text: titles[2], textAlign: 'center', left: '25%', top: '50%' }, { text: titles[3], textAlign: 'center', left: '73%' top: '50%'}], the grid: [/ / configure grid component {x: '7%', y: '7%', width: '38%', height: '38%'}, {x2: '7%', y: '7%', width: '38%', height: '38%' }, { x: '7%', y2: '7%', width: '38%', height: '38%' }, { x2: '7%', y2: '7%' width: '38%', height: '38%'}], tooltip: {/ / configure prompt box component formatter: 'Group {a} ({c})'}, xAxis: {gridIndex: 0, min: 0, Max: 20}, {gridIndex: 1, min: 0, Max: 20}, {gridIndex: 2, min: 0, Max: 20} }, {gridIndex: 3, min: 0, Max: 20}], yAxis: [// configure the y axis coordinate system {gridIndex: 0, min: 0, Max: 15}, {gridIndex: 1, min: 1, min: 1}], yAxis: [// configure the Y axis coordinate system {gridIndex: 0, min: 0, Max: 15}, {gridIndex: 1, min: 1, min: 1} 0, max: 15 }, { gridIndex: 2, min: 0, max: 15 }, { gridIndex: 3, min: 0, max: 15 } ], series: Name: 'I', type: 'Scatter ', xAxisIndex: 0, yAxisIndex: 0, data: DataAll [0], //markLine:markLineOpt}, {// Set data series 2 Name: 'II', type: ' ', xAxisIndex: 1, yAxisIndex: 1, data: DataAll [1], //markLine:markLineOpt}, {// Set data series 3 Name: 'III', type: 'scatter', xAxisIndex: 2, yAxisIndex: 2, data: DataAll [2], //markLine:markLineOpt}, {// Set data series 4 Name: 'IV', type: 'scatter', xAxisIndex: 3, yAxisIndex: 3, data: dataAll[3], //markLine:markLineOpt } ] }; // Display the graph mychart.setoption (option) with the configuration item and data just specified; </script> </body> </html>Copy the code