option = {
backgroundColor:'#092348',
tooltip: {
trigger: 'axis',
axisPointer: {
snap:true,
type: 'line',
lineStyle: {
color: '#1BD5DF', // 线的颜色
width: 4, // 线宽
type: 'solid' // 线型
},
}
},
legend: {
data: ['蓝色', '黄色'],
right:'40',
icon:'rect',
itemWidth:24,
itemHeight:24,
textStyle:{
color:'#fff'
}
},
xAxis: [
{
type: 'category',
data: ['1月','2月','3月','4月','5月','6月','7月'],
boundaryGap: false,
// 色块区域
splitArea: {
show: true,
areaStyle: {
color: ["#092348", "#061840"],
opacity:0.3
}
},
splitLine: {
show: true,
interval: 'auto',
lineStyle: {
color: ['#203760'],
shadowColor: 'rgba(83,144,255,0.5)',
shadowBlur: 3,
opacity:1,
width:1,
type: 'solid' // 网格线类型，这里使用实线
},
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#203760'
}
},
axisLabel: {
align: 'center',
color:'#fff',
margin:20,
textStyle: {
fontSize: 14
}
},
}
],
yAxis: [
{
type: 'value',
minInterval:1, //可以设置成1保证坐标轴分割刻度显示成整数
backgroundColor:'#547cb6',
splitLine: {
show: true, // 显示第一个Y轴网格线
lineStyle: {
color: ['#203760'],
shadowColor: 'rgba(83,144,255,0.5)',
shadowBlur: 3,
opacity:1,
width:1,
type: 'solid'
}
},
axisLabel: {
align: 'right',
color:'#fff',
margin:20,
}
},
{
type: 'value',
splitLine: {
show: false, // 第二个Y轴网格线 不显示
},
axisLabel: {
align: 'left',
color:'#fff',
margin:20,
}
},
],
series: [
{
name: '蓝色',
type: 'line',
smooth: true,
showSymbol: false,
itemStyle: {
opacity: 0.8,
color: '#10FEFF'
},
tooltip: {
valueFormatter: function (value) {
return value +'家';
}
},
data: [30,50,80,40,64,28,100],
},
{
name: '黄色',
type: 'line',
smooth: true,
showSymbol: false,
yAxisIndex: 1,
itemStyle: {
opacity: 0.8,
color: '#FFC710'
},
tooltip: {
valueFormatter: function (value) {
return value;
}
},
data: [120,230,430,200,80,150,340]
}
],
}