echarts土壤垂直分布多条数据堆叠折线图
时间: 2023-11-23 20:46:35 浏览: 138
Echarts实现的折线图
5星 · 资源好评率100%
要绘制土壤垂直分布的多条数据堆叠折线图,可以使用 ECharts 进行实现。下面是一个简单的示例代码,用于展示如何创建多条数据堆叠折线图:
```javascript
// 初始化 ECharts 实例
var myChart = echarts.init(document.getElementById('chart'));
// 配置图表选项
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
legend: {
data: ['土壤层1', '土壤层2', '土壤层3'] // 数据的标签名称
},
xAxis: {
type: 'category',
data: ['深度1', '深度2', '深度3', '深度4', '深度5'] // X 轴坐标数据
},
yAxis: {
type: 'value',
name: '含量' // Y 轴名称
},
series: [
{
name: '土壤层1',
type: 'line',
stack: '总量',
data: [120, 132, 101, 134, 90] // 第一条数据的数值
},
{
name: '土壤层2',
type: 'line',
stack: '总量',
data: [220, 182, 191, 234, 290] // 第二条数据的数值
},
{
name: '土壤层3',
type: 'line',
stack: '总量',
data: [150, 232, 201, 154, 190] // 第三条数据的数值
}
]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
```
阅读全文