<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>折线图</title>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.common.min.js"></script>
</head>
<body>
<div style="width: 600px; height: 400px; border: 1px solid black;"></div>
<script>
var myCharts = echarts.init(document.querySelector('div'))
var xDataArr = ['Dean', 'Jing', 'Amy', 'John', 'Rebecca', 'Lexie']
var yDataArr = [88, 99, 78, 67, 84, 32]
var option = {
xAxis: {
type: 'category',
data: xDataArr,
boundaryGap: false // boundaryGap值为false的时候，折线第一个点在y轴上
},
yAxis: {
type: 'value'
},
tooltip: {
trigger: 'axis'
},
series: [
{
name: 'Math',
type: 'line',
data: yDataArr,
markPoint: {
data: [
{
type: 'max'
},
{
type: 'min'
}
]
},
markLine: {
data: [
{
type: 'average'
}
],
symbol: ['circle', 'none'], // 设置基线的两端图形 标线两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
precision: 3 // 标线数值的精度，在显示平均值线的时候有用
},
markArea: {
data: [
[
{
xAxis: 'Dean'
},
{
xAxis: 'Jing'
}
]
],
itemStyle: {
color: 'rgba(194, 158, 235, 1)'
}
},
label: {
show: true,
color: 'blue'
}
}
]
}
myCharts.setOption(option)
</script>
</body>
</html>
设置均线和样式 设置标注区域：
设置多个区域：
设置 折线图 折线下部分渐变颜色
在series中，和markLine平级设置areaStyle属性，在里面设置渐变颜色：
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#00c1de'
}, {
offset: 1,
color: 'rgba(0,0,0,0)'
}
])
}
}
效果如下：
我们看一个完整的echarts折线区域填充渐变色：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>折线图 areaStyle设置折线区域填充渐变色</title>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.common.min.js"></script>
</head>
<body>
<div style="width: 600px; height: 400px; border: 1px solid black;"></div>
<script>
var myCharts = echarts.init(document.querySelector('div'))
var xDataArr = ['Dean', 'Jing', 'Amy', 'John', 'Rebecca', 'Lexie']
var yDataArr = [88, 99, 78, 67, 84, 32]
var option = {
title: {
text: '',
subtext: ''
},
tooltip: {
trigger: 'axis'
},
legend: {
data: []
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} °C'
}
},
series: [
{
name: '',
type: 'line',
data: [11, 2, 15, 7, 12, 12, 6],
markPoint: {
data: [
{
type: 'max', name: '最大值' },
{
type: 'min', name: '最小值' }
]
},
markLine: {
data: [
{
type: 'average', name: '平均值' }
]
},
itemStyle: {
normal: {
color: '#00c1de',
shadowBlur: 8,
shadowColor: '#25d5f0',
borderColor: '#00c1de',
borderWidth: 2,
backgroundColor: 'transparent'
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'lightblue'
}, {
offset: 1,
color: 'rgba(0,0,0,0)'
}]),
}
}
}
]
}
myCharts.setOption(option)
</script>
</body>
</html>
效果：
Echart中设置分割区域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Echart中折线图 设置分割区域</title>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.common.min.js"></script>
</head>
<body>
<div style="width: 600px; height: 400px; border: 1px solid black;"></div>
<script>
var myCharts = echarts.init(document.querySelector('div'))
var option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
tooltip: {
trigger: 'axis'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
label: {
// show: true
},
markArea: {
silent: true,
data: [
[{
name: '黄区',
yAxis: 100,
itemStyle: {
color: 'rgba(233,250,140,0.8)'
},
}, {
yAxis: 300
}],
[{
name: '绿区',
yAxis: 300,
itemStyle: {
color: 'rgba(153,236,116,0.8)'
},
}, {
yAxis: 600,
}],
[{
name: '蓝区',
yAxis: 600,
itemStyle: {
color: 'lightblue'
}
}, {
yAxis: 1200,
}]
]
}
}]
}
myCharts.setOption(option)
</script>
</body>
</html>
