数据对比功能中经常会使用图表来进行展示,在图表的展示中,ECharts中的折线图就更加容易展现。其option的设置出了series的值数据有区别外,其他的设置与普通的折线图无明显差别。在下方展示一个简单的数据对比折线图。
option = {
title: {
text: '未来一周气温变化',
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['最高气温','最低气温']
},
toolbox: {
show: true,
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} °C'
}
},
series: [
{
name:'最高气温',
type:'line',
data:[11, 11, 15, 13, 12, 13, 10],
},
{
name:'最低气温',
type:'line',
data:[1, -2, 2, 5, 3, 2, 0],
}
]
};
折线的增添与series里的数据有关,里面给多少个{}数据就会形成多少条折线。
在ECharts的官方实例中有一款具有多条折线的示例中,会出现一种情况,最上方的折线是下面折线同点位值的和。该种情况的出现是因为在series中,每个数据具有一个相同的stack值。解决该种情况的方法就是删除每个series中的stack标签。
ECharts表渲染最简单的方式是后台传递的值按照ECharts的数据格式进行封装传递,将后台传入的值带入到相应的option中,就可以直接渲染。