例一：
简单的折线图，优化如下：
- 隐藏x和y轴的标识
- 设置区域颜色。
- 加粗线，并制定颜色。
option = {
grid: {
left: 0,
right: 0,
top: 0,
bottom: 0
},
xAxis: {
show: false,
type: 'category'
},
yAxis: {
show: false,
type: 'value'
},
series: [
{
data: [50, 70, 71, 34, 37, 44, 100],
type: 'line',
smooth: true,
symbol: 'none',
lineStyle: {
color: '#5ac1e1',
width: 5
},
areaStyle: {
color: '#d8eff9'
}
}
]
};
例二：
option = {
title: {
left: 'center',
top: 'middle',
textStyle: {
fontSize: 12,
color: '#ccc'
},
text: '我是标题'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'time',
splitNumber: 6,
show: false,
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {}
},
yAxis: {
show: false,
max: 44.13,
min: 0,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
margin: 20,
textStyle: {
align: 'left',
baseline: 'bottom'
}
},
splitLine: {
show: false,
lineStyle: {
color: '#ccc',
width: 0.5,
type: 'dotted'
}
}
},
color: ['#3DCCA6', '#39F'],
legend: {
itemWidth: 10,
itemHeight: 10,
left: 0,
top: 0,
padding: [0, 0, 5, 0],
data: [
{
name: 'CPU使用率 (%)',
icon: 'rect',
textStyle: {
fontSize: 14,
color: '#3DCCA6'
}
},
{
name: '内存使用率 (%)',
icon: 'rect',
textStyle: {
fontSize: 14,
color: '#39F'
}
}
]
},
grid: {
left: 0,
right: 0,
top: 20,
bottom: 10
},
series: [
{
name: 'CPU使用率 (%)',
type: 'line',
lineStyle: {
normal: {
width: 2
}
},
areaStyle: {
normal: {
opacity: 0.1
}
},
smooth: true,
data: [
[1681985820000, '6.47'],
[1681985880000, '5.66'],
[1681985940000, '14.18'],
[1681986000000, '6.31'],
[1681986060000, '8.31'],
[1681986120000, '6.37'],
[1681986180000, '6.37'],
[1681986240000, '6.31'],
[1681986300000, '6.03'],
[1681986360000, '5.71'],
[1681986420000, '5.23'],
[1681986480000, '5.84'],
[1681986540000, '7.75'],
[1681986600000, '7.18'],
[1681986660000, '12.05'],
[1681986720000, '5.98'],
[1681986780000, '6.16'],
[1681986840000, '6.78'],
[1681986900000, '5.57'],
[1681986960000, '4.46'],
[1681987020000, '5.81'],
[1681987080000, '7.41'],
[1681987140000, '6.44'],
[1681987200000, '5.30'],
[1681987260000, '7.99'],
[1681987320000, '6.69'],
[1681987380000, '6.45'],
[1681987440000, '5.98'],
[1681987500000, '5.50'],
[1681987560000, '6.02'],
[1681987620000, '6.39'],
[1681987680000, '7.85'],
[1681987740000, '6.50'],
[1681987800000, '9.12'],
[1681987860000, '6.73'],
[1681987920000, '5.38'],
[1681987980000, '6.89'],
[1681988040000, '6.34'],
[1681988100000, '4.99'],
[1681988160000, '5.83'],
[1681988220000, '5.73'],
[1681988280000, '10.77'],
[1681988340000, '6.90'],
[1681988400000, '14.42'],
[1681988460000, '6.38'],
[1681988520000, '6.57'],
[1681988580000, '5.98'],
[1681988640000, '5.41'],
[1681988700000, '6.93'],
[1681988760000, '5.56'],
[1681988820000, '5.35'],
[1681988880000, '6.54'],
[1681988940000, '5.80'],
[1681989000000, '8.90'],
[1681989060000, '7.32'],
[1681989120000, '5.49'],
[1681989180000, '7.59'],
[1681989240000, '5.98'],
[1681989300000, '6.62'],
[1681989360000, '5.13'],
[1681989420000, '6.59']
]
},
{
name: '内存使用率 (%)',
type: 'line',
lineStyle: {
normal: {
width: 2
}
},
areaStyle: {
normal: {
opacity: 0.1
}
},
smooth: true,
data: [
[1681985820000, '37.38'],
[1681985880000, '37.39'],
[1681985940000, '42.91'],
[1681986000000, '43.13'],
[1681986060000, '41.18'],
[1681986120000, '42.97'],
[1681986180000, '40.29'],
[1681986240000, '37.37'],
[1681986300000, '37.36'],
[1681986360000, '37.36'],
[1681986420000, '37.36'],
[1681986480000, '37.35'],
[1681986540000, '42.77'],
[1681986600000, '42.95'],
[1681986660000, '42.81'],
[1681986720000, '42.96'],
[1681986780000, '37.32'],
[1681986840000, '37.32'],
[1681986900000, '37.31'],
[1681986960000, '37.31'],
[1681987020000, '37.31'],
[1681987080000, '40.75'],
[1681987140000, '42.99'],
[1681987200000, '40.25'],
[1681987260000, '42.92'],
[1681987320000, '43.00'],
[1681987380000, '37.28'],
[1681987440000, '37.28'],
[1681987500000, '37.27'],
[1681987560000, '37.27'],
[1681987620000, '37.26'],
[1681987680000, '39.31'],
[1681987740000, '42.90'],
[1681987800000, '41.22'],
[1681987860000, '43.03'],
[1681987920000, '40.14'],
[1681987980000, '37.23'],
[1681988040000, '37.22'],
[1681988100000, '37.22'],
[1681988160000, '37.21'],
[1681988220000, '37.21'],
[1681988280000, '42.85'],
[1681988340000, '42.99'],
[1681988400000, '41.43'],
[1681988460000, '42.99'],
[1681988520000, '37.19'],
[1681988580000, '37.18'],
[1681988640000, '37.18'],
[1681988700000, '37.17'],
[1681988760000, '37.16'],
[1681988820000, '37.36'],
[1681988880000, '42.92'],
[1681988940000, '42.96'],
[1681989000000, '42.61'],
[1681989060000, '42.82'],
[1681989120000, '37.14'],
[1681989180000, '37.13'],
[1681989240000, '37.12'],
[1681989300000, '37.12'],
[1681989360000, '37.12'],
[1681989420000, '40.32']
]
}
],
markLine: {
animation: false,
symbol: '',
data: [
{
name: '80',
yAxis: 80,
lineStyle: {
normal: {
color: '#e41e2b',
width: 1,
type: 'dotted'
},
emphasis: {
width: 1
}
},
label: {
normal: {
show: true,
position: 'middle',
formatter: '{b}%'
}
}
},
{
name: '60',
yAxis: 60,
lineStyle: {
normal: {
color: '#f83',
width: 1,
type: 'dotted'
},
emphasis: {
width: 1
}
},
label: {
normal: {
show: true,
position: 'middle',
formatter: '{b}%'
}
}
}
]
}
};
