?

?

initSgLineChart() {// 基于DOM，初始化echarts實例（注意！Vue的DOM日怪的很，一般要騰個1秒才加載完）this.lineChart = this.$echarts.init(document.getElementById("sg-line-chart"));onresize=()=>{this.lineChart.resize();//當頁面大小變化→圖標對應(yīng)變化}// 繪制折線圖（曲線圖）this.lineChart.setOption({grid: {left: 23,top: 30,right: 22,bottom: 10,containLabel: true//false是依據(jù)坐標軸來對齊的,true是依據(jù)坐標軸上面的文字邊界來對齊},legend: {top: -2,right: 20,itemGap: 5,//圖例每項之間的間隔height: 10,itemWidth: 15,//圖例標記的圖形寬度itemHeight: 10,padding: [5, 0, 0, 0],textStyle: {padding: [1, 0, 0, -5]},data: [{ name: "實到", textStyle: { color: "#18c196" } },{ name: "遲到", textStyle: { color: "#ff976a" } },{ name: "曠課", textStyle: { color: "#f15441" } },{ name: "請假", textStyle: { color: "#0089ff" } }]},xAxis: {type: "category",boundaryGap: false, //防止統(tǒng)計圖左側(cè)和縱軸有間隙axisLabel: { textStyle: { color: "gray" } },axisTick: { show: false }, //隱藏橫坐標刻度小線條splitLine: {show: true,lineStyle: { color: ["#f0f0f0"] } //縱向分割線},axisLine: { lineStyle: { color: "lightgray", width: 1 } },data: ["7/6", "7/7", "7/8", "7/9", "7/10"]//橫坐標的標簽文字},yAxis: {type: "value",name: "人數(shù)/日期",min: 0,minInterval: 1,nameLocation: "end",nameTextStyle: { color: "gray", fontSize: "12" },axisLabel: { textStyle: { color: "gray" } },axisTick: { show: false }, //隱藏縱坐標刻度小線條splitLine: {show: true,lineStyle: { color: ["#f0f0f0"] } //橫向分割線},axisLine: { lineStyle: { color: "lightgray", width: 1 } }},series: [{name: "實到",smooth: false, //平滑type: "line",symbolSize: 10, //折線拐點大小data: [41, 51, 55, 58, 49],//縱坐標值itemStyle: {normal: {color: "#18c196", //圖例顏色borderWidth: 4,borderColor: "#18c196",lineStyle: { color: "#18c196", width: 2 }}},areaStyle: {normal: {// 漸變填充色（線條下半部分）color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#18c196" },{ offset: 1, color: "#18c19600" }])}}},{name: "遲到",smooth: false, //平滑type: "line",symbolSize: 0, //折線拐點大小data: [3, 6, 3, 1, 1],//縱坐標值itemStyle: {normal: {color: "#ff976a", //圖例顏色borderWidth: 2,borderColor: "#ff976a",lineStyle: { color: "#ff976a", width: 1 }}},areaStyle: {normal: {// 漸變填充色（線條下半部分）color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#ff976a" },{ offset: 1, color: "#ff976a00" }])}}},{name: "曠課",smooth: false, //平滑type: "line",symbolSize: 0, //折線拐點大小data: [1, 3, 1, 0, 4],//縱坐標值itemStyle: {normal: {color: "#f15441", //圖例顏色borderWidth: 2,borderColor: "#f15441",lineStyle: { color: "#f15441", width: 1 }}},areaStyle: {normal: {// 漸變填充色（線條下半部分）color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#f15441" },{ offset: 1, color: "#f1544100" }])}}},{name: "請假",smooth: false, //平滑type: "line",symbolSize: 0, //折線拐點大小data: [5, 0, 1, 1, 6],//縱坐標值itemStyle: {normal: {color: "#0089ff", //圖例顏色borderWidth: 2,borderColor: "#0089ff",lineStyle: { color: "#0089ff", width: 1 }}},areaStyle: {normal: {// 漸變填充色（線條下半部分）color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#0089ff" },{ offset: 1, color: "#0089ff00" }])}}}]});// 點擊折線圖拐點this.lineChart.off("click"); //先移除，再點擊（這行代碼是為了防止重復(fù)綁定觸發(fā)點擊事件）this.lineChart.on("click", "series.line", params => {this.$parent.tempData.attendanceTeacher.form = this.form;this.$parent.tempData.attendanceTeacher.query = {KC: this.KC,BJ: this.BJ,RQ: params.name,KCRQFW: this.KCRQFW};this.$router.push({path: "/attendanceTeacherHistoryDetail",query: this.$parent.tempData.attendanceTeacher.query}); //折線點點擊后，可具體查看本次課程的具體簽到情況。});
},

總結(jié)

以上是生活随笔為你收集整理的【统计图】Echarts实现多条折线图渐变堆叠效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。