/** * * 作者: GhostCat * 博客: https://gcat.cc * 描述: 折线图 * */ let xLabel = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']; let goToSchool = ['4.3', '2.5', '3.5', '4.5', '4.3', '2.5', '3.5', '8.5', '4.3', '2.5', '3.5', '4.5']; let goOutSchool = ['2.4', '4.4', '1.8', '2.8', '2.4', '4.4', '1.8', '2.8', '2.4', '4.4', '1.8', '2.8']; let goOutSchool2 = ['12.4', '14.4', '11.8', '2.8', '2.4', '4.4', '1.8', '2.8', '2.4', '4.4', '1.8', '2.8']; option = { backgroundColor: '#013A54', tooltip: { trigger: 'axis', backgroundColor: 'transparent', axisPointer: { lineStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: '#4E36DC', // 0% 处的颜色 }, { offset: 0.5, color: 'rgba(126,199,255,1)', // 100% 处的颜色 }, { offset: 1, color: 'rgba(126,199,255,0)', // 100% 处的颜色 }, ], global: false, // 缺省为 false }, }, }, formatter: (p) => { let dom = `

${p[0] ? p[0].seriesName : ''} ${p[0] ? p[0].data : ''}

${p[1] ? p[1].seriesName : ''} ${p[1] ? p[1].data : ''}

${p[2] ? p[2].seriesName : ''} ${p[2] ? p[2].data : ''}

`; return dom; }, }, legend: { align: 'left', right: '5%', top: '14%', type: 'plain', textStyle: { color: '#3CA1EC', fontSize: 16, }, // icon:'rect', itemGap: 25, itemWidth: 18, icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z', data: [ { name: '应用1', }, { name: '应用2', }, { name: '应用3', }, ], }, grid: { top: '18%', left: '15%', right: '5%', bottom: '25%', // containLabel: true }, xAxis: [ { type: 'category', boundaryGap: false, axisLine: { //坐标轴轴线相关设置。数学上的x轴 show: true, lineStyle: { color: '#233653', }, }, axisLabel: { //坐标轴刻度标签的相关设置 textStyle: { color: '##E06148', padding: 16, fontSize: 14, }, formatter: function (data) { return data; }, }, splitLine: { show: true, lineStyle: { color: '#192a44', }, }, axisTick: { show: false, }, data: xLabel, }, ], yAxis: [ { name: '单位：笔', nameTextStyle: { color: '#7ec7ff', fontSize: 16, padding: 10, }, min: 0, splitLine: { show: true, lineStyle: { color: '#192a44', }, }, axisLine: { show: true, lineStyle: { color: '#233653', }, }, axisLabel: { show: true, textStyle: { color: '#7ec7ff', padding: 16, }, formatter: function (value) { if (value === 0) { return value; } return value; }, }, axisTick: { show: false, }, }, ], series: [ { name: '应用1', type: 'line', symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆 showAllSymbol: true, symbolSize: 0, smooth: true, lineStyle: { normal: { width: 5, color: '#F86E4E', // 线条颜色 }, borderColor: 'rgba(0,0,0,.4)', }, itemStyle: { color: 'rgba(25,163,223,1)', borderColor: '#646ace', borderWidth: 2, }, tooltip: { show: true, }, areaStyle: { //区域填充样式 normal: { //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。 color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ { offset: 0, color: '#E06148', }, { offset: 1, color: '#3CA1EC', }, { offset: 0, color: '#E06148', }, ], false ), shadowColor: 'rgba(25,163,223, 0.5)', //阴影颜色 shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。 }, }, data: goToSchool, }, { name: '应用2', type: 'line', symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆 showAllSymbol: true, symbolSize: 0, smooth: true, lineStyle: { normal: { width: 5, color: 'rgba(10,219,250,1)', // 线条颜色 }, borderColor: 'rgba(0,0,0,.4)', }, itemStyle: { color: 'rgba(10,219,250,1)', borderColor: '#646ace', borderWidth: 2, }, tooltip: { show: true, }, areaStyle: { //区域填充样式 normal: { //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。 color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ { offset: 0, color: 'rgba(10,219,250,.3)', }, { offset: 1, color: 'rgba(10,219,250, 0)', }, { offset: 0, color: 'rgba(10,219,250,.3)', }, ], false ), shadowColor: 'rgba(10,219,250, 0.5)', //阴影颜色 shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。 }, }, data: goOutSchool, }, { name: '应用3', type: 'line', symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆 showAllSymbol: true, symbolSize: 0, smooth: true, lineStyle: { normal: { width: 5, color: 'rgba(10,219,250,1)', // 线条颜色 }, borderColor: 'rgba(0,0,0,.4)', }, itemStyle: { color: 'rgba(10,219,250,1)', borderColor: '#646ace', borderWidth: 2, }, tooltip: { show: true, }, areaStyle: { //区域填充样式 normal: { //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。 color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ { offset: 0, color: 'rgba(10,219,250,.3)', }, { offset: 1, color: 'rgba(10,219,250, 0)', }, { offset: 0, color: 'rgba(10,219,250,.3)', }, ], false ), shadowColor: 'rgba(10,219,250, 0.5)', //阴影颜色 shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。 }, }, data: goOutSchool2, }, ], };

Echarts在线免费图表