數(shù)據(jù)對(duì)比功能中經(jīng)常會(huì)使用圖表來進(jìn)行展示,在圖表的展示中,ECharts中的折線圖就更加容易展現(xiàn)。其option的設(shè)置出了series的值數(shù)據(jù)有區(qū)別外,其他的設(shè)置與普通的折線圖無明顯差別。在下方展示一個(gè)簡單的數(shù)據(jù)對(duì)比折線圖。
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里的數(shù)據(jù)有關(guān),里面給多少個(gè){}數(shù)據(jù)就會(huì)形成多少條折線。
在ECharts的官方實(shí)例中有一款具有多條折線的示例中,會(huì)出現(xiàn)一種情況,最上方的折線是下面折線同點(diǎn)位值的和。該種情況的出現(xiàn)是因?yàn)樵趕eries中,每個(gè)數(shù)據(jù)具有一個(gè)相同的stack值。解決該種情況的方法就是刪除每個(gè)series中的stack標(biāo)簽。
ECharts表渲染最簡單的方式是后臺(tái)傳遞的值按照ECharts的數(shù)據(jù)格式進(jìn)行封裝傳遞,將后臺(tái)傳入的值帶入到相應(yīng)的option中,就可以直接渲染。