效果圖

核心代碼

series: [{name: "概況1",type: "line",smooth: true, // 平滑顯示// lineStyle: { width: 0 },showSymbol: false, // 隱藏節點areaStyle: {opacity: 0.4,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 1, color: "#051d3d" },{ offset: 0, color: "#de3af5" },]),},data: [140, 232, 101, 264, 90, 340, 250],} ]

完整代碼

<div id="main" style="width: 100%; height: 220px"></div> /* 變化趨勢eCharts圖 */ initCharts(e) {this.$nextTick(() => {const myChart = echarts.init(document.getElementById("main")); // 初始化 echarts 實例const nameList = ["概況1", "概況2", "概況3", "概況4"]; // 名稱列表const initColor = "#051d3d"; // 初始顏色const initOpacity = 0.4; // 初始透明度const colorList = ["#de3af5", "#1a93f6", "#fab021", "#29e8a8"]; // 顏色列表e.date = ["11-11", "11-12", "11-13", "11-14", "11-15", "11-16", "11-17"]; // 日期e.dispose = [140, 232, 101, 264, 90, 340, 250]; // 概況1e.isolate = [120, 282, 111, 234, 220, 340, 310]; // 概況2e.focusIsolate = [320, 132, 201, 334, 190, 130, 220]; // 概況3e.homeIsolate = [220, 402, 231, 134, 190, 230, 120]; // 概況4// 指定圖表的配置項和數據const option = {color: colorList,tooltip: {trigger: "axis",axisPointer: {type: "cross",label: { backgroundColor: "#6a7985" },},},legend: {textStyle: { color: "#c8dbf4" },bottom: 0,data: nameList,},grid: {top: "14%",left: "3%",right: "4%",bottom: "16%",containLabel: true,},xAxis: {type: "category",boundaryGap: false,axisLabel: { color: "#c8dbf4", fontSize: "14px" },data: e.date,},yAxis: {type: "value",name: "單位（人）",nameTextStyle: { color: "#c8dbf4", fontSize: "14px" },axisLabel: { color: "#c8dbf4", fontSize: "14px" },},series: [{name: nameList[0],type: "line",smooth: true, // 平滑顯示// lineStyle: { width: 0 },showSymbol: false, // 隱藏節點areaStyle: {opacity: initOpacity,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 1, color: initColor },{ offset: 0, color: colorList[0] },]),},data: e.dispose,},{name: nameList[1],type: "line",smooth: true, // 平滑顯示// lineStyle: { width: 0 },showSymbol: false, // 隱藏節點areaStyle: {opacity: initOpacity,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 1, color: initColor },{ offset: 0, color: colorList[1] },]),},data: e.isolate,},{name: nameList[2],type: "line",smooth: true, // 平滑顯示// lineStyle: { width: 0 },showSymbol: false, // 隱藏節點areaStyle: {opacity: initOpacity,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 1, color: initColor },{ offset: 0, color: colorList[2] },]),},data: e.focusIsolate,},{name: nameList[3],type: "line",smooth: true, // 平滑顯示// lineStyle: { width: 0 },showSymbol: false, // 隱藏節點areaStyle: {opacity: initOpacity,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 1, color: initColor },{ offset: 0, color: colorList[3] },]),},data: e.homeIsolate,},],};myChart.setOption(option);}); }

官網參考例子：Examples - Apache ECharts

總結

以上是生活随笔為你收集整理的echarts 折线图面积区域渐变的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。