A Bar chart (Bar) is one of the commonly used charts. It consists of a series of longitudinal or transverse stripes with different lengths to represent the data distribution. The horizontal axis is generally used to represent the data type and the vertical axis to represent the distribution. ECharts provides a variety of bar charts. To visualize merchandise sales data, AD category data, demographic data, and living consumption data, you need to draw different bar charts in ECharts to display, such as standard, stack, bar, and waterfall charts.

The core idea of bar charts is comparison. They are often used to show changes in data over a period of time or to show the comparison between items. Bar graphs are useful in two-dimensional data sets (each data point contains two values X and y), but only one dimension needs to be compared. For example, annual sales are two-dimensional data, “year” and “sales”, but you only need to compare the “sales” dimension. The bar chart uses the height of the column to reflect the differences in data. The naked eye is very sensitive to height difference, and the recognition effect is very good. Generally, the X-axis of a bar graph is a temporal dimension, and users habitually assume that there is a temporal trend. If the x axis is not a time dimension, it is recommended to distinguish each column with a different color to change the user’s attention to the time trend. The limitation of bar charts is that they can only be used for small and medium-sized data sets.

A standard bar chart is drawn using a year’s sales data of a certain commodity, as shown in the figure below

Annotate the various components in the graph, as shown. A chart generally contains grid areas for displaying data, X axis, Y axis (including axis label, axis scale, axis name, axis dividing line, axis arrow), main/subtitle, legend, data label and other components. Each of these components plays a specific role in the diagram and expresses specific information. However, not all of these components are necessary, and when the information is clear enough, you can simplify some of them to make the diagram more concise.

In the pile-up histogram, the values on each column represent different data sizes, and the sum of data of each layer represents the height of the whole column. Stacked bar charts are suitable for comparison of a small number of categories, and the contrast information is particularly clear. The stacked bar chart shows the relationship between a single item and the whole, which can vividly show the data of each sub-category contained in a large category and the proportion of each sub-category, making the chart clearer. When it is necessary to visually compare whole data, the clustering histogram is not suitable but the accumulation histogram is suitable. An accumulation histogram is drawn by using the viewing data generated by different types of advertising in a week, as shown in the figure.

In the figure, there are four columns of daily data. Among them, the second column is stacked and consists of three different types of advertising, namely email marketing, affiliate advertising and video advertising. The length of the second column represents the sum of these three different types of advertising. The fourth pillar is also stacked, consisting of Baidu, Google, Bing and four other different types of search engines, while the third pillar is the sum of the four search engines in the fourth root.

This is the final plot

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: 400px"></div> <script type="text/javascript"> Var myChart = echarts.init(document.getelementById ("main")); BackgroundColor: '# 2c343C ', title: {backgroundColor: '# 2c343C ', title: {backgroundColor: '# 2c343C ', title: { {color: '# FFF '}, subtext: 'This is the subtitle ', // set the subtitle style subtextStyle: {color: '# BBB'}, padding: [10, 0, 100, 100] // Set the caption position, use the padding attribute to position}, legend: {// configure the legend component type: 'plain', // Set the legend type, default is 'plain', if there are many legends use 'scroll' top: '1%', // set the legend relative to the container position, top\bottom\left\right selected: {' sales ': TextStyle: {// Set the content style of the legend color: '# FFF ', // set the font color of all legends //backgroundColor: 'black', // Set all legend font background color}, tooltip: {// set legend prompt box, default does not show: true, color: 'red',}, data: [// set legend content {name: 'sales ', icon: TextStyle: {color: '# FFF ', // set the color of a legend separately //backgroundColor: }}],}, tooltip: {// Configures the tooltip component show: true, // configures whether to display the tooltip, default is true trigger: 'item', // sets the data item graph to trigger axisPointer: {// Sets the indicator style type: 'shadow', axis: 'auto',}, padding: 5, textStyle: Color: "# FFF ",},}, grid: {// configure the grid area show: false, // set whether to display the rectangular coordinate system grid top: 80, // Set the relative position, top bottom left right containLabel: false, // Set the grid area to contain the scale label of the coordinate axes tooltip: {// mouse focus on the graph, the resulting prompt box show: True, trigger: 'item', // set the trigger type textStyle: {color: '#fff666', // set the prompt text color}}}, xAxis: {// configure the X-axis coordinate system show: Position: 'bottom', // set x offset: 0, // Set x offset from the default position type: 'category', // Set the axis type, default 'category' name: 'month ', // Set the axis name nameLocation: 'end', // Set the axis name relative position nameTextStyle: {// Set the color: "# FFF ", the padding: [5, 0, 0, -5],}, // Set the nameGap: // set the axis name to the distance between the axis //nameRotate:270, // set the axis nameRotate axisLine: {// set the axis axis show: true, // set the axis axis to display symbol: ['none', 'arrow'], // Set whether to display axis arrows symbolSize: [8, 8], // Set arrow size symbolOffset: [0, 7], // Set arrow position lineStyle: {// Set line color: '# FFF ', // set the color of the axis width: 1, // set the line width of the axis type: 'solid', // set the line width of the axis},}, axisTick: {// Set the axis scale show: Lengt: 3, // Set the length lineStyle: {color: Type: 'solid', // Set the line width of the axis scale},}, axisLabel: { Rotate: 0, rotate: 0, rotate: 0, rotate: 0, rotate: 0, rotate: 0 }, // set the distance between the scale label and the axis //color:'red',}, // set the default axis color splitLine: {// set the partition line in the grid area show: False, // set lineStyle: {color: 'red', //width:1, //type:'solid',},}, splitArea: {// set grid area show: False,}, // Set whether the grid area is displayed. The default is false data: [" January ", "February", "march", "April", "may", "June", "July", "August", "September", "October", "November", "December"]}, yAxis: {/ show/configuration y coordinate system: Position: 'left', // Set y axis offset: 0, // Set y axis offset from the default position type: 'value', // Set axis type, default 'category' name: NameLocation: 'end', // Set axis name. Value nameTextStyle: {// Set axis name style. Color: "# FFF ", padding: [5, 0, 0, 5],}, // set the axis name relative position nameGap: 15, // set the axis name and the distance between the axis nameRotate: 0, // set the axis nameRotate axisLine: {// set the axis axis show: If true, / / set the coordinate axis display / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the arrow -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - the symbol: ['none', 'arrow'], // Set whether to display axis arrows symbolSize: [8, 8], // Set arrow size symbolOffset: [0, 7], // Set arrow position lineStyle: {// Set line color: '# FFF ', width: 1, type: 'solid',},}, axisTick: {// Set the axis scale show: true, // set whether the axis scale display inside: LineStyle: {//color:'red', // Set the default axis color width: 1, type: Rotate: {'solid',},}, axisLabel: {// set the axisLabel show: true, // set the axisLabel inside: false, // set the axisLabel inward: false, // set the axisLabel inward: Margin: 0, / / set the rotated Angle 8, / / set the distance between the axis calibration label with / / color: 'red', / / set the default in axis color}, splitLine: {/ / set the grid dividing line in the area in the show: LineStyle: {color: '#666', width: 1, type: 'bootstrap ',},}, splitArea: {// Set the bootstrap area show: {// set the bootstrap area show: {// set the bootstrap area show: },}, series: [{// Set the series list, each series controls the series chart type by type name: 'sales ', // set the series name type: 'legendHoverLink ', // Sets type legendHoverLink: true, // Sets series to enable linkage highlighting of the legend hover label: {// Sets the text label on the graph show: false, position: Rotate: 0, // Rotate: 0 color: '#eee',}, itemStyle: { BarBorderRadius: [18, 18, 0, 0],}, barWidth: '20', // set the barWidth barCategoryGap: '20%', // set the bar spacing data: [3020, 4800, 3600, 6050, 4320, 6200, 5050, 7200, 4521, 6700, 8000, 5020]}]; // Display the graph mychart.setoption (option) with the configuration item and data just specified; </script> </body> </html>Copy the code