Line chart: line
Var option={ xAxis:{type:'category',data:[],boundaryGap:false//close to the y-axis, close to the edge}
yAxis: {type: value, scale: 0 //Scaling, out of 0 scale, the polyline starts from the minimum, not from 0},
series:[ //Each item in it is a line chart
{name:'', data:[],markPoint:{data:[{}{}]},markLine:{type:average},markArea:{data:[]}//label interval, smooth:true // smooth,lineStyle:{color:red,type:'dashed'} //set line node, line control, areaStyle:{color:pink}}//fill style }
]
}
Line chart summary:
- Basic line chart: basic code structure, x-axis and y-axis data, type in series is set to line
- Common effects of line charts: maximum value, minimum value, average value-markPoint, markLine, markArea
Line display: smooth lineStyle
fill style areaStyle
Close to the edge: boundaryGap
Scale from 0 value scale: true
Stacked chart: stack
- Line chart features: Line charts are often used to analyze data trends over time
Scatter plot: scatter
Scatterplots can help us infer correlations between variables
relationship between height and weight
Implementation steps: 1. The most basic code structure of Echarts: import js file, DOM container, initialize object, set option
2. x-axis data and y-axis data: preparation of two-dimensional array
Array 1: [[height 1, weight 1], [height 2, weight 2], [height 3, weight 3], ...]
3. Chart type: set type under series: scatter, xAxis and yAxis must be set to value
4. Adjustment: set the coordinate axes to be out of 0 value scale, scale
Common effects of scatter plots:
- Bubble effect - the size of the scatter point symbolSize: 30 or a callback function (for example, if the height/weight is greater than 30, it will be displayed in red, and if it is smaller than that, it will be displayed in green; the color of the scatter plot is different: itemStyle.color
- Ripple animation effect: type:effectScatter,showEffectOn:'emphasis',rippleEffect:{}
Scatter plot summary:
Basic scatter plot: 1. Basic code structure, 2. The data of X-axis and y-axis is a two-dimensional array
3. The type in series is set to scatter 4. The type in xAxis and yAxis is set to value
The effect of scatter plot: 1. Bubble chart, 2. Ripple effect
Features of scatter plots: scatter plots can help us infer the correlation between data at different latitudes, and scatter plots are often used in map labels