[echart] i. how to learn echart and its characteristic document reading notes

How to learn echart

1. First read the official website echart Description of the characteristic and User manual , Then combine Configuration item manual Try to understand every Example , And you can try to change it manually to see what effect it will have
2. After the first stage , Should be right echart I must know , Then you can go to echart Of Gallery（ Gallery ） Appreciate and learn how to use the great gods echart Drawing beautiful visual charts
3. practice

Feature documentation reading notes

Feature document gate

Rich visualization types

purpose	Chart
routine	Broken line diagram 、 Histogram 、 Scatter plot 、 The pie chart 、K Line graph
Statistics	Box diagram
Geographic Data Visualization	Map 、 Heat map 、 Line graph
Relational data visualization	The diagram 、treemap、 Sunrise chart
Multidimensional data visualization	Parallel coordinates
BI	Funnel diagram , The dashboard

dataset A format data source , Render multiple shapes

ECharts（4.0+） Added dataset characteristic , Support direct import including 2D tables ,key-value And so on , Multiple components can share a single piece of data without cloning

Interactive components

What is interaction ？ The author thinks , Interaction is when you act on something , The thing responds to you . For example, you put the mouse on echart On a column , The column specific data will be displayed , This is interaction ; But you go to the park and kick a rock , The stone is unresponsive , This is no interaction .

echart Conducted in-depth interactive data exploration , And provides some interactive components ： legend 、 Visual mapping 、 Data area scaling 、tooltip、 Data filtering

legend

The legend is a description of the contents and indicators represented by various symbols and colors concentrated in one corner or one side of the report

Visual mapping

Continuous type demo Portal

Map data to colors , It's visual mapping . Visual mapping is divided into 2 Kind of ： Continuous type 、 Segmented . The first example in the figure below is the continuous type ; The second example is segmented .

Data area scaling

demo Portal
Data area component For area scaling , So that you can freely pay attention to the detailed data information , Or overview data as a whole , Or remove the influence of outliers .

tooltip Levitation prompt box