In line charts or bar charts, it is common to see the highest and lowest values marked. In ECharts, markpoints are often used to indicate data such as high and low values, and some charts have a dotted line parallel to the X-axis, indicating data such as the mean. In ECharts, marklines are often used to show averages, etc. To better observe the highest, lowest, and average values in the data, you need to configure and use markers and markers in the chart.
In ECharts, a marker can be a maximum, minimum, average, or anywhere, and it needs to be configured under the Series field. The various attributes of the marker point are shown in the table.
A marker line in ECharts is a horizontal line parallel to the X-axis with maximum, minimum, average, and so on, which is also configured under the Series field. The various attributes of the marker line are shown in the table.
A bar chart is drawn using the sales data of commodities in a shopping mall, and the maximum, minimum and average values in the data are marked by markers and lines, as shown in the figure. As can be seen from the figure, the minimum value and maximum value in the data are marked as 15 and 100 by marker points, and the average value in the data is marked as 53.5 by marker lines.
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: 900px; height: 600px"></div> <script type="text/javascript"> Var myChart = echarts.init(document.getelementById ("main")); Var option = {color: ['green', 'red ', 'blue', 'yellow', 'grey', '#FA8072'], {// configure title component x: 55, text: 'mark points and mark lines instance ',}, toolbox: {// configure toolbox component x: 520, show: true, feature: {dataView: {// set dataView show: True}, restore: {show: true}, dataZoom: {// set area scaling show: true}, magicType: {// set dynamic type switching show: true, title: {line: }, type: ['line', 'bar']}, saveAsImage: {// Save images show: true}}}, tooltip: {// Configure the toolbox component trigger: 'axis'}, legend: {// configure the legend component data: [' sales ']}, xAxis: {// configure the X-axis coordinate system data: [" shirt "and" sweater ", "snow spins unlined upper garment", "pants", "high heels", "socks"]}, yAxis: {}, / / configuration y coordinate series: [{/ / configuration data series name: 'sales', type: 'bar', // Set the bar graph data: [15, 30, 56, 40, 100, 80], markPoint: { 'diamond', symbolSize: 25, itemStyle: {color: 'red'}},}, {type: 'min', name: 'min', symbol: 'arrow', symbolSize: 20, itemStyle: {color: 'blue'}},},]}, markLine: {// Set markLine data: [{type: 'average', name: 'average', itemStyle: // Set the marking point style {normal: {borderType: 'dotted', color: 'darkred' } }, }], } }] }; // Display the graph mychart.setoption (option) with the configuration item and data just specified; </script> </body> </html>Copy the code