A radar map maps data from multiple dimensions onto axes that start at the same central point and usually end at the edge of a circle. A radar map is formed by connecting the same set of points using lines. If the coordinate axes are properly set, the area of the radar map can show some information. Radar chart combines vertical and horizontal analysis and comparison methods to show the weight of each variable in the data set, which is suitable for displaying performance data. Radar plots are not only useful for seeing which variables have similar values and whether there are outliers between them, but also for seeing which variables score high or low within a dataset. In addition, radar maps are often used to display data such as rankings, evaluations and reviews.

  1. Draw basic radar map

The number of male and female students in each education stage was checked by using the statistical data of male and female students in each education stage, as shown in the figure. As can be seen from the figure, the number of men and women at each level of education is shown. At the same time, it can be seen that there is little difference in the number of male and female students in high school and master’s level, while there is a big difference in the number of male and female students in doctoral level.

Legend source code is as follows:

<html> <head> <meta charset="utf-8"> <! <script SRC ="js/echarts.js"></script> </head> <body> <! <div id="main" style="width: 500px; height: 400px"></div> <script type="text/javascript"> Var myChart = echarts.init(document.getelementById ("main")); Var option = {backgroundColor: 'rgba(204,204,204,0.7)', // set the backgroundColor, default no background title: TextStyle: {color: 'blue', fontSize: {color: 'blue', fontSize: 18,}}, legend: {// configure the legend component show: true, // set whether to display legend icon: 'the rect, / / icon.' circle '|' the rect '|' roundRect '|' triangle '|' diamond '|' pin '|' arrow '|' none 'top:' 14 ', / / set the illustrations from the top margin left: ItemWidth: 10, itemHeight: 10, itemGap: 30, Orient: 'horizontal', / / set the layout of the legend list toward, 'horizontal' | 'vertical' textStyle: {fontSize: 15, color: '# FFF}, / / set the legend of common text style data: Name {name: 'male ', icon: 'rect', textStyle: {color: 'rgba(51,0,255,1)', fontWeight: 'bold'}}, // set the textStyle of the legend item {name: 'female ', icon: 'rect', textStyle: {color: 'rgba(255,0,0,1)', fontWeight: 'bold' } } //'normal'|'bold'|'bolder'|'lighter' ], }, tooltip: {// Setup details prompt box component // Set the radar map's tooltip to be within the div and position to be within the confine as the mouse moves: Enterable: true, // Sets whether the tooltip box is limited to the area of the graph. Enterable: true, // Sets whether the mouse can move to the area of the graph. Radius: 160, // Set the radius of the circle, the first item is the inner radius, the second item is the outer radius: TextStyle: {fontSize: 15, color: // Set the start Angle of the coordinate system, which is the Angle of the first indicator axis '#000'}}, nameGap: 2, // Set indicator name and indicator axis distance, default 15 splitNumber: 2, // Set the number of segments for the indicator axis, default //shape:'circle', // Set the radar drawing type, support 'polygon','circle' // Set the axis axis to axisLine: {lineStyle: {color: LineStyle: {color: '# FFF ', width: 1, type: 'solid',}}, // Set the axes in the grid to separate lines. 1,}}, splitArea: {show: true, areaStyle: {color: ['# ABC ', '# ABC ', '# ABC ', '# ABC ']}}, {name: 'senior ', Max: 9000000}, {name:' junior ', Max: 5000000}, {name: 'junior ', Max: 5000000}, {name:' undergraduate ', Max: 3500000}, {name: 'Master ', Max: 800000}, // Set indicator name, Max, label color {name:' Doctor ', Max: 20000}]}], series: [{name: 'master ', Max: 800000}, // Set indicator name, Max, label color {name:' Doctor ', Max: 20000}]}], series: [{name: Type: 'radar', // Series type: Radar map / / a turning point, 'circle' | 'the rect' | 'roundRect' | 'triangle' | 'diamond' | 'pin' | 'arrow' | 'none' symbol: 'triangle' itemStyle: {/ / set the line style of inflection point mark normal: {graphics.linestyle: {width: 1}, opacity: 0.2}, / / set the style of the ordinary state emphasis: {graphics.linestyle: {width: Data: [// Set the data of the radar chart to be multivariable (degree) {// set the first data item name: 'woman ', // set the data item name: value: [4400000, 2700000, 1600000, 380000, 7000], // symbol: 'triangle', symbolSize: ItemStyle: {normal: {borderColor: 'blue', borderWidth: 3}}, lineStyle: Opacity: 0, opacity: 0, opacity: 0, opacity: 0, opacity: 0, opacity: 0, opacity: 0, opacity: 0, opacity: 0, opacity: 0, opacity: 0, opacity: 0 {normal:{color:'red'}} // Set the single area fill style}, {// set the second data item name: 'male ', value: [4600000, 2300000, 1900000, 420000, 13000], symbol: 'circle', symbolSize: 5, itemStyle: {normal: BorderColor: 'rgba(51,0,255,1)', borderWidth: 3,}}, lineStyle: {normal: {color: 'blue', width: 1, opacity: 0.9}}, / / areaStyle: {normal: {color: 'blue'}} / / set the individual area filling style}}],]}. // Display the graph mychart.setoption (option) with the configuration item and data just specified; </script> </body> </html>Copy the code

The basic radar chart is a relatively simple radar chart. When drawing a slightly more complex radar diagram using the browser ratio change data, see the figure below. As you can see from the figure, the prediction of each browser’s share is shown, and a visualMap component is added, which dimension of the data is mapped to what visual element. In addition, a scroll legend has been added.

The legend source code is as follows:

<html> <head> <meta charset="utf-8"> <! <script SRC ="js/echarts.js"></script> </head> <body> <! <div id="main" style="width: 500px; height: 400px"></div> <script type="text/javascript"> Var myChart = echarts.init(document.getelementById ("main")); Var option = {backgroundColor: 'rgba(204,204,204,0.7)', // set the backgroundColor, default no background title: {// Configure the title component text: 'browser ratio changes ', textStyle: {color: 'blue'}, top: 20, left: 30}, tooltip: {trigger: 'item', backgroundColor: 'rgba(0,0,250,0.8)'}, legend: {// configure the scroll component type: ', bottom: 15, data: (function () { var list = []; for (var i = 1; i <= 28; i++) { list.push(i + 2000 + ''); } return list; })() }, visualMap: { top: '47%', right: 20, color: ['red', 'yellow'], calculable: true }, radar: {// Configure the radar map coordinate component, only for radar map nameGap: 2, // Set the indicator name and the distance of the indicator axis, the default is 15 indicator: [// Set the radar map variable, corresponding to the value in data {text: 'IE8-', max: 400, color: 'green' }, { text: 'IE9+', max: 400, color: 'green' }, { text: 'Safari', max: 400, color: 'blue' }, { text: 'Firefox', max: 400, color: 'blue' }, { text: 'Chrome', max: 400, color: 'red' } ] }, series: (function () {var series = []; for (var i = 1; i <= 28; I++) {series.push({name: 'browser (data is fiction)', type: 'radar', symbol: 'none', lineStyle: {width: 1}, emphasis: {areaStyle: {color: 'rgba(0,250,0,0.3)'}}, data: [ (40 - i) * 10, (38 - i) * 4 + 60, i * 5 + 10, i * 9, i * i / 2 ], name: i + 2000 + '' }] }); } return series; ()}}); // Display the graph mychart.setoption (option) with the configuration item and data just specified; </script> </body> </html>Copy the code
  1. Draw multiple radar maps

The basic radar diagram, introduced earlier, can represent only one class of dimensional variables. When you want to represent the dimensional variables of several different things at the same time, you need to use the multi-radar diagram to display. Different dimensional variables in the three types of data are shown by using the performance of a software, the functions of Xiaomi and iPhone, and the data of precipitation and evaporation, as shown in the figure. As can be seen from the figure, three different radar charts are shown. When the mouse moves over a dimension of a radar diagram, the detailed information of that dimension is displayed.

<html> <head> <meta charset="utf-8"> <! - introduce ECharts file -- > < script SRC = "https://cdn.bootcss.com/echarts/4.8.0/echarts.js" > < / script > < / head > < body > <! <div id="main" style="width: 700px; height: 600px"></div> <script type="text/javascript"> Var myChart = echarts.init(document.getelementById ("main")); Var option = {// Specify the chart configuration item and data color: ["red", 'green', 'blue', '#660099', '#FA8072', 'grey'], // Use your own predefined color backgroundColor: 'rgba(128, 128, 128, 0.1)', //rgba set transparency 0.1 title: {// configure the header component text: 'multi echo chart ', top: 15, textStyle: {color: 'Green', left: 240}, tooltip: {trigger: 'axis'}, legend: {top: 560, left: 140, data: {nameGap: 3, shape: {nameGap: 3, shape: {nameGap: 3, shape: 'polygon', //'polygon'|'circle' name: { textStyle: { fontSize: 12, color: '#fff', backgroundColor: 'Green ', borderRadius: 3, padding: [2, 2]}}, indicator: [// Set the indicator to value {text:' brand ', Max: 100}, {text: 'content', Max: 100}, {text: 'availability, Max: 100}, {text:' function, Max: 100}], center: [' 25% ', '30%'], the radius: 80 / / specify the location of the first radar map}, {nameGap: 3, shape: 'polygon' / / 'polygon' | 'circle' name: {textStyle: {fontSize: 12, color: '# FFF ', backgroundColor: 'blue', borderRadius: 3, padding: [2, 2]}}, // Set indicator: [{text: 'look, Max: 100}, {text:' photos, Max: 100}, {text: 'system', Max: 100}, {text: 'performance, Max: 100}, {text:' screen, Max: 100}], center: ['60%', '30%'], radius: 80 // Specify the location of the 2nd radar chart}, {nameGap: 3, Shape: 'polygon', //'polygon' and 'circle' name: { textStyle: { fontSize: 12, color: 'red', backgroundColor: 'lightblue', borderRadius: 3, padding: [2, 2]}}, indicator: (function () {var res = []; for (var I = 1; I <= 12; I ++) {res.push({text: I + '/ ', Max: 100});} return res;}) (), center: [' 41% ', '67%'], the radius: 80, / / specify the location of the third radar map}], the series: Tooltip: {trigger: 'item'}, itemStyle: {normal: {areaStyle: {type: Data: [{value: [65, 72, 88, 80], name: 'some software'}]}, {// Set the second data item: xiaomi and Apple type: 'radar', radarIndex: 1, tooltip: {trigger: 'item'}, data: [// Sets the second data item {value: [85, 90, 90, 95, 95], name: }, {value: [95, 80, 95, 90, 93], name: 'apple'}]}, {// Set precipitation and evaporation type: 'radar', radarIndex: 2, tooltip: {trigger: 'item'}, itemStyle: {normal: {areaStyle: {type: 'default'}}}, data: [// set the specific data of the third item {name: 'precipitation, value: [5, 6, 9, 56, 69, 73, 77, 88, 50, 22, 7, 5]}, {name: evaporation, value: [3, 5, 8, 34, 45, 77, 68, 65, 36, 23, 7, 4}}}]]; // Display the graph mychart.setoption (option) with the configuration item and data just specified; </script> </body> </html>Copy the code