前端學(xué)習(xí)ECharts--數(shù)據(jù)對(duì)比折線圖

數(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中,就可以直接渲染。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容