The Toolbox component in ECharts contains some of the additional capabilities of visual diagrams, with several built-in subtools.

The Toolbox component in ECharts is very powerful, with six built-in sub-tools, It includes Mark, dataZoom, dataView, magicType, Restore and saveAsImage. The most important attribute of toolbox components is feature, which is the configuration item of toolbox components. The configuration of six sub-tools needs to be realized in feature. In addition to the various built-in tool buttons, developers can also customize tool buttons. Note: Custom tool names can only start with my, such as myTool1, myTool2.

In ECharts, the properties of the Toolbox components are shown in a table

Draw a line chart using the highest and lowest scores of a school’s homework from March 7, 2020 to March 22, 2020, and configure the toolbox components for the chart, as shown in the figure. As you can see from the figure, eight tools are configured in the upper right corner of the diagram.

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: 900px; height: 600px"></div> <script type="text/javascript"> Var myChart = echarts.init(document.getelementById ("main")); Var option = {color: ["red", 'green', 'blue', 'yellow', 'grey', '#FA8072'], // Use the predefined color: {// Configure toolbox components trigger: 'axis'}, legend: {// configure legend components x: 300, data: [' highest ', 'lowest ']}, Toolbox: {// Configure toolbox components show: Orient :'horizontal', // Sets the position of the toolbox component to Orient :'horizontal', and takes the default position right. (d, x, x) x: 'right', y: 'top', color: ['#1e90ff', '#22bb22', '#4b0082', '#d2691e'], backgroundColor: 'rgba(0,0,0,0)', // sets the toolbox backgroundColor borderColor: // Set the tool box margin (px). The default margin is 5. True, feature: {mark: {// set mark show: true, title: {mark: 'auxiliary line - switch ', markUndo:' auxiliary line - delete ', markClear: }, lineStyle: {width: 1, color: '#1e90ff', type: 'bootstrap'}}, dataZoom: {// Set the data area to zoom show: true, title: {dataZoom: 'zoom ', dataZoomReset:' zoom - back '}}, dataView: {// set dataView show: true, title: 'dataView ', readOnly: False, lang: [' data view ', 'close ',' refresh '], optionToContent: function (opt) {var axisData = opt.xaxis [0].data; var series = opt.series; var table = '<table style="width:100%; Text - align: center "> < tbody > < tr > < td > '+' time < / td > < td > '+' '+ series [0]. Name +' < / td > < td > '+' '+ series [1]. The name +' < / td > ' + '</tr>'; for (var i = 0, l = axisData.length; i < l; i++) { table += '<tr>' + '<td>' + axisData[i] + '</td>' + '<td>' + series[0].data[i] + '</td>' + '<td>' + series[1].data[i] + '</td>' + '</tr>'; } table += '</tbody></table>'; return table; }}, magicType: {// Set dynamic type toggle show: true, title: {line: 'dynamic type toggle - line chart ', bar:' dynamic type toggle - bar chart ', stack: 'dynamic type toggle - stack ', tiled: 'Dynamic type switch - tiled'}, type: ['line', 'bar', 'stack', 'tiled']}, restore: {// set data reset show: true, title:' restore ', color: 'black'}, saveAsImage: {// set export image show: true, title: 'saveAsImage ', type: 'jpeg', lang: [' click to save locally ']}, myTool: {// Set the custom tools button show: true, title: 'Custom extension method ', // set the default icon to a specific icon icon: "image://.. /images/girl3.gif", icon: 'image://http://echarts.baidu.com/images/favicon.png', onclick: Function () {alert(' College of Big Data and Artificial Intelligence ')}}}}, calculable: true, dataZoom: {// Configure data area zoom show: true, realtime: True, start: 20, end: 80}, xAxis: [// Configure the x coordinate system {type: 'category', boundaryGap: false, data: function () { var list = []; for (var i = 1; i <= 30; i++) { list.push('2020-03-' + i); } return list; }() } ], yAxis: [// configure the y coordinate system {type: 'value'}], series: [// configure the data series {// configure the data series 1 name: 'highest ', type: 'line', smooth: true, data: function () { var list = []; for (var i = 1; i <= 30; i++) { list.push(Math.round(Math.random() * 30) + 10); } return List;}()}, {// Set data series 2 name: 'lowest ', type: 'line', smooth: true, data: function () { var list = []; for (var i = 1; i <= 30; i++) { list.push(Math.round(Math.random() * 10)); } return list; } ()}}; // Display the graph mychart.setoption (option) with the configuration item and data just specified; </script> </body> </html>Copy the code