Regarding the usage of xAxis type time, the option is at the end of the text, and there are some instructions before it.
Usually, echarts or highcharts are mostly used for data visualization in projects. Generally, line charts, histograms, and pie charts are more commonly used. The most common ones are this:
This general x-axis and y-axis data correspond one-to-one. This is the most common usage, so I won’t talk about it. Today's article records the fact that the x-axis scale and the y-axis data are not in one-to-one correspondence. At this time, the type of xAxis is generally time, which is written in the echarts configuration item manual :
Not to mention other tooltips and the like, they are relatively common. Let me talk about the configuration of xAxis first:
xAxis: {
type: 'time',
boundaryGap: false,
// min: '2022-06-13',
// max: '2022-10-13'
},
Note that min and max can be set or not set here. If not set, echarts will automatically generate the scale of the x-axis according to the data in your series:
Another point is that the values of min and max can be string time or timestamp, which also involves IE .
Complete options:
option = {
title: {
text: 'Stacked Line'
},
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {
}
}
},
xAxis: {
type: 'time',
boundaryGap: false,
min: '2022-06-13',
max: '2022-10-13'
},
yAxis: {
type: 'value'
},
legend: {
data: ['line---1', 'line----2', 'line-----3', 'line-----4'],
},
series: [
{
type: 'line',
name: 'line---1',
data: [
['2022-10-1', 12],
['2022-10-2', 45],
['2022-10-3', 35],
['2022-10-4', 34],
['2022-10-5', 43],
['2022-10-6', null],
['2022-10-7', null],
['2022-10-8', 45],
['2022-10-9', 86],
['2022-10-10', 86],
['2022-10-11', 4],
['2022-10-12', 23],
['2022-10-13', 47],
]
},
{
type: 'line',
name: 'line----2',
data: [
['2022-10-1', 50],
['2022-10-2', 23],
['2022-10-3', 56],
['2022-10-4', 23],
['2022-10-5', 67],
['2022-10-6', 66],
['2022-10-7', 78],
['2022-10-8', 67],
['2022-10-9', 55],
['2022-10-10', 80],
['2022-10-11', 90],
['2022-10-12', 67],
['2022-10-13', 56],
]
},
{
type: 'line',
name: 'line-----3',
data: [
['2022-10-1', 67],
['2022-10-2', 34],
['2022-10-3', 26],
['2022-10-4', 27],
['2022-10-5', 34],
['2022-10-6', 53],
['2022-10-7', 78],
['2022-10-8', 56],
['2022-10-9', 80],
['2022-10-10', 95],
['2022-10-11', 86],
['2022-10-12', 67],
['2022-10-13', 26],
]
},
{
type: 'line',
name: 'line-----4',
data: [
['2022-10-1', null],
['2022-10-2', null],
['2022-10-3', null],
['2022-10-4', 40],
['2022-10-5', 80],
['2022-10-6', 87],
['2022-10-7', 98],
['2022-10-8', 33],
['2022-10-9', 35],
['2022-10-10', 78],
['2022-10-11', 48],
['2022-10-12', 67],
['2022-10-13', 30],
]
}
],
};
You can copy the above option to the echarts official website demo to see the effect.
Finally, a reminder: I wrote the above data casually, because there are nulls, so the broken line is disconnected, and you can also set the connection at the empty data by yourself.
Hope this article helps you.