最近两天使用echarts做项目,只是简单的修改一下样式,没有深入研究API,具体下过请看下面的实例图片
下面是样式代码,具体见代码注释
options = { xAxis: { axisLine: {show: true,//x轴的线 lineStyle:{ color:['#062161'], } }, // 控制网格线是否显示 splitLine: { show: true, lineStyle: { // 使用深浅的间隔色 color: ['#062161'] } }, //除去x轴刻度 axisTick: { show: false }, axisLabel: {//控制x轴文本 show: true, textStyle: { color: '#fff' } }, type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], }, yAxis: { axisLabel:{show:false},//y轴文字 axisLine: {show: false},//y轴线是否显示 // 控制网格线是否显示 splitLine: { show: true, lineStyle: {//网格颜色 color: ['#062161'] } }, // 去除y轴上的刻度线 axisTick: { show: false } }, grid:{//配置网格距离canvase外层盒子距离 x:5, y:2, x2:5, y2:20, }, backgroundColor:'#0c1d48',//背景颜色 tooltip : {//鼠标移入折点显示悬浮框 trigger: 'item', formatter: function(val){ var relVal =""; relVal += '时间'+' '+'日期'+"
"; relVal +="出勤人数"+" "+"数量"+"
"; return relVal; }, backgroundColor:"#0689e4", padding:[5,10], }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290, 1330, 1320], type: 'line', areaStyle: {normal: {//设置线下面部分颜色渐变 color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ {offset: 0, color: '#3e4abb'}, {offset: 0.5, color: '#222f77'}, {offset: 1, color: '#182250'} ] ) }}, smooth: true, symbol: 'circle', //设定为实心点 symbolSize: 7, //设定实心点的大小 itemStyle:{ normal:{ color:'#595de4',//折点颜色 lineStyle:{ color:'#595de4',//折线颜色 width:'3' } } } }] };