Explanation of ECharts related configuration items (detailed)

Explanation of related configuration items

First understand the functions of the following 9 configurations, and then refer to the documentation for other configurations and specific details: Document menu——Configuration item manual The key to learning echarts is to learn to consult documents and modify configurations according to needs.

Detailed configuration item official documentation: https://echarts.apache.org/zh/option.html#title

The following is an explanation of commonly used configuration items

title : title component

title: {
          text: 'ECharts 入门示例'
        },

tooltip : prompt box component

tooltip: {
    trigger: 'axis'
  },

When the mouse hovers over a certain point of the line graph, the information of this prompt box will appear. This is the tooltip, and the same is true for other graphs.

Each value of trigger is analyzed:

	‘axis’：坐标轴触发，主要在柱状图，折线图等会使用。
	'item'：图形形状触发，主要用在散点图、饼图等无类目轴的图标中使用。
	'none'：什么都不触发。

formatter analysis

	formatter: "{a} <br/>{b} : {c}({d}%)"
	a 代表 series 系列图标名称
	b 代表 series 数据名称 data 里面的 name
	c 代表 series 数据值 data 里面的 value
	d 代表当前数据/总数据的比例

legend : legend component

legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },

toolbox : toolbar

toolbox: {
    feature: {
      saveAsImage: {}
    }
  },

grid : drawing grid in Cartesian coordinate system

grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },

The area in the red frame is the grid grid.
left, right, and bottom are the distance from the grid to the big box, which can also be considered as the margin;
containLabel:true means to display the number of the y-axis (scale or ruler), if you do not add this sentence + left: 0% , the grid grid will coincide with the left of the box box.
When the scale label overflows, whether the grid area contains the scale label of the coordinate axis. If true, ticks are shown; if false, ticks are not shown. If the left, right, bottom, etc. are set to 0%, the scale label will overflow, and it is decided at this moment whether to display the scale label.

xAxis : x-axis

 xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },

type: 'category' means the category axis, which is suitable for discrete category data. For this type, category data must be set through data .
boundaryGap: false means dividing line and gap. The default is true. At this time, the scale is only used as a separator, and the labels and data points will be in the middle of the band between the two scales .

boundaryGap: when true

boundaryGap: false

yAxis : y-axis

 yAxis: {
    type: 'value'
  },

No modification is required, it will be modified automatically according to the data of the x-axis.

series : list of series (emphasis)

There are as many lines as there are objects! ! !

1. type determines your own icon type (what type of icon)

2. name: series name, used for tooltip display, legend legend filter change

3. stack: Data stacking. If the same value is set, the data will be stacked.
   Data stacking:
   second data value = first data value + second data value third data
   value = second data value + third data value ... stacked in sequence

   If you specify a different value for stack or remove this attribute , data stacking will not occur.

The setting and use of radius, center, roseType

radius : ["10%", "70%"] If it is a percentage, double quotes must be added.
radius : [50,100] If it is a pixel value, you don’t need to add double quotes.

radius : ["10%", "70%"] means the radius of the inner circle is 10%; the radius of the outer circle is 70%.
center: ["50%", "50%"] indicates that the position of the graphic is centered horizontally and vertically.
roseType: “radius” (radius mode) or roseType: “area” (area mode)

If the font is beyond the scope of the box and is blocked by the box, you can use the following method:

Method 1:
Make the font smaller in
the label object in the series

Method 2:
Make the guide line a little shorter
The labelLine object in the series

color : list of palette colors

If only one color is written, the effect is that all five polylines are of this color. The point is that color needs to be written between tooltip and series.

color: ['pink','blue','skyblue','red','purple'],

summary

Only two of the nine configuration items are arrays: color and series list