echarts折线图背景区域划分完整代码
时间: 2023-10-02 15:11:22 浏览: 41
以下是一个简单的 echarts 折线图背景区域划分的完整代码示例:
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 折线图背景区域划分</title>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 600px; height:400px;"></div>
</body>
</html>
```
JS:
```javascript
var myChart = echarts.init(document.getElementById('chart'));
// x 轴数据
var xData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
// y 轴数据
var yData1 = [10, 20, 30, 40, 50, 60, 70];
var yData2 = [70, 60, 50, 40, 30, 20, 10];
// 定义背景区域的起始和结束点
var areaStart = yData1.map(function(item) {
return item - 5;
});
var areaEnd = yData2.map(function(item) {
return item + 5;
});
// 基于准备好的dom,初始化echarts实例
var option = {
title: {
text: '折线图背景区域划分'
},
legend: {
data: ['数据1', '数据2']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: xData
},
yAxis: {
type: 'value'
},
series: [{
name: '数据1',
type: 'line',
data: yData1,
itemStyle: {
normal: {
color: '#4cb1cf'
}
}
}, {
name: '数据2',
type: 'line',
data: yData2,
itemStyle: {
normal: {
color: '#f06c00'
}
}
}, {
type: 'line',
data: areaStart,
itemStyle: {
normal: {
color: 'transparent'
}
},
lineStyle: {
normal: {
type: 'dashed'
}
},
areaStyle: {
normal: {
color: '#f3f3f3'
}
}
}, {
type: 'line',
data: areaEnd,
itemStyle: {
normal: {
color: 'transparent'
}
},
lineStyle: {
normal: {
type: 'dashed'
}
},
areaStyle: {
normal: {
color: '#f3f3f3'
}
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
```
上述代码中,我们使用了 echarts 的 `areaStyle` 属性来定义背景区域的样式,使用 `lineStyle` 属性来定义虚线的样式,使用 `itemStyle` 属性来设置数据线的样式。同时,我们也使用了 JavaScript 数组的 `map` 方法来定义背景区域的起始和结束点。