option = { backgroundColor: '#000', grid:{ containLabel: true, left:30, top:30, bottom:30, right:30 }, tooltip: { show: true, trigger: 'axis', padding:[0,0,0,0], axisPointer: { lineStyle: { width: 1, type:'solid', color:'#00D1FF' } }, backgroundColor: 'transparent', borderColor:'transparent', shadowColor:'transparent', formatter: (val)=> { return `

${val[0].name}

数量 ${val[0].data}

` }, }, textStyle:{ color:'rgba(221,247,255,0.7)', }, xAxis: [{ type: 'category', data: ['01/08', '01/09', '01/10', '01/11', '01/12', '01/13', '01/14'], axisLine: { lineStyle: { color: '#96A9B7', type:'dashed'//虚线 } }, axisTick: { show: false }, }], yAxis: [{ type: 'value', axisTick: { show: false }, axisLine: { show: true, lineStyle: { color: '#96A9B7' } }, splitLine: { show: true, lineStyle: { color: '#96A9B7', type:'dashed'//虚线 } } }], series: [{ type: 'line', data: [10, 10, 30, 12, 15, 3, 7], smooth: true, yAxisIndex: 0, symbol: 'circle', symbolSize: 6, showSymbol:false, hoverAnimation:true, itemStyle: { color: "#fff", borderColor: "#00FFFF", borderWidth: 2, }, lineStyle:{ normal: { borderWidth: 5, color: { colorStops: [{ offset: 0, color: '#00FFFF00' }, { offset: 0.5, color: '#00FFFF' }, { offset: 1, color: '#00FFFF00' } ], } } }, areaStyle: { //区域填充样式 normal: { //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#00FFFF" }, { offset: 1, color: "rgba(0, 255, 255, 0)" } ], false), shadowColor: 'rgba(0, 255, 255, 0.5)', //阴影颜色 shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。 } }, } ] };

区域、折线渐变折线图