option = {
tooltip: {
show: true,
trigger: 'axis',
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisTick: {
show: false
},
axisLabel: {
color: '#606266',
fontSize: 13
},
axisLine: {
show: false,
},
splitLine: {
show: false,
},
},
yAxis: [{
type: 'value',
name: '订单数量',
nameLocation: 'middle',
position: 'left',
nameGap: 50,
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle: {
color:'#DCDFE6'
}
},
axisLabel: {
color: '#4E5969',
fontSize: 13
},
},
{
type: 'value',
name: '订单金额',
nameLocation: 'middle',
position: 'right',
nameGap: 50,
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false,
lineStyle: {
color:'#DCDFE6'
}
},
axisLabel: {
color: '#4E5969',
fontSize: 13
},
}],
series: [
{
name: '订单数量',
smooth: true,
symbol: 'circle', // 折线点设定为实心点
symbolSize: 1, // 设定折线点的大小
data: [70, 60, 50, 40, 90, 100, 110, 120, 130, 140, 132, 101],
type: 'line',
yAxisIndex: 0,
itemStyle: {
normal: {
color: "#FF5722",
borderColor: '#FF5722',
borderWidth: 1,
}
},//在单个图表实例中存在多个y轴的时候有用
lineStyle: {
color: "#FF5722",//折线的颜色,
width: 2,
},
areaStyle: {//区域填充渐变颜色
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(255,211,100,0.12)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(255,235,52,0)' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
},
{
name: '订单金额',
smooth: true,
symbol: 'circle', // 折线点设定为实心点
symbolSize: 1, // 设定折线点的大小
data: [20, 30, 40, 50, 60, 70, 80, 90, 110, 150, 170, 191],
type: 'line',
yAxisIndex: 1, //在单个图表实例中存在多个y轴的时候有用
areaStyle: {//区域填充渐变颜色
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(131,100,255,0.12)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(80,52,255,0)' // 100% 处的颜色
}],
global: false // 缺省为 false
}
},
itemStyle: {
normal: {
color: "#722ED1",
borderColor: '#722ED1',
borderWidth: 1,
}
},//在单个图表实例中存在多个y轴的时候有用
}
]
};