Echarts Basic Introduction: General Configuration of Bar Chart and Line Chart

1Basic steps of echarts

Four Steps

1 Find the DOM container

2 Initialization

3 Configuration options

4 setOptions

Almost all 124 steps are the same. Options are configuration items. You can set whatever icon you want to present.

The most basic bar chart with maximum and minimum values

2 Average value markLine attribute

3 numerical display bar width, horizontal bar chart

Numerical display label attribute

Column width barWidth

If it is horizontal, you only need to pay attention to the transformation of the two axes.

General configuration is the general configuration of pie chart and scatter chart

title

tooltip: Tips

toolbox tool button

legend

Tooltip prompt box component, prompt when the mouse moves over the chart

The formatter can also set the function

toolbox

It can export pictures, data views, dynamic type switching, data area zoom, reset and other five tools and functions

legend, used to filter series, needs to be used with series

The basic usage of the four common configurations is like this

title title tooltip tool button toolbox legend: legend

Line chart

Basic drawing

Average value of size, marked interval

The average value of the size is exactly the same as the bar chart

Mark Area

Line control smoothness

Fill Style

Close to the edge

Y-axis range

scale

To stack the chart, set each stack: 'all'

normal

Will overlap, you can set

Each series adds

It will become like this, there will be no overlap, but pay attention to the changes in the y-axis. The starting point of the upper line is 1000, it just adds 1000 upwards.

Plus areaStyle

The stacking effect is even more obvious.

Summarize

This is the end of this article about the basic introduction to Echarts: general configuration of bar charts and line charts. For more relevant content about the general configuration of Echarts bar charts and line charts, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!