三、教你搞懂漸變堆疊面積圖《手把手教你 ECharts 數據可視化詳解》

注：本系列教程需要對應 JavaScript 、html、css 基礎，否則將會導致閱讀時困難，本教程將會從 ECharts 的官方示例出發，詳解每一個示例實現，從中學習 ECharts 。

ECharts 官方示例：https://echarts.apache.org/examples/zh/index.html

《手把手教你 ECharts 數據可視化詳解》目錄

一、基礎折線圖詳解
二、基礎平滑、面積折線圖與折線堆疊、面積堆疊

一、漸變色

再正式學習漸變堆疊面積圖之前，我們需要學習在 ECharts 的圖標上如何創建漸變色。漸變色在 ECharts 上使用 echarts 對象創建，echarts 內置了 graphic.LinearGradient，使用 LinearGradient 方法可創建漸變色修飾，但具體漸變色修飾創建后還需要給與一個顏色屬性，以為在此漸變色是一個顏色屬性。

此時我們給與一個 ECharts 的配置如下：

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {},series: [{name: 'Line 1',type: 'line',areaStyle: {opacity: 0.8,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgb(30, 30, 30)'},{offset: 1,color: 'rgb(0, 122, 204)'}])},data: [140, 232, 101, 264, 90, 340, 250]}]
};

以上配置大部分我們已經在之前章節學過，在此我們并不了解的是 new echarts.graphic.LinearGradient 創建漸變色。

在創建漸變色的前 4 個參數 0, 0, 0, 1 表示的是漸變色的其實位置，值分別對應的位置是 ”右下左上“；例如第一個 0 對應的是右，第二個 0 對應的是下，以此類推；再次最后一個位置為 1 則表示漸變色其實位置從上方向開始，意思就是說漸變色從上開始往下漸變。

再往下看，第 5 個參數為一個數組，數組中胚子了兩個參數（可以配置多個），這個配置項是對應的漸變色位置變化與顏色關系的配置項，例如第一個配置如下：

{offset: 0,color: 'rgb(30, 30, 30)'
}

其中 offset 表示對應色彩變幻位置，以為漸變色會從一種顏色漸變到另外一種顏色，又或者多種顏色的相互漸變，再次這個 offset 就表示從 0 到 1 從漸變開始到漸變結束的位置的顏色設置；例如再此處設置 offset 為 0，則表示漸變色開始時的配置項，其中第二個配置項時一個 color ，兩者結合起來就表示在漸變開始時，顏色是 'rgb(30, 30, 30)' 黑色。

我們接著看下一個漸變色的配置項：

{offset: 1,color: 'rgb(0, 122, 204)'
}

這個配置表示 offset 為1 時，也就是漸變結束的顏色為 ‘rgb(0, 122, 204)’ 藍色，整體上看來說就是黑色到藍色的漸變，結合最開始所述的位置信息，那么就是 “漸變色從黑色開始漸變到藍色，從上方向開始”。

我們將這個配置項復制到我們的代碼示例中，又或者直接復制以下完整代碼：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ECharts</title><script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
</head>
<body><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">var myChart = echarts.init(document.getElementById('main'));option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {},series: [{name: 'Line 1',type: 'line',areaStyle: {opacity: 0.8,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgb(30, 30, 30)'},{offset: 1,color: 'rgb(0, 122, 204)'}])},data: [140, 232, 101, 264, 90, 340, 250]}]};//myChart.setOption(option);</script>
</body>
</html>

此時運行后，在頁面上顯示為：

在這里插入圖片描述

在此可以很好的觀察到頂部是黑色，往下逐漸變藍。

我們可以更改一下位置信息的值，例如更改為 1, 0, 0, 0 表示位置從右邊開始，黑色應該在右側，那么展示效果如下：

在這里插入圖片描述

若是 1, 1, 0, 0 那么根據右下左上的規則，那位置應該就是從右下開始：

在這里插入圖片描述

此時的感覺應該不是很明顯，我們可以將 1, 1, 0, 0 改成 1, 1, 1, 0 ，那就是從靠右的下左方向開始，此時應該就是整個底部就是漸變色的開始，那么效果如下：

在這里插入圖片描述

二、漸變堆疊面積圖

我們打開官網示例圖的漸變堆疊面積圖：

在這里插入圖片描述
打開后，其配置代碼如下：

option = {color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],title: {text: 'Gradient Stacked Area Chart'},tooltip: {trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#6a7985'}}},legend: {data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']},toolbox: {feature: {saveAsImage: {}}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{type: 'category',boundaryGap: false,data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']}],yAxis: [{type: 'value'}],series: [{name: 'Line 1',type: 'line',stack: 'Total',smooth: true,lineStyle: {width: 0},showSymbol: false,areaStyle: {opacity: 0.8,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgb(128, 255, 165)'},{offset: 1,color: 'rgb(1, 191, 236)'}])},emphasis: {focus: 'series'},data: [140, 232, 101, 264, 90, 340, 250]},{name: 'Line 2',type: 'line',stack: 'Total',smooth: true,lineStyle: {width: 0},showSymbol: false,areaStyle: {opacity: 0.8,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgb(0, 221, 255)'},{offset: 1,color: 'rgb(77, 119, 255)'}])},emphasis: {focus: 'series'},data: [120, 282, 111, 234, 220, 340, 310]},{name: 'Line 3',type: 'line',stack: 'Total',smooth: true,lineStyle: {width: 0},showSymbol: false,areaStyle: {opacity: 0.8,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgb(55, 162, 255)'},{offset: 1,color: 'rgb(116, 21, 219)'}])},emphasis: {focus: 'series'},data: [320, 132, 201, 334, 190, 130, 220]},{name: 'Line 4',type: 'line',stack: 'Total',smooth: true,lineStyle: {width: 0},showSymbol: false,areaStyle: {opacity: 0.8,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgb(255, 0, 135)'},{offset: 1,color: 'rgb(135, 0, 157)'}])},emphasis: {focus: 'series'},data: [220, 402, 231, 134, 190, 230, 120]},{name: 'Line 5',type: 'line',stack: 'Total',smooth: true,lineStyle: {width: 0},showSymbol: false,label: {show: true,position: 'top'},areaStyle: {opacity: 0.8,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgb(255, 191, 0)'},{offset: 1,color: 'rgb(224, 62, 76)'}])},emphasis: {focus: 'series'},data: [220, 302, 181, 234, 210, 290, 150]}]
};

在以上配置項中，出現的新配置項只有 lineStyle 折線圖圖例橫線的樣式設置，其配置為：

lineStyle: {width: 0
}

其中 width 表示配置線寬，線寬在圖標中表示本身折線圖的線段，如下圖所示為 width 配置為 10 的情況：

在這里插入圖片描述

position

此時我們將線條恢復為 0 值時，我們鼠標移動到坐標軸上，發現上面有一個數值：

在這里插入圖片描述

此時在 series 下的某個數據組里面的 label 就是指當前這個區域，此時的配置如下：

label: {show: true,position: 'top'
}

在此配置中 show 表示是否顯示，position 表示顯示的位置，入此時 top 就是顯示在那個數值的頂部，若你更改為 left，那么顯示如下：

在這里插入圖片描述

此時數值將會顯示在數值點的左側。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/285761.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/285761.shtml
英文地址，請注明出處：http://en.pswp.cn/news/285761.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！