這個是一個由官網的基礎折線圖實現的流程，將涉及到的知識點附上個人淺薄的見解，源碼在最后，需要的可自取。

成果展示

官網的基礎折線圖：

最終效果圖：

代碼注解

參數

xdata ：x軸數據
ydata1 ：第一條折線line1數據
ydata2 ：第二條折線line2數據
bgdata ：柱狀陰影條的數據，這里統一設置為40，是因為ydata1和 ydata2的最大值都在40范圍內，以達到陰影撐滿圖標高度的效果，同時，也可設置yAxis的max值與bgdata 里的值一致
threshold ：用于存放每個x軸數據對應的line1和line2相差的最大值
average ：總平均時長
historyAveraged ：步驟平均耗時
averageCount ：步驟總數

這里的值均為固定值，后期可根據自身需求添加數據邏輯

var xdata = ["第1步 步驟名稱","第2步 步驟名稱","第3步 步驟名稱","第4步 步驟名稱","第5步 步驟名稱","第6步 步驟名稱","第7步 步驟名稱","第8步 步驟名稱","第9步 步驟名稱","第10步 步驟名稱","第11步 步驟名稱","第12步 步驟名稱","第13步 步驟名稱","第14步 步驟名稱","第15步 步驟名稱","第16步 步驟名稱","第17步 步驟名稱","第18步 步驟名稱", "第19步 步驟名稱","第20步 步驟名稱","第21步 步驟名稱","第22步 步驟名稱","第23步 步驟名稱","第24步 步驟名稱",];var ydata1 = [21,20,34,31,22,18,18,18,18,18,18,21,15,34,31,22,18,18,18,18,18,18,18,18,];var ydata2 = [18,16,25,30,15, 18,18,18,18,18,18,18,16,25,30,15,18,18,18,18,18, 18,18,18,];var bgdata = [40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40, 40,40,];var threshold = 7;var average = 140,historyAveraged = 5.6,averageCount = 2.5;

backgroundColor

官網api可查看具體參數：點擊跳轉至官網查看backgroundColor
這里直接配置顏色參數。

backgroundColor: "transparent",//透明背景色，跟隨父盒子顏色，看板中比較常用
backgroundColor: "#375a84",//成果主圖的背景顏色

dataZoom

官網api可查看具體參數：點擊跳轉至官網查看dataZoom
dataZoom 就是可用于縮放和平移數據的組件，可以用于對大量數據進行局部放大或整體滾動查看。dataZoom 可以水平或垂直放置在圖表的底部或側邊，并支持拖拽、滾動、點擊等交互操作。

dataZoom: [{type: "slider", // 設置為滑動條show: true, // 顯示滑動條start: 0, // 滑動條起始位置end: 100 / (12 - 10) - 1, // 滑動條結束位置bottom: 10, // 滑動條距離底部的距離textStyle: {color: "#fff",},backgroundColor: "#acb7c3", // 設置背景顏色handleStyle: {color: "#2a82e4", // 設置左右兩邊的可滑動收縮豎線顏色},},],

legend

官網api可查看具體參數：點擊跳轉至官網查看legend
legend 用于展示圖表中不同系列的標識和名稱的組件，通過legend，用戶可以快速了解每個系列所代表的含義，并可以通過點擊圖例項來切換顯示或隱藏對應的數據系列。

legend: {data: ["步驟平均時長", "步驟歷史平均時長"],orient: "vertical", // 設置圖例垂直排列right: 10, // 調整圖例距離右側的距離top: "top", // 設置圖例位于上方itemWidth: 10, // 設置寬度itemHeight: 10, // 設置高度textStyle: {//設置字體樣式color: "#fff",//字體顏色},},

title

官網api可查看具體參數：點擊跳轉至官網查看title
title 是用于設置圖表標題的組件，可以用來展示整個圖表的主題或概要信息。通過 title 組件，用戶可以自定義圖表的標題文字、樣式、位置等屬性。
可以通過設置 left、top、right、bottom 等屬性，可以調整標題的位置。并且Echarts 中的 title 組件是能單獨存在的，也能放在整個 option 配置對象中的任何位置。
可根據自己需求調整title的位置。

title: {// 添加title屬性text:"總平均時長" +average +"s\n\n步驟總數" +averageCount +"\n\n步驟平均耗時" +historyAveraged +"s", // 自定義的文字內容//subtext: '副標題', // 設置副標題文字//left: 'center' // 設置標題水平居中orient: "vertical", // 設置圖例垂直排列right: 10, // 調整圖例距離右側的距離top: 80, // 設置圖例位于上方itemWidth: 10, // 設置寬度itemHeight: 10, // 設置高度textStyle: {color: "#fff",fontSize: 12,//設置字體大小},},

xAxis

官網api可查看具體參數：點擊跳轉至官網查看xaxis
xAxis（x 軸）用于顯示水平方向的坐標軸，通常用于表示類目數據或數值數據。在 ECharts 中，可以通過配置 xAxis 屬性來對 x 軸進行設置。
以下是一些常見的 xAxis 配置選項：

type: x 軸類型，可以是 ‘value’（數值軸）、‘category’（類目軸）、‘time’（時間軸）等。
data: 類目軸的數據，在 type 為 ‘category’ 時使用。
axisLabel: x 軸刻度標簽的設置，可以設置字體顏色、字體大小等樣式。
axisLine: x 軸線的樣式設置，可以設置線條顏色、粗細等。
name: x 軸名稱。
nameTextStyle: x 軸名稱的樣式設置，可以設置顏色、字體大小等。
splitLine: 分隔線的設置，可以顯示或隱藏 x 軸的分隔線。

xAxis: {type: "category",// 橫軸類型為類目軸，適用于離散的類目數據data: xdata,// 設置 x 軸的數據，即類目軸的數據源axisLabel: {// 設置 x 軸標簽的樣式formatter: function (value) {return value.split(" ").join("\n"); // 自定義軸標簽格式化函數，使用換行符拆分字符串并重新連接},textStyle: {// 設置軸標簽文字的樣式fontSize: 12, // 設置 x 軸字體大小為 12pxcolor: function (params) {// 根據條件動態設置文字顏色if (params == "第3步 步驟類型") {return "rgba(190, 53, 59, 1)";// 如果標簽為"第3步 位置管控"，設置顏色為紅色} else {return "rgba(255, 255, 255, 0.16)";// 其他標簽設置為灰色}},},},axisLine: {// 設置軸線的樣式lineStyle: {color: "#fff", // 設置軸線顏色為白色},},},

yAxis

官網api可查看具體參數：點擊跳轉至官網查看yAxis
yAxis（縱軸）用于配置直角坐標系中的縱軸屬性，包括坐標軸類型、刻度分隔、標簽樣式等。

type: 指定了縱軸的類型，例如’value’表示數值軸。
name: 設置縱軸的名稱，用于描述縱軸所代表的數據意義。
axisLabel: 定義了縱軸標簽的樣式，包括文字顏色和大小等。
splitLine: 控制分隔線的顯示與樣式，可以設置是否顯示分隔線以及分隔線的樣式。

通過配置 yAxis，可以靈活地控制縱軸的顯示方式、標簽樣式以及分隔線的展示，從而使得圖表能夠清晰地呈現數據，并滿足不同的可視化需求。

yAxis: {type: "value",// 縱軸類型為數值軸，適用于連續的數值數據name: "second",// 設置 y 軸的名稱為"second"splitLine: {show: false,// 是否顯示 y 軸的分隔線，這里設為隱藏},axisLabel: { // 設置 y 軸標簽的樣式textStyle: {color: "#ffffff", // 設置 y 軸字體顏色為 #ffffontSize: 12, // 設置 y 軸字體大小為 14px},},axisLine: {// 設置 y 軸線條的樣式lineStyle: {color: "#ffffff", // 設置 y 軸線條顏色為 #fff},},nameTextStyle: {// 設置 y 軸名稱的樣式color: "#ffffff", // 設置 y 軸名稱顏色為 #fff},},

grid

官網api可查看具體參數：點擊跳轉至官網查看grid
grid（網格）組件用于控制直角坐標系的布局，可以通過 grid 來調整坐標系的位置、大小以及間距等。

left / right / top / bottom: 分別設置 grid 組件距離容器的左、右、上、下邊距的距離，可以是像素值或百分比。
containLabel: 控制 grid 區域是否包含坐標軸的刻度標簽，默認為 false。
backgroundColor: 設置 grid 區域的背景顏色，可以是顏色值或者漸變色。
borderWidth: 設置 grid 區域的邊框線寬。
borderColor: 設置 grid 區域的邊框顏色。

通過配置 grid，可以靈活地調整圖表的布局，使得圖表在頁面中的位置和大小符合需求，并且能夠美觀地展示數據。

grid: {left: "3%",right: "10%",bottom: "10%",},

series

官網api可查看具體api：點擊跳轉至官網查看series
折線圖后面的柱狀陰影重點在與series數組的第三個對象，這里設置了一個單獨柱狀圖(type為bar)的類型，并設置其顏色效果，以達到陰影效果。

series: [{name: "步驟平均時長",data: ydata1,type: "line",symbol: "rect", // 將折線圖的拐點符號設置為方形symbolSize: 10, // 設置方形的大小為8lineStyle: {color: "#ffffff", // 設置第一條線的顏色為 #00baad},itemStyle: {color: "#ffffff", // 設置第一條線的方形顏色為 #ffffff},label: {// 添加對應值顯示show: true,position: "top", // 顯示在拐點上方},z: 2,},{name: "步驟歷史平均時長",data: ydata2,type: "line",symbol: "rect", // 將折線圖的拐點符號設置為方形symbolSize: 10, // 設置方形的大小為8lineStyle: {color: "#00baad", // 設置第一條線的顏色為 #00baad},itemStyle: {color: "#00baad", // 設置第一條線的方形顏色為 #ffffff},label: {// 添加對應值顯示show: true,position: "bottom",color: "#00baad",},z: 2,},{//這里是柱狀陰影的關鍵部分data: bgdata,type: "bar",// 柱狀圖類型barWidth: 68,// 柱寬度// itemStyle: {//   color: "rgba(0,0,0,0.16)",// },itemStyle: {normal: {color: function (params) {var aValue = ydata1[params.dataIndex];var bValue = ydata2[params.dataIndex];if (Math.abs(aValue - bValue) > threshold) {//若差值大于最大差值，則設置其字體顏色為紅色return "rgba(102, 77, 107,0.6)";} else {return "rgba(0,0,0,0.16)";}},},},},],

源碼

      var xdata = ["第1步 步驟名稱","第2步 步驟名稱","第3步 步驟名稱","第4步 步驟名稱","第5步 步驟名稱","第6步 步驟名稱","第7步 步驟名稱","第8步 步驟名稱","第9步 步驟名稱","第10步 步驟名稱","第11步 步驟名稱","第12步 步驟名稱","第13步 步驟名稱","第14步 步驟名稱","第15步 步驟名稱","第16步 步驟名稱","第17步 步驟名稱","第18步 步驟名稱","第19步 步驟名稱","第20步 步驟名稱","第21步 步驟名稱","第22步 步驟名稱","第23步 步驟名稱","第24步 步驟名稱",];var ydata1 = [21,20,34,31,22,18,18,18,18,18,18,21,15,34,31,22,18,18,18,18,18,18,18,18,];var ydata2 = [18,16,25,30,15,18,18,18,18,18,18,18,16,25,30,15,18,18,18,18,18,18,18,18,];var bgdata = [40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,];var threshold = 7;var average = 140,historyAveraged = 5.6,averageCount = 2.5;option = {backgroundColor: "#375a84",dataZoom: [{type: "slider", // 設置為滑動條show: true, // 顯示滑動條start: 0, // 滑動條起始位置end: 100 / (12 - 10) - 1, // 滑動條結束位置bottom: 10, // 滑動條距離底部的距離textStyle: {color: "#fff",},backgroundColor: "#acb7c3", // 設置背景顏色handleStyle: {color: "#2a82e4", // 設置左右兩邊的可滑動收縮豎線顏色},},],legend: {legend: {data: ["步驟平均時長", "步驟歷史平均時長"],},orient: "vertical", // 設置圖例垂直排列right: 10, // 調整圖例距離右側的距離top: "top", // 設置圖例位于上方itemWidth: 10, // 設置寬度itemHeight: 10, // 設置高度textStyle: {color: "#fff",},},title: {// 添加title屬性text:"總平均時長" +average +"s\n\n步驟總數" +averageCount +"\n\n步驟平均耗時" +historyAveraged +"s", // 自定義的文字內容orient: "vertical", // 設置圖例垂直排列right: 10, // 調整圖例距離右側的距離top: 80, // 設置圖例位于上方itemWidth: 10, // 設置寬度itemHeight: 10, // 設置高度textStyle: {color: "#fff",fontSize: 12,},},xAxis: {type: "category",data: xdata,axisLabel: {formatter: function (value) {return value.split(" ").join("\n"); // 使用換行符拆分字符串并重新連接},textStyle: {fontSize: 12, // 設置 x 軸字體大小為 12pxcolor: function (params) {if (params == "第3步 位置管控") {return "rgba(190, 53, 59, 1)";} else {return "rgba(255, 255, 255, 0.16)";}},},},axisLine: {lineStyle: {color: "#fff", // 設置 x 軸線條顏色為 #fff},},},yAxis: {type: "value",name: "second",splitLine: {show: false, // 隱藏y軸的橫向線條},axisLabel: {textStyle: {color: "#ffffff", // 設置 y 軸字體顏色為 #ffffontSize: 12, // 設置 y 軸字體大小為 14px},},axisLine: {lineStyle: {color: "#ffffff", // 設置 y 軸線條顏色為 #fff},},nameTextStyle: {color: "#ffffff", // 設置 y 軸名稱顏色為 #fff},},grid: {left: "3%",right: "10%",bottom: "10%",},series: [{name: "步驟平均時長",data: ydata1,type: "line",symbol: "rect", // 將折線圖的拐點符號設置為方形symbolSize: 10, // 設置方形的大小為8lineStyle: {color: "#ffffff", // 設置第一條線的顏色為 #00baad},itemStyle: {color: "#ffffff", // 設置第一條線的方形顏色為 #ffffff},label: {// 添加對應值顯示show: true,position: "top", // 顯示在拐點上方},z: 2,},{name: "步驟歷史平均時長",data: ydata2,type: "line",symbol: "rect", // 將折線圖的拐點符號設置為方形symbolSize: 10, // 設置方形的大小為8lineStyle: {color: "#00baad", // 設置第一條線的顏色為 #00baad},itemStyle: {color: "#00baad", // 設置第一條線的方形顏色為 #ffffff},label: {// 添加對應值顯示show: true,position: "bottom",color: "#00baad",},z: 2,},{data: bgdata,type: "bar",barWidth: 68,// itemStyle: {//   color: "rgba(0,0,0,0.16)",// },itemStyle: {normal: {color: function (params) {var aValue = ydata1[params.dataIndex];var bValue = ydata2[params.dataIndex];if (Math.abs(aValue - bValue) > threshold) {return "rgba(102, 77, 107,0.6)";} else {return "rgba(0,0,0,0.16)";}},},},},],};