天天综合色综合导航,久热在线精品视频,亚洲人成人无码一区二区三区,伊人久久五月,韩国黄色在线,国产毛片一区二区三区在线视频,日韩女同一区二区三区,99热综合

7天打卡拿書的朋友，規(guī)則在這里：

今日1.16起，至1.23結(jié)束
連續(xù)至少5天在《有關(guān)SQL》公眾號(hào)留言，并獲精選
留言內(nèi)容要求14字以上，善意留言優(yōu)先獲得精選
不要在同一篇文章下連續(xù)打卡
送兩位朋友，一人一本

導(dǎo)讀：折線圖是一種基礎(chǔ)圖表，適合表示數(shù)據(jù)的變化趨勢(shì)，常用于時(shí)間序列數(shù)據(jù)的表示。

作者：王大偉

來源：大數(shù)據(jù)DT（ID：hzdashuju）

在正式學(xué)習(xí)之前，先來了解一個(gè)ECharts官網(wǎng)提供的很好用的功能。該功能可以實(shí)時(shí)顯示代碼的效果，使用方法說明如下。

首先，打開ECharts官網(wǎng)，在“實(shí)例”菜單中選擇任意一個(gè)圖，如圖4-1所示。

https://echarts.apache.org/exampl-es/zh/editor.html?c=area-stack

▲圖4-1 ECharts實(shí)例

可以看到，左邊顯示的是option，也就是ECharts的具體配置，右邊是對(duì)應(yīng)的可視化圖。當(dāng)我們改變左邊的代碼時(shí)，右邊的可視化也會(huì)實(shí)時(shí)改變。當(dāng)左邊的代碼有誤時(shí)，右邊則不會(huì)顯示可視化，如圖4-2所示。

▲圖4-2 ECharts代碼有誤時(shí)的界面

大家應(yīng)該已經(jīng)發(fā)現(xiàn)了，可視化設(shè)置的大部分參數(shù)都在option中，這樣可以幫我們省去很多額外的工作，方便快速調(diào)試。當(dāng)我們調(diào)試出滿意的可視化時(shí)，將option加入框架中即可。本文演示的代碼和可視化結(jié)果圖都是基于這個(gè)在線工具實(shí)現(xiàn)的。

01 基礎(chǔ)折線圖

在ECharts中，繪制折線圖需要將series中的type設(shè)置為line，代碼如下所示：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [450, 232, 301, 734, 1090, 830, 500],
        type: 'line'
    }]
};

其中，series中的data值序列長度需要和xAxis中的data值序列長度一致，x軸和y軸分別為類別（星期）和數(shù)值，可視化效果如圖4-3所示。

▲圖4-3 基礎(chǔ)折線圖

當(dāng)我們?cè)趕eries中加入?yún)?shù)smooth: true后，可以得到較為光滑的折線（曲線）。代碼如下所示：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [450, 232, 301, 734, 1090, 830, 500],
        type: 'line',
        smooth: true
    }]
};

可視化結(jié)果如圖4-4所示。

▲圖4-4 基礎(chǔ)折線圖（曲線）

02 多條折線圖

至此我們就學(xué)會(huì)了如何繪制單條折線圖，當(dāng)然我們還會(huì)遇到繪制多條折線圖的情況，如圖4-5所示。

▲圖4-5 多條折線圖

此時(shí)我們?cè)谏厦鎲螚l折線圖的代碼中做少量修改即可，具體代碼如下：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    legend: {
        data: ['A產(chǎn)品銷量', 'B產(chǎn)品銷量','C產(chǎn)品銷量'],
        left: 'right'
},
    series: [{
        name:'A產(chǎn)品銷量',
        data: [550, 232, 311, 764, 1090, 830, 500],
        type: 'line',
        smooth: true
    },
    {
        name:'B產(chǎn)品銷量',
        data: [420, 162, 121, 474, 720, 640, 230],
        type: 'line',
        smooth: true
    },
    {
        name:'C產(chǎn)品銷量',
        data: [850, 432, 501, 934, 1190, 930, 600],
        type: 'line',
        smooth: true
    }]
};

通過觀察可以發(fā)現(xiàn)，series中并列了三個(gè)字典結(jié)構(gòu)，分別存放A~C產(chǎn)品的數(shù)據(jù)，我們加入了legend圖例，目的是為了區(qū)分A～C產(chǎn)品的數(shù)據(jù)。需要注意的是，A～C產(chǎn)品數(shù)據(jù)的name字段內(nèi)容需要和legend中的內(nèi)容一一對(duì)應(yīng)。

03 堆疊折線圖

有時(shí)候，我們需要使用堆疊折線圖來反映不同項(xiàng)的累加情況，此時(shí)可以通過在ECharts的series的每項(xiàng)數(shù)據(jù)中加入stack和areaStyle參數(shù)實(shí)現(xiàn)，可視化結(jié)果如圖4-6所示。

▲圖4-6 堆疊折線圖

具體實(shí)現(xiàn)代碼如下：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    legend: {
        data: ['A產(chǎn)品銷量', 'B產(chǎn)品銷量','C產(chǎn)品銷量'],
        left: 'right'
    },
    series: [{
        name:'A產(chǎn)品銷量',
        data: [550, 232, 311, 764, 1090, 830, 500],
        type: 'line',
        smooth: true,
        stack: '總量',
        areaStyle: {}
    },
    {
        name:'B產(chǎn)品銷量',
        data: [420, 162, 121, 474, 720, 640, 230],
        type: 'line',
        smooth: true,
        stack: '總量',
        areaStyle: {}
    },
    {
        name:'C產(chǎn)品銷量',
        data: [850, 432, 501, 934, 1190, 930, 600],
        type: 'line',
        smooth: true,
        stack: '總量',
        areaStyle: {}
    }]
};

其中，areaStyle用于對(duì)區(qū)域填充色彩，如果沒有該參數(shù)，區(qū)域?qū)⒉粫?huì)有填充色，感興趣的讀者可以刪除該參數(shù)看看效果。堆疊的順序自上到下和數(shù)據(jù)的順序相反，例如代碼數(shù)據(jù)中的順序是ABC，可視化圖中自上到下的順序是CBA。

為了方便辨識(shí)堆疊總量數(shù)據(jù)信息，可以在最上層的數(shù)據(jù)中加入label參數(shù)，同時(shí)加入tooltip方便查閱數(shù)據(jù)，修改后的代碼如下：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    legend: {
        data: ['A產(chǎn)品銷量', 'B產(chǎn)品銷量','C產(chǎn)品銷量'],
        left: 'right'
},
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    series: [{
        name:'A產(chǎn)品銷量',
        data: [550, 232, 311, 764, 1090, 830, 500],
        type: 'line',
        smooth: true,
        stack: '總量',
        areaStyle: {}
    },
    {
        name:'B產(chǎn)品銷量',
        data: [420, 162, 121, 474, 720, 640, 230],
        type: 'line',
        smooth: true,
        stack: '總量',
        areaStyle: {}
    },
    {
        name:'C產(chǎn)品銷量',
        data: [850, 432, 501, 934, 1190, 930, 600],
        type: 'line',
        smooth: true,
        stack: '總量',
        label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },
        areaStyle: {}
    }]
};

可視化結(jié)果如圖4-7所示。

▲圖4-7 堆疊柱狀圖優(yōu)化版

關(guān)于作者：王大偉，畢業(yè)于華東理工大學(xué)，碩士學(xué)歷，目前就職于平安金融壹賬通，從事數(shù)據(jù)挖掘算法工作，擅長ECharts、Python、自然語言處理、數(shù)據(jù)分析挖掘、機(jī)器學(xué)習(xí)。曾獲微軟最有價(jià)值專家（MVP）榮譽(yù)稱號(hào)。

本文摘編自《ECharts數(shù)據(jù)可視化：入門、實(shí)戰(zhàn)與進(jìn)階》，經(jīng)出版方授權(quán)發(fā)布。

延伸閱讀《ECharts數(shù)據(jù)可視化》

長按上方二維碼了解及購買

轉(zhuǎn)載請(qǐng)聯(lián)系微信：DoctorData

推薦語：ECharts官方推薦，系統(tǒng)全面、由淺入深、注重實(shí)操，帶領(lǐng)讀者快速從新人到高手。

歡迎加入《ECharts數(shù)據(jù)可視化》讀者群??

劃重點(diǎn)??

送兩本《ECharts數(shù)據(jù)可視化：入門、實(shí)戰(zhàn)與進(jìn)階》