效果图:
实现代码:
option = {
backgroundColor: 'rgba(255,255,255,0)',
title: {
show: false,
text: '近半年各月新入驻企业情况',
subtext: '纯属虚构'
},
tooltip: {
trigger: 'axis',
textStyle: {
fontSize: 18
}
},
legend: {
icon: 'rect',
textStyle: {
color: '#000',
fontSize: 18
},
data: ['累积企业数', '新增企业数']
},
toolbox: {
show: false,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar', 'stack', 'tiled']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: true,
xAxis: [{
nameTextStyle: {
color: '#000'
},
type: 'category',
boundaryGap: false,
asisLine: {
show: true,
onZero: true,
lineStyle: {
width: 1,
type: 'solid',
color: '#000'
}
},
splitLine: {
show: true,
lineStyle: {
color: 'black'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#000',
fontSize: '18'
}
},
data: ['2013', '2014', '2015', '2016', '2017', '2018']
}],
yAxis: [{
type: 'value',
asisLine: {
show: true,
onZero: true,
lineStyle: {
width: 1,
type: 'solid',
color: '#000'
}
},
splitLine: {
show: true,
lineStyle: {
color: 'black'
}
},
axisLabel: {
textStyle: {
color: '#000',
fontSize: '18'
}
},
}],
series: [{
z: 3,
name: '累积企业数',
type: 'line',
smooth: false,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#8F89EB'
},
{
offset: 0.9,
color: '#ffffff'
}]),
areaStyle: {
type: 'default'
}
}
},
data: [150, 160, 270, 460, 280, 540]
},
{
name: '新增企业数',
type: 'line',
smooth: false,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#2FE0D4'
},
{
offset: 0.9,
color: '#ffffff'
}]),
areaStyle: {
type: 'default'
}
}
},
data: [350, 450, 520, 620, 690, 550]
}]
};