This is the first day of my participation in the wenwen Challenge

Analysis of all parts of echart histogram

The detailed configuration is in the “Chart basic Configuration Items and Data” section at the end

Echarts Settings bar chart

Series > barWidth:

BarWidth: 20 // Set the bar chart sizeCopy the code

Echarts Settings bar chart

Series > itemStyle > normal > color:

Series: [{/ / set the color histogram gradient itemStyle: {normal: {color: new echarts. Graphic. That LinearGradient (0, 1, 0, 0, [{offset: 0, color: "# 1268F3 "// 0, {offset: 0.6, color: "#08a4fa" // 60% of the color}, {offset: 1, color: "# 1268F3" // 0% of the color}, {offset: 1, color: "# 1268F3 "// 0% of the color}, {offset: 1, color: "#01ccfe" // color at 100%}], false)}},}]Copy the code

Echarts setup bar chart

Series > itemStyle > Normal > label:

Series: [{itemStyle: {normal: {label: {show: true, // open display position: 'top', // display textStyle: {// number style color: 'black', fontSize: 16 } } } }, }]Copy the code

Echarts bar chart set [different colors], and automatically cycle the existing colors;

Series > itemStyle > Normal > label:

Display colors in array order, loop through existing colors if the number of columns is greater than the number of colors

ItemStyle: {normal: {// function(params) { var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622']; // var colorList = ['#c23531','#2f4554', '#61a0a8']; Return colorList[params.dataindex % colorlist.length]; }}}Copy the code

Echart charts basic configuration items and data

Title the title

title: { text: 'histogram example, textStyle: {/ / - main title content style color: # 000,}, subtext:' the author: Axjy', subtextStyle:{color:'# BBB '}, padding:[10,0,0,0]//Copy the code

Legend legend

legend: {type:'plain',//---- legend type, default is 'plain', //---- scroll' top:'1%', top\bottom\left\right textStyle:{//---- scroll content style color:'#000', //-- font color for all legends //backgroundColor:'black', //-- font color for all legends}, data: [/ / content - illustrations {name: 'sales' icon:' roundRect ', / / - legend frame style 'circle', 'the rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none' textStyle:{color:'#000', //---- set the color of a legend separately //backgroundColor:'black',//-- set the font backgroundColor of a legend separately}}]},Copy the code

The grid area

Grid :{show:false, //-- Whether to display rectangular coordinate grid top:80, //-- relative position, top\bottom\left\right tooltip:{//-- mouse focus on graph, The prompt box show: true, trigger: 'item', / / - trigger type textStyle: {/ / - prompt box style color: '# FFF,},}},Copy the code

The X-axis and Y-axis have basically the same properties

xAxis(yAxis): {show: true, / / - whether to display the name: 'in', / / name - axis position: 'bottom', / / - x axis position 'top', 'bottom' offset: 15, NameLocation :'start', //-- axis name relative position 'start','center','end' nameTextStyle:{color:"#000", NameGap :15, nameGap:15, nameGap:15, nameGap: 0, nameGap: 0, nameGap: 0, nameGap: 0, nameGap: 0, nameGap: 0, nameGap: 0, nameGap: 0, nameGap: 0, nameGap: 0, nameGap: 0, nameGap: 0, nameGap: 0, nameGap: 0, nameGap: 0, nameGap: 0 [' January ',' February ',' March ',' April ',' May ',' June ',' July '],},Copy the code

Axis of coordinate

XAxis > axisLine or yAxis > axisLine

AxisLine: {/ / show - coordinate axis: true, / / show / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the arrow -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- symbol: [' none ', 'arrow], / / - whether display axis symbolSize arrow: [8, 8], / / - size symbolOffset arrow: [0, 7]. / / / / - arrow position -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- line -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- graphics.linestyle: {color: # 000, width: 1, type: 'solid'},},Copy the code

Coordinate scale

XAxis > axisTick or yAxis > axisTick

AxisTick: {/ / - axis calibration show: true, / / - whether display inside: false, / / - whether incoming lengt: 3, / / - length graphics.linestyle: {/ / color: 'red', / / -- - the default for the color of the axis  width:1, type:'solid', }, },Copy the code

Axis label

XAxis > axisLabel or yAxis > axisLabel

AxisLabel: {/ / - axis labels show: true, / / - whether display inside: false, / / - whether itself rotate: 10, / / - rotation Angle margin: 8, / / -- - the distance between the axis calibration label with / / color: 'red', / / -- - the default in axis color},Copy the code

A partition line in a grid area

XAxis > splitLine or yAxis > splitLine

{//-- display 'category'; //-- display 'category'; //-- display 'category'; LineStyle :{color:'#666', width:1, type:' err ',//-- 'solid', 'dotted', 'dotted'},},Copy the code